Pricing Components in Nightsable library

<section x-data="{ toggle: true }" class="py-24 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="mb-20 md:max-w-2xl text-center mx-auto">
      <span class="inline-block mb-4 text-sm text-green-400 font-medium tracking-tighter">Nightsable Card</span>
      <h2 class="font-heading mb-8 text-7xl lg:text-8xl text-white tracking-7xl lg:tracking-8xl">Compare our plans</h2>
      <p class="mb-12 text-gray-300 max-w-sm mx-auto">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div x-on:click="toggle = !toggle" class="relative p-1 max-w-max mx-auto bg-gradient-radial-dark-light rounded-full">
        <input class="opacity-0 absolute top-0 left-0 z-10 w-full h-full" type="checkbox">
        <div class="flex flex-wrap items-center">
          <div class="relative w-full sm:w-auto">
            <a :class="{'text-black bg-white': toggle, 'text-gray-300': !toggle}" class="block py-5 px-9 text-center text-black bg-white focus:ring-4 focus:ring-white focus:ring-opacity-40 font-medium rounded-full transition-all duration-200" href="#">Monthly billing</a>
          </div>
          <div class="relative flex-1">
            <a :class="{'bg-white': !toggle }" class="flex flex-wrap items-center justify-center py-3.5 px-9 text-center rounded-full transition-all duration-200" href="#">
              <p :class="{'text-black': !toggle, 'text-gray-300': toggle}" class="mr-2.5 text-gray-300 font-medium">Annual billing</p>
              <span class="px-3 py-1.5 text-sm font-medium text-center text-green-400 uppercase border border-green-400 rounded-full">Save 20%</span>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -m-4">
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative px-8 pt-12 pb-12 h-full bg-gradient-radial-dark border-2 border-gray-900 border-opacity-30 overflow-hidden rounded-5xl">
          <p class="mb-2 text-lg text-white font-light">Basic</p>
          <p class="mb-6 text-gray-300">During this phase the design is developed to meet the required technical standards to</p>
          <p class="mb-4 text-white font-medium text-5xl">
            <span :class="{ 'hidden': !toggle }">$10</span>
            <span :class="{ 'hidden': !toggle }" class="text-base font-medium text-gray-300">/ month</span>
            <span :class="{ 'hidden': toggle }" class="hidden">$20</span>
            <span :class="{ 'hidden': toggle }" class="hidden text-base font-medium text-gray-300">/ year</span>
          </p>
          <p class="mb-6 text-xs text-gray-300 font-light uppercase">What's includes</p>
          <ul class="mb-10">
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Core engagement survey</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Topic-based assessments</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Custom topic-based assessments</p>
            </li>
            <li class="flex items-center">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Filterable heatmap &amp; analytics</p>
            </li>
          </ul>
          <a class="relative z-10 block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/pricing/shadow.svg" alt="">
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="relative px-8 pt-12 pb-12 h-full bg-gradient-radial-dark border-2 border-gray-900 border-opacity-30 overflow-hidden rounded-5xl">
          <p class="mb-2 text-lg text-white font-light">Business plan</p>
          <p class="mb-6 text-gray-300">During this phase the design is developed to meet the required technical standards to</p>
          <p class="mb-4 text-white font-medium text-5xl">
            <span :class="{ 'hidden': !toggle }">$25</span>
            <span :class="{ 'hidden': !toggle }" class="text-base font-medium text-gray-300">/ month</span>
            <span :class="{ 'hidden': toggle }" class="hidden">$50</span>
            <span :class="{ 'hidden': toggle }" class="hidden text-base font-medium text-gray-300">/ year</span>
          </p>
          <p class="mb-6 text-xs text-gray-300 font-light uppercase">What's includes</p>
          <ul class="mb-10">
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Core engagement survey</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Topic-based assessments</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Custom topic-based assessments</p>
            </li>
            <li class="flex items-center">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Filterable heatmap &amp; analytics</p>
            </li>
          </ul>
          <a class="relative z-10 block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/pricing/shadow.svg" alt="">
        </div>
      </div>
      <div class="w-full lg:w-1/3 p-4">
        <div class="relative px-8 pt-12 pb-12 h-full bg-gradient-radial-dark border-2 border-gray-900 border-opacity-30 overflow-hidden rounded-5xl">
          <p class="mb-2 text-lg text-white font-light">Premium</p>
          <p class="mb-6 text-gray-300">During this phase the design is developed to meet the required technical standards to</p>
          <p class="mb-4 text-white font-medium text-5xl">
            <span :class="{ 'hidden': !toggle }">$50</span>
            <span :class="{ 'hidden': !toggle }" class="text-base font-medium text-gray-300">/ month</span>
            <span :class="{ 'hidden': toggle }" class="hidden">$100</span>
            <span :class="{ 'hidden': toggle }" class="hidden text-base font-medium text-gray-300">/ year</span>
          </p>
          <p class="mb-6 text-xs text-gray-300 font-light uppercase">What's includes</p>
          <ul class="mb-10">
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Core engagement survey</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Topic-based assessments</p>
            </li>
            <li class="flex items-center mb-4">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Custom topic-based assessments</p>
            </li>
            <li class="flex items-center">
              <div class="flex items-center justify-center w-5 h-5 mr-4 border border-green-400 rounded-full">
                <img src="nightsable-assets/images/modals/check.svg" alt="">
              </div>
              <p class="text-white">Filterable heatmap &amp; analytics</p>
            </li>
          </ul>
          <a class="relative z-10 block px-14 py-4 text-center font-medium tracking-2xl border-2 border-green-400 bg-green-400 hover:bg-green-500 text-black focus:ring-4 focus:ring-green-500 focus:ring-opacity-40 rounded-full transition duration-300" href="#">Start now</a>
          <img class="absolute bottom-0 right-0" src="nightsable-assets/images/pricing/shadow.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-12 py-lg-24 bg-black position-relative overflow-hidden">
  <div class="container position-relative">
    <div class="text-center mb-14"><span class="badge mb-4 text-primary">Nightsable Card</span>
      <h1 class="font-heading h2 text-white mb-8" style="letter-spacing: -0.2rem;">Compare our plans</h1>
      <p class="mw-sm mx-auto text-secondary-light mb-12">Nightsable is a strategic branding agency focused on brand creation, rebrands, and brand</p>
      <div class="d-inline-flex flex-column flex-sm-row gap-2 justify-content-between align-items-center mw-lg mx-auto rounded-pill" style="background: radial-gradient(80.63% 80.22% at 52.97% 50%, rgba(71, 80, 98, 0.46) 0%, rgba(137, 137, 137, 0.00) 100%);">
        <button class="btn btn-light-light fw-medium">Monthly billing</button>
        <button class="btn d-flex flex-wrap align-items-center justify-content-center mb-n1 fw-medium text-secondary-light"><span class="d-block mb-1 me-2">Annual billing</span><span class="d-inline-block px-3 py-1 lh-sm fs-9 text-primary border border-2 border-primary rounded-pill">SAVE 20%</span></button>
      </div>
    </div>
    <div class="mw-sm mx-auto mw-lg-none">
      <div class="row">
        <div class="col-12 col-lg-4 mb-8 mb-lg-0">
          <div class="px-8 py-12 text-start border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/features/bg-gray-2.png" alt="">
            <div class="d-flex flex-column align-items-start position-relative"><span class="d-block mb-4 fs-7">Basic</span>
              <p class="text-secondary-light mb-6">During this phase the design is developed to meet the required technical standards to</p>
              <div class="d-flex mb-10 align-items-end"><span class="fs-2 lh-sm fw-medium">$10</span><span class="ms-3 pb-1 text-secondary-light fw-medium">/ month</span></div><span class="d-block mb-5 fs-10 text-secondary-light">WHAT`S INCLUDED</span>
              <ul class="list-unstyled mb-10">
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Core engagement survey</span>
                </li>
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Topic-based assessments</span>
                </li>
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Custom topic-based assessments</span>
                </li>
                <li class="d-flex align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Filterable heatmap &amp; analytics</span>
                </li>
              </ul><a class="btn btn-primary w-100 fw-medium" href="#">Start now</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4 mb-8 mb-lg-0">
          <div class="px-8 py-12 text-start border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/features/bg-gray-2.png" alt="">
            <div class="d-flex flex-column align-items-start position-relative"><span class="d-block mb-4 fs-7">Basic</span>
              <p class="text-secondary-light mb-6">During this phase the design is developed to meet the required technical standards to</p>
              <div class="d-flex mb-10 align-items-end"><span class="fs-2 lh-sm fw-medium">$10</span><span class="ms-3 pb-1 text-secondary-light fw-medium">/ month</span></div><span class="d-block mb-5 fs-10 text-secondary-light">WHAT`S INCLUDED</span>
              <ul class="list-unstyled mb-10">
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Core engagement survey</span>
                </li>
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Topic-based assessments</span>
                </li>
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Custom topic-based assessments</span>
                </li>
                <li class="d-flex align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Filterable heatmap &amp; analytics</span>
                </li>
              </ul><a class="btn btn-primary w-100 fw-medium" href="#">Start now</a>
            </div>
          </div>
        </div>
        <div class="col-12 col-lg-4">
          <div class="px-8 py-12 text-start border border-secondary-dark border-opacity-25 rounded-5 position-relative overflow-hidden" style="background: radial-gradient(72.2% 78.49% at 49.87% 50.1%, rgba(71, 80, 98, 0.26) 0%, rgba(137, 137, 137, 0.00) 100%);"><img class="position-absolute bottom-0 end-0" src="nightsable-assets/images/features/bg-gray-2.png" alt="">
            <div class="d-flex flex-column align-items-start position-relative"><span class="d-block mb-4 fs-7">Basic</span>
              <p class="text-secondary-light mb-6">During this phase the design is developed to meet the required technical standards to</p>
              <div class="d-flex mb-10 align-items-end"><span class="fs-2 lh-sm fw-medium">$10</span><span class="ms-3 pb-1 text-secondary-light fw-medium">/ month</span></div><span class="d-block mb-5 fs-10 text-secondary-light">WHAT`S INCLUDED</span>
              <ul class="list-unstyled mb-10">
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Core engagement survey</span>
                </li>
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Topic-based assessments</span>
                </li>
                <li class="d-flex mb-4 align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Custom topic-based assessments</span>
                </li>
                <li class="d-flex align-items-center">
                  <svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="0.5" y="1" width="20" height="20" rx="10" stroke="#CCFF00"></rect>
                    <g clip-path="url(#clip0_170_720)">
                      <path d="M15.7676 8.13463C15.4582 7.82482 14.9558 7.82501 14.646 8.13463L9.59787 13.183L7.35419 10.9393C7.04438 10.6295 6.54217 10.6295 6.23236 10.9393C5.92255 11.2491 5.92255 11.7513 6.23236 12.0611L9.03684 14.8656C9.19165 15.0204 9.39464 15.098 9.59765 15.098C9.80067 15.098 10.0039 15.0206 10.1587 14.8656L15.7676 9.25644C16.0775 8.94684 16.0775 8.44443 15.7676 8.13463Z" fill="#CCFF00"></path>
                    </g>
                  </svg><span class="ms-4">Filterable heatmap &amp; analytics</span>
                </li>
              </ul><a class="btn btn-primary w-100 fw-medium" href="#">Start now</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>