Tailwind CSS Pricing Components

<section class="relative py-20 overflow-hidden bg-orange-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-18 text-center">
      <span class="inline-block py-1 px-3 mb-4 text-xs font-semibold bg-orange-900 text-orange-100 rounded-full">OUR PLANS</span>
      <h1 class="font-heading text-5xl xs:text-6xl md:text-7xl font-bold text-gray-900">
        <span>Get your</span>
        <span class="font-serif italic">ticket</span>
        <span>here</span>
      </h1>
    </div>
    <div class="max-w-7xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-10 lg:mb-0">
          <div class="relative max-w-sm lg:max-w-none mx-auto bg-white rounded-6xl">
            <div class="pt-2 px-2">
              <div class="relative pt-12 pb-10 px-6 h-52 rounded-6xl bg-purple-50 overflow-hidden">
                <img class="absolute bottom-0 left-0 w-full" src="saturn-assets/images/pricing/wave-bg1.svg" alt="">
                <div class="relative text-center">
                  <span class="inline-block py-1.5 px-5 mb-6 font-semibold text-pink-500 bg-pink-200 rounded-full">Beginner</span>
                  <span class="block text-5xl font-bold">$99.00</span>
                </div>
              </div>
            </div>
            <div class="h-8 mb-7 relative">
              <div class="absolute left-0 top-1/2 transform -translate-y-1/2 w-full">
                <div class="w-full border-b-8 border-dotted border-orange-50"></div>
              </div>
              <div class="absolute top-0 left-0 transform -translate-x-1/2 w-8 h-8 bg-orange-50 rounded-full"></div>
              <div class="absolute top-0 right-0 transform translate-x-1/2 w-8 h-8 bg-orange-50 rounded-full"></div>
            </div>
            <div class="px-6 pb-12">
              <ul class="mb-12">
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/green-check.svg" alt="">
                  <span class="ml-3 text-gray-900">1 days access to the conference</span>
                </li>
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/green-check.svg" alt="">
                  <span class="ml-3 text-gray-900">Music, launch and snack</span>
                </li>
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/green-check.svg" alt="">
                  <span class="ml-3 text-gray-900">Meet Event Speaker</span>
                </li>
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/red-check.svg" alt="">
                  <span class="ml-3 text-gray-400">Live video online access</span>
                </li>
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/red-check.svg" alt="">
                  <span class="ml-3 text-gray-400">Get a certificate</span>
                </li>
              </ul>
              <div class="text-center">
                <a class="relative group inline-block py-4 px-5 items-center text-orange-50 font-semibold bg-orange-900 rounded-full overflow-hidden" href="#">
                  <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                  <div class="relative flex items-center justify-center">
                    <span class="mr-2">Choose Plan</span>
                    <span>
                      <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.71 1.20998C14.617 1.11625 14.5064 1.04186 14.3846 0.991091C14.2627 0.940323 14.132 0.914185 14 0.914185C13.868 0.914185 13.7373 0.940323 13.6154 0.991091C13.4936 1.04186 13.383 1.11625 13.29 1.20998L5.84001 8.66998L2.71001 5.52998C2.61349 5.43674 2.49955 5.36343 2.37469 5.31423C2.24984 5.26502 2.11651 5.24089 1.98233 5.24321C1.84815 5.24553 1.71574 5.27426 1.59266 5.32776C1.46959 5.38125 1.35825 5.45846 1.26501 5.55498C1.17177 5.6515 1.09846 5.76545 1.04925 5.8903C1.00005 6.01516 0.97592 6.14848 0.978241 6.28266C0.980563 6.41684 1.00929 6.54925 1.06278 6.67233C1.11628 6.79541 1.19349 6.90674 1.29001 6.99998L5.13001 10.84C5.22297 10.9337 5.33358 11.0081 5.45543 11.0589C5.57729 11.1096 5.708 11.1358 5.84001 11.1358C5.97202 11.1358 6.10273 11.1096 6.22459 11.0589C6.34645 11.0081 6.45705 10.9337 6.55001 10.84L14.71 2.67998C14.8115 2.58634 14.8925 2.47269 14.9479 2.34619C15.0033 2.21969 15.0319 2.08308 15.0319 1.94498C15.0319 1.80688 15.0033 1.67028 14.9479 1.54378C14.8925 1.41728 14.8115 1.30363 14.71 1.20998Z" fill="currentColor"></path>
                      </svg>
                    </span>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4 mb-10 lg:mb-0">
          <div class="relative max-w-sm lg:max-w-none mx-auto bg-orange-700 rounded-6xl">
            <div class="pt-2 px-2">
              <div class="relative pt-12 pb-10 px-6 h-52 rounded-6xl bg-orange-900 overflow-hidden">
                <img class="absolute bottom-0 left-0 w-full" src="saturn-assets/images/pricing/wave-bg2.svg" alt="">
                <div class="relative text-center">
                  <span class="inline-block py-1.5 px-5 mb-6 font-semibold text-white bg-orange-700 rounded-full">Premium</span>
                  <span class="block text-5xl font-bold text-white">$149.00</span>
                </div>
              </div>
            </div>
            <div class="h-8 mb-7 relative">
              <div class="absolute left-0 top-1/2 transform -translate-y-1/2 w-full">
                <div class="w-full border-b-8 border-dotted border-orange-50"></div>
              </div>
              <div class="absolute top-0 left-0 transform -translate-x-1/2 w-8 h-8 bg-orange-50 rounded-full"></div>
              <div class="absolute top-0 right-0 transform translate-x-1/2 w-8 h-8 bg-orange-50 rounded-full"></div>
            </div>
            <div class="px-6 pb-12">
              <ul class="mb-12">
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/orange-check.svg" alt="">
                  <span class="ml-3 text-gray-50">1 days access to the conference</span>
                </li>
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/orange-check.svg" alt="">
                  <span class="ml-3 text-gray-50">Music, launch and snack</span>
                </li>
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/orange-check.svg" alt="">
                  <span class="ml-3 text-gray-50">Meet Event Speaker</span>
                </li>
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/orange-check.svg" alt="">
                  <span class="ml-3 text-gray-50">Live video online access</span>
                </li>
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/orange-disable.svg" alt="">
                  <span class="ml-3 text-orange-400">Get a certificate</span>
                </li>
              </ul>
              <div class="text-center">
                <a class="relative group inline-block py-4 px-5 items-center text-orange-900 hover:text-orange-50 font-semibold bg-white rounded-full overflow-hidden transition duration-300" href="#">
                  <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                  <div class="relative flex items-center justify-center">
                    <span class="mr-2">Choose Plan</span>
                    <span>
                      <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.71 1.20998C14.617 1.11625 14.5064 1.04186 14.3846 0.991091C14.2627 0.940323 14.132 0.914185 14 0.914185C13.868 0.914185 13.7373 0.940323 13.6154 0.991091C13.4936 1.04186 13.383 1.11625 13.29 1.20998L5.84001 8.66998L2.71001 5.52998C2.61349 5.43674 2.49955 5.36343 2.37469 5.31423C2.24984 5.26502 2.11651 5.24089 1.98233 5.24321C1.84815 5.24553 1.71574 5.27426 1.59266 5.32776C1.46959 5.38125 1.35825 5.45846 1.26501 5.55498C1.17177 5.6515 1.09846 5.76545 1.04925 5.8903C1.00005 6.01516 0.97592 6.14848 0.978241 6.28266C0.980563 6.41684 1.00929 6.54925 1.06278 6.67233C1.11628 6.79541 1.19349 6.90674 1.29001 6.99998L5.13001 10.84C5.22297 10.9337 5.33358 11.0081 5.45543 11.0589C5.57729 11.1096 5.708 11.1358 5.84001 11.1358C5.97202 11.1358 6.10273 11.1096 6.22459 11.0589C6.34645 11.0081 6.45705 10.9337 6.55001 10.84L14.71 2.67998C14.8115 2.58634 14.8925 2.47269 14.9479 2.34619C15.0033 2.21969 15.0319 2.08308 15.0319 1.94498C15.0319 1.80688 15.0033 1.67028 14.9479 1.54378C14.8925 1.41728 14.8115 1.30363 14.71 1.20998Z" fill="currentColor"></path>
                      </svg>
                    </span>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="relative max-w-sm lg:max-w-none mx-auto bg-white rounded-6xl">
            <div class="pt-2 px-2">
              <div class="relative pt-12 pb-10 px-6 h-52 rounded-6xl bg-purple-50 overflow-hidden">
                <img class="absolute bottom-0 left-0 w-full" src="saturn-assets/images/pricing/wave-bg1.svg" alt="">
                <div class="relative text-center">
                  <span class="inline-block py-1.5 px-5 mb-6 font-semibold text-indigo-500 bg-indigo-100 rounded-full">Advanced</span>
                  <span class="block text-5xl font-bold">$199.00</span>
                </div>
              </div>
            </div>
            <div class="h-8 mb-7 relative">
              <div class="absolute left-0 top-1/2 transform -translate-y-1/2 w-full">
                <div class="w-full border-b-8 border-dotted border-orange-50"></div>
              </div>
              <div class="absolute top-0 left-0 transform -translate-x-1/2 w-8 h-8 bg-orange-50 rounded-full"></div>
              <div class="absolute top-0 right-0 transform translate-x-1/2 w-8 h-8 bg-orange-50 rounded-full"></div>
            </div>
            <div class="px-6 pb-12">
              <ul class="mb-12">
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/green-check.svg" alt="">
                  <span class="ml-3 text-gray-900">1 days access to the conference</span>
                </li>
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/green-check.svg" alt="">
                  <span class="ml-3 text-gray-900">Music, launch and snack</span>
                </li>
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/green-check.svg" alt="">
                  <span class="ml-3 text-gray-900">Meet Event Speaker</span>
                </li>
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/green-check.svg" alt="">
                  <span class="ml-3 text-gray-900">Live video online access</span>
                </li>
                <li class="flex mb-5 items-center">
                  <img src="saturn-assets/images/pricing/green-check.svg" alt="">
                  <span class="ml-3 text-gray-900">Get a certificate</span>
                </li>
              </ul>
              <div class="text-center">
                <a class="relative group inline-block py-4 px-5 items-center text-orange-50 font-semibold bg-orange-900 rounded-full overflow-hidden" href="#">
                  <div class="absolute top-0 right-full w-full h-full bg-gray-900 transform group-hover:translate-x-full group-hover:scale-102 transition duration-500"></div>
                  <div class="relative flex items-center justify-center">
                    <span class="mr-2">Choose Plan</span>
                    <span>
                      <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M14.71 1.20998C14.617 1.11625 14.5064 1.04186 14.3846 0.991091C14.2627 0.940323 14.132 0.914185 14 0.914185C13.868 0.914185 13.7373 0.940323 13.6154 0.991091C13.4936 1.04186 13.383 1.11625 13.29 1.20998L5.84001 8.66998L2.71001 5.52998C2.61349 5.43674 2.49955 5.36343 2.37469 5.31423C2.24984 5.26502 2.11651 5.24089 1.98233 5.24321C1.84815 5.24553 1.71574 5.27426 1.59266 5.32776C1.46959 5.38125 1.35825 5.45846 1.26501 5.55498C1.17177 5.6515 1.09846 5.76545 1.04925 5.8903C1.00005 6.01516 0.97592 6.14848 0.978241 6.28266C0.980563 6.41684 1.00929 6.54925 1.06278 6.67233C1.11628 6.79541 1.19349 6.90674 1.29001 6.99998L5.13001 10.84C5.22297 10.9337 5.33358 11.0081 5.45543 11.0589C5.57729 11.1096 5.708 11.1358 5.84001 11.1358C5.97202 11.1358 6.10273 11.1096 6.22459 11.0589C6.34645 11.0081 6.45705 10.9337 6.55001 10.84L14.71 2.67998C14.8115 2.58634 14.8925 2.47269 14.9479 2.34619C15.0033 2.21969 15.0319 2.08308 15.0319 1.94498C15.0319 1.80688 15.0033 1.67028 14.9479 1.54378C14.8925 1.41728 14.8115 1.30363 14.71 1.20998Z" fill="currentColor"></path>
                      </svg>
                    </span>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 bg-gradient-to-r from-neutral-950 via-neutral-900 to-neutral-950" x-data="{ pricing: '' }" x-init="pricing = $refs.pricing1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto mb-20 text-center">
      <span class="block text-sm text-neutral-400 font-medium mb-4">Lorem ipsum</span>
      <h2 class="mb-4 text-3xl md:text-4xl lg:text-5xl leading-tight font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Security in saving</h2>
      <p class="text-lg leading-relaxed text-neutral-300 mb-8">Take care to develop resources continually and integrity them with previous projects. More interesting writings for your customers.</p>
      <a x-ref="pricing1" x-on:click.prevent="pricing = $refs.pricing1.textContent" class="mr-6 text-lg pb-2 border-b-4 border-white transition-colors duration-200" :class="{ 'border-white text-white': pricing == $refs.pricing1.textContent, 'text-neutral-400 border-transparent hover:border-neutral-400': pricing != $refs.pricing1.textContent }" href="#">Monthly</a>
      <a x-ref="pricing2" x-on:click.prevent="pricing = $refs.pricing2.textContent" class="text-lg pb-2 border-b-4 transition-colors duration-200" :class="{ 'border-white text-white': pricing == $refs.pricing2.textContent, 'text-neutral-400 border-transparent hover:border-neutral-400': pricing != $refs.pricing2.textContent }" href="#">Yearly</a>
    </div>
    <div class="relative flex flex-wrap items-center -mx-4 -mb-6 lg:mb-0">
      <div class="absolute inset-0 opacity-20 bg-gradient-to-r from-purple-900 via-purple-600 to-purple-900 rounded-2xl filter blur-3xl"></div>
      <div class="relative w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl transition-all duration-200">
            <div class="p-6 md:p-12 bg-gradient-to-br from-neutral-950 via-neutral-800 to-neutral-950 border border-white border-opacity-20 rounded-xl lg:text-center">
                <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Starter</h3>
                <span class="inline-block mb-6 text-4xl md:text-6xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">$34,99</span>
                <ul class="mb-8 text-left text-lg">
                    <li class="mb-2 flex items-center">
                        <svg class="mr-2 w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <p class="text-neutral-300">Complete documentation</p>
                    </li>
                    <li class="mb-2 flex items-center">
                        <svg class="mr-2 w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <p class="text-neutral-300">Working materials in Figma</p>
                    </li>
                    <li class="mb-2 flex items-center">
                        <svg class="mr-2 w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                        <p class="text-neutral-300">100GB cloud storage</p>
                    </li>
                </ul>
                <a class="inline-flex items-center justify-center w-full px-6 py-3 text-sm font-semibold text-white hover:text-white border border-neutral-700 hover:border-white hover:border-opacity-50 rounded-full transition-all duration-200" href="#">Get Started</a>
            </div>
        </div>
      </div>
      <div class="relative w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl">
            <div class="p-6 md:p-12 bg-gradient-to-r from-purple-950 via-purple-800 to-purple-950 border border-white border-opacity-20 rounded-xl lg:text-center relative">
              <div class="absolute -top-4 left-1/2 transform -translate-x-1/2">
                  <span class="px-4 py-2 text-sm font-semibold text-neutral-950 bg-white rounded-md">Most Popular</span>
              </div>
              <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-50 via-gray-100 to-gray-50">Pro</h3>
              <span class="inline-block mb-6 text-4xl md:text-6xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">$65,99</span>
              <ul class="mb-8 text-left text-lg">
                  <li class="mb-2 flex items-center">
                    <svg class="mr-2 w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p class="text-lg text-neutral-200">Complete documentation</p>
                  </li>
                  <li class="mb-2 flex items-center">
                    <svg class="mr-2 w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p class="text-lg text-neutral-200">Working materials in Figma</p>
                  </li>
                  <li class="mb-2 flex items-center">
                    <svg class="mr-2 w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p class="text-lg text-neutral-200">100GB cloud storage</p>
                  </li>
                  <li class="mb-2 flex items-center">
                    <svg class="mr-2 w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p class="text-lg text-neutral-200">500 team members</p>
                  </li>
                  <li class="mb-2 flex items-center">
                    <svg class="mr-2 w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                    <p class="text-lg text-neutral-200">Premium support</p>
                  </li>
              </ul>
              <a class="inline-flex items-center justify-center w-full px-6 py-3 text-sm font-semibold text-neutral-950 bg-white hover:bg-neutral-100 rounded-full transition-all duration-200 hover:shadow-lg group" href="#">
                  Get Started
                  <svg class="ml-1 w-4 h-4 transform group-hover:translate-x-1 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                  </svg>
              </a>
            </div>
        </div>
      </div>
      <div class="relative w-full lg:w-1/3 px-4">
        <div class="p-1 border border-white border-opacity-20 rounded-2xl">
            <div class="p-6 md:p-12 bg-gradient-to-bl from-neutral-950 via-neutral-800 to-neutral-950 border border-white border-opacity-20 rounded-xl lg:text-center">
              <h3 class="text-2xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">Premium</h3>
              <span class="inline-block mb-6 text-4xl md:text-6xl font-medium text-transparent bg-clip-text bg-gradient-to-r from-gray-100 via-gray-200 to-gray-300">$99,99</span>
              <ul class="mb-8 text-left text-lg">
                <li class="mb-2 flex items-center">
                  <svg class="mr-2 w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  <p class="text-neutral-300">Complete documentation</p>
                </li>
                <li class="mb-2 flex items-center">
                  <svg class="mr-2 w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  <p class="text-neutral-300">Working materials in Figma</p>
                </li>
                <li class="mb-2 flex items-center">
                  <svg class="mr-2 w-6 h-6 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                  </svg>
                  <p class="text-neutral-300">100GB cloud storage</p>
                </li>
              </ul>
              <a class="inline-flex items-center justify-center w-full px-6 py-3 text-sm font-semibold text-white hover:text-white border border-neutral-700 hover:border-white hover:border-opacity-50 rounded-full transition-all duration-200" href="#">Get Started</a>
            </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-36 bg-blueGray-50 overflow-hidden">
  <img class="absolute top-1/2 right-0 transform -translate-y-1/2" src="flaro-assets/images/pricing/gradient.svg" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="flex flex-wrap lg:items-center -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md">
          <h2 class="mb-16 lg:mb-52 text-6xl md:text-8xl xl:text-10xl font-bold font-heading tracking-px-n leading-none">Pick a plan</h2>
          <h3 class="mb-6 text-lg text-gray-900 font-semibold leading-normal">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elemen.</h3>
          <p class="font-medium text-gray-600 leading-relaxed">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Volut pat tempor condimentum commodo tincidunt sit dictumst. Eu placerat arcu at sem vitae eros, purus non, eu. Adipiscing vitae amet nunc volutpat sit. Enim eu integer duis arcu.</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="md:max-w-md mx-auto overflow-hidden rounded-3xl shadow-8xl">
          <div class="p-9">
            <span class="mb-7 inline-block text-sm text-gray-500 font-semibold uppercase tracking-px">Features included:</span>
            <ul>
              <li class="mb-4 flex items-center">
                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <p class="font-semibold leading-normal">3 Team Members</p>
              </li>
              <li class="mb-4 flex items-center">
                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <p class="font-semibold leading-normal">1200+ UI Blocks</p>
              </li>
              <li class="mb-4 flex items-center">
                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <p class="font-semibold leading-normal">10 GB Cloud Storage</p>
              </li>
              <li class="mb-4 flex items-center">
                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <p class="font-semibold leading-normal">Individual Email Account</p>
              </li>
              <li class="flex items-center">
                <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M7.5 10L9.16667 11.6667L12.5 8.33333M17.5 10C17.5 14.1421 14.1421 17.5 10 17.5C5.85786 17.5 2.5 14.1421 2.5 10C2.5 5.85786 5.85786 2.5 10 2.5C14.1421 2.5 17.5 5.85786 17.5 10Z" stroke="#4F46E5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <p class="font-semibold leading-normal">Premium Support</p>
              </li>
            </ul>
          </div>
          <div class="p-9 bg-white">
            <div class="flex flex-wrap -m-8">
              <div class="w-full sm:w-1/2 p-8">
                <span class="mb-2 inline-block text-sm text-gray-500 font-semibold uppercase tracking-px">Pro Package</span>
                <p class="text-gray-900 font-semibold leading-normal">Best for Startups &amp; Small Businesses</p>
              </div>
              <div class="w-full sm:w-1/2 p-8">
                <div class="sm:max-w-max ml-auto">
                  <p class="font-bold">
                    <span class="text-5xl leading-tight tracking-px-n">$49</span>
                    <span class="text-lg text-gray-500 leading-snug tracking-px-n">/mo</span>
                  </p>
                  <p class="font-medium text-gray-500 leading-relaxed">Billed anually</p>
                </div>
              </div>
            </div>
            <div class="mt-9">
              <button class="py-4 px-5 w-full text-white font-semibold rounded-xl focus:ring focus:ring-indigo-300 bg-indigo-600 hover:bg-indigo-700 transition ease-in-out duration-200" type="button">Start 14 days free trial</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-28 pb-32 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-xl"><span class="inline-block mb-3 text-gray-600 text-base" >Flexible Pricing Plan</span>
      <h2 class="mb-16 font-heading font-bold text-6xl sm:text-7xl text-gray-900" >Everything you need to launch a website</h2>
    </div>
    <div class="flex flex-wrap">
      <div class="w-full md:w-1/3">
        <div class="pt-8 px-11 xl:px-20 pb-10 bg-transparent border-b md:border-b-0 md:border-r border-gray-200 rounded-10">
          <h3 class="mb-0.5 font-heading font-semibold text-lg text-gray-900" >Basic</h3>
          <p class="mb-5 text-gray-600 text-sm" >Best for freelancers</p>
          <div class="mb-9 flex"><span class="mr-1 mt-0.5 font-heading font-semibold text-lg text-gray-900" >$</span><span class="font-heading font-semibold text-6xl sm:text-7xl text-gray-900" >29</span><span class="font-heading font-semibold self-end" >/ m</span></div>
          <div class="p-1">
            <button class="group relative mb-9 p-px w-full font-heading font-semibold text-xs text-gray-900 bg-gradient-green uppercase tracking-px overflow-hidden rounded-md">
              <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-green transition ease-in-out duration-500"></div>
              <div class="p-4 bg-gray-50 overflow-hidden rounded-md">
                <p class="relative z-10" >Join now</p>
              </div>
            </button>
          </div>
          <ul>
            <li class="flex items-center font-heading mb-3 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >100GB Cloud Storage</p>
            </li>
            <li class="flex items-center font-heading mb-3 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >10 Email Connection</p>
            </li>
            <li class="flex items-center font-heading font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >Daily Analytics</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/3">
        <div class="pt-8 px-11 xl:px-20 pb-10 bg-transparent rounded-10">
          <h3 class="mb-0.5 font-heading font-semibold text-lg text-gray-900" >Premium</h3>
          <p class="mb-5 text-gray-600 text-sm" >Best for small agency </p>
          <div class="mb-9 flex"><span class="mr-1 mt-0.5 font-heading font-semibold text-lg text-gray-900" >$</span><span class="font-heading font-semibold text-6xl sm:text-7xl text-gray-900" >99</span><span class="font-heading font-semibold self-end" >/ m</span></div>
          <div class="p-1">
            <button class="group relative mb-9 p-px w-full font-heading font-semibold text-xs text-gray-900 bg-gradient-green uppercase tracking-px overflow-hidden rounded-md">
              <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-green transition ease-in-out duration-500"></div>
              <div class="p-4 bg-gray-50 overflow-hidden rounded-md">
                <p class="relative z-10" >Join now</p>
              </div>
            </button>
          </div>
          <ul>
            <li class="flex items-center font-heading mb-3 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >500GB Cloud Storage</p>
            </li>
            <li class="flex items-center font-heading mb-3 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >50 Email Connection</p>
            </li>
            <li class="flex items-center font-heading mb-3 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >Daily Analytics</p>
            </li>
            <li class="flex items-center font-heading font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >Premium Support</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/3">
        <div class="relative pt-8 px-11 pb-10 bg-white rounded-10 shadow-8xl">
          <p class="absolute right-2 top-2 font-heading px-2.5 py-1 text-xs max-w-max bg-gray-100 uppercase tracking-px rounded-full text-gray-900" >Popular choice</p>
          <h3 class="mb-0.5 font-heading font-semibold text-lg text-gray-900" >Enterprise</h3>
          <p class="mb-5 text-gray-600 text-sm" >Best for large agency</p>
          <div class="mb-9 flex"><span class="mr-1 mt-0.5 font-heading font-semibold text-lg text-gray-900" >$</span><span class="font-heading font-semibold text-6xl sm:text-7xl text-gray-900" >199</span><span class="font-heading font-semibold self-end" >/ m</span></div>
          <div class="group relative mb-9">
            <div class="absolute top-0 left-0 w-full h-full bg-gradient-green opacity-0 group-hover:opacity-50 p-1 rounded-lg transition ease-out duration-300"></div>
            <button class="p-1 w-full font-heading font-semibold text-xs text-gray-900 uppercase tracking-px overflow-hidden rounded-md">
              <div class="relative z-10 p-4 bg-gradient-green overflow-hidden rounded-md">
                <p >Join now</p>
              </div>
            </button>
          </div>
          <ul>
            <li class="flex items-center font-heading mb-3 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >2TB Cloud Storage</p>
            </li>
            <li class="flex items-center font-heading mb-3 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >Unlimited Email Connection</p>
            </li>
            <li class="flex items-center font-heading mb-3 font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >Daily Analytics</p>
            </li>
            <li class="flex items-center font-heading font-medium text-base text-gray-900">
              <svg class="mr-2.5" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M4.58301 11.9167L8.24967 15.5834L17.4163 6.41669" stroke="#A1A1AA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >Premium Support</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24">
  <div class="container mx-auto px-4">
    <h1 class="text-center text-5xl lg:text-6xl font-bold font-heading mb-6">Pricing</h1>
    <p class="text-gray-600 text-lg text-center mb-10 max-w-lg mx-auto">Simple pricing that fits for everyone for the price of a cup of coffee.Start for free, no credit card required.</p>
    <div class="flex flex-wrap justify-center gap-4 mb-16">
      <div class="flex flex-wrap items-center gap-4">
        <p class="text-lg font-bold font-heading">Monthly</p>
        <div class="p-1 w-14 h-8 bg-orange-500 rounded-full">
          <div class="relative">
            <input class="custom-switch-1 opacity-0 absolute z-10 h-8 w-14 top-0 left-0" type="checkbox">
            <div class="absolute left-0 transform w-6 h-6 bg-white rounded-full"></div>
          </div>
        </div>
        <p class="text-lg font-bold font-heading">Annually</p>
      </div>
      <div class="inline-block px-4 py-2 rounded-full bg-orange-50 text-orange-700">SAVE 15% with annual billing</div>
    </div>
    <div class="flex flex-wrap mb-24 -mx-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="border border-gray-200 rounded-3xl px-8 lg:px-10 pb-14 pt-10 h-full">
          <h2 class="text-3xl font-bold font-heading mb-6">Free</h2>
          <div class="flex items-center gap-4 flex-wrap mb-6">
            <h2 class="text-6xl font-bold font-heading">$0</h2>
            <p class="text-xl font-medium">per month</p>
          </div>
          <a class="h-14 inline-flex items-center justify-center w-full text-center py-4 px-6 rounded-full border border-gray-200 shadow text-sm font-semibold hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200 mb-10" href="#">Start 14-day free trial</a>
          <h2 class="text-lg font-bold font-heading mb-4">What you’ll get</h2>
          <ul class="flex flex-col gap-4">
            <li class="flex gap-4">
              <div class="w-6 h-6">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47692 6.47692 2 12 2C17.5231 2 22 6.47692 22 12C22 17.5231 17.5231 22 12 22C6.47692 22 2 17.5231 2 12ZM15.7026 10.1395C15.7641 10.0575 15.8086 9.96402 15.8335 9.86456C15.8584 9.76511 15.8632 9.66168 15.8475 9.56036C15.8319 9.45904 15.7962 9.36187 15.7424 9.27456C15.6887 9.18725 15.618 9.11157 15.5346 9.05195C15.4512 8.99233 15.3567 8.94999 15.2567 8.92741C15.1567 8.90484 15.0532 8.90248 14.9523 8.92047C14.8514 8.93847 14.755 8.97646 14.669 9.03222C14.583 9.08797 14.5089 9.16036 14.4513 9.24513L11.1323 13.8913L9.46667 12.2256C9.32085 12.0898 9.12798 12.0158 8.9287 12.0193C8.72941 12.0228 8.53927 12.1036 8.39834 12.2445C8.2574 12.3854 8.17667 12.5756 8.17315 12.7748C8.16964 12.9741 8.24361 13.167 8.37949 13.3128L10.6872 15.6205C10.7661 15.6994 10.8613 15.7602 10.9661 15.7986C11.071 15.837 11.1829 15.8522 11.2941 15.843C11.4054 15.8338 11.5133 15.8006 11.6104 15.7455C11.7075 15.6904 11.7914 15.6149 11.8564 15.5241L15.7026 10.1395Z" fill="#FF7100"></path>
                </svg>
              </div>
              <span>Join public room</span>
            </li>
            <li class="flex gap-4">
              <div class="w-6 h-6">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47692 6.47692 2 12 2C17.5231 2 22 6.47692 22 12C22 17.5231 17.5231 22 12 22C6.47692 22 2 17.5231 2 12ZM15.7026 10.1395C15.7641 10.0575 15.8086 9.96402 15.8335 9.86456C15.8584 9.76511 15.8632 9.66168 15.8475 9.56036C15.8319 9.45904 15.7962 9.36187 15.7424 9.27456C15.6887 9.18725 15.618 9.11157 15.5346 9.05195C15.4512 8.99233 15.3567 8.94999 15.2567 8.92741C15.1567 8.90484 15.0532 8.90248 14.9523 8.92047C14.8514 8.93847 14.755 8.97646 14.669 9.03222C14.583 9.08797 14.5089 9.16036 14.4513 9.24513L11.1323 13.8913L9.46667 12.2256C9.32085 12.0898 9.12798 12.0158 8.9287 12.0193C8.72941 12.0228 8.53927 12.1036 8.39834 12.2445C8.2574 12.3854 8.17667 12.5756 8.17315 12.7748C8.16964 12.9741 8.24361 13.167 8.37949 13.3128L10.6872 15.6205C10.7661 15.6994 10.8613 15.7602 10.9661 15.7986C11.071 15.837 11.1829 15.8522 11.2941 15.843C11.4054 15.8338 11.5133 15.8006 11.6104 15.7455C11.7075 15.6904 11.7914 15.6149 11.8564 15.5241L15.7026 10.1395Z" fill="#FF7100"></path>
                </svg>
              </div>
              <span>Host events and virtual study club</span>
            </li>
            <li class="flex gap-4">
              <div class="w-6 h-6">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47692 6.47692 2 12 2C17.5231 2 22 6.47692 22 12C22 17.5231 17.5231 22 12 22C6.47692 22 2 17.5231 2 12ZM15.7026 10.1395C15.7641 10.0575 15.8086 9.96402 15.8335 9.86456C15.8584 9.76511 15.8632 9.66168 15.8475 9.56036C15.8319 9.45904 15.7962 9.36187 15.7424 9.27456C15.6887 9.18725 15.618 9.11157 15.5346 9.05195C15.4512 8.99233 15.3567 8.94999 15.2567 8.92741C15.1567 8.90484 15.0532 8.90248 14.9523 8.92047C14.8514 8.93847 14.755 8.97646 14.669 9.03222C14.583 9.08797 14.5089 9.16036 14.4513 9.24513L11.1323 13.8913L9.46667 12.2256C9.32085 12.0898 9.12798 12.0158 8.9287 12.0193C8.72941 12.0228 8.53927 12.1036 8.39834 12.2445C8.2574 12.3854 8.17667 12.5756 8.17315 12.7748C8.16964 12.9741 8.24361 13.167 8.37949 13.3128L10.6872 15.6205C10.7661 15.6994 10.8613 15.7602 10.9661 15.7986C11.071 15.837 11.1829 15.8522 11.2941 15.843C11.4054 15.8338 11.5133 15.8006 11.6104 15.7455C11.7075 15.6904 11.7914 15.6149 11.8564 15.5241L15.7026 10.1395Z" fill="#FF7100"></path>
                </svg>
              </div>
              <span>Invite up to 100 people to learn together</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-orange-500 rounded-3xl px-8 lg:px-10 pb-14 pt-10 h-full">
          <h2 class="text-white text-3xl font-bold font-heading mb-6">Infinity</h2>
          <div class="flex items-center gap-4 flex-wrap mb-6">
            <h2 class="text-white text-6xl font-bold font-heading">$4</h2>
            <p class="text-white text-xl font-medium">per month</p>
          </div>
          <a class="w-full text-center h-14 py-4 px-6 rounded-full bg-white border border-gray-200 shadow hover:bg-gray-50 focus:ring focus:ring-orange-200 transition duration-200 mb-8 flex items-center justify-center gap-2" href="#">
            <span class="text-sm font-semibold ">Sign up today</span>
            <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
              <path d="M5.50002 10H15.9167M15.9167 10L10.9167 5M15.9167 10L10.9167 15" stroke="#282828" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </a>
          <h2 class="text-white text-lg font-bold font-heading mb-4">What you’ll get</h2>
          <ul class="flex flex-col gap-4">
            <li class="flex gap-4">
              <div class="w-6 h-6">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47692 6.47692 2 12 2C17.5231 2 22 6.47692 22 12C22 17.5231 17.5231 22 12 22C6.47692 22 2 17.5231 2 12ZM15.7026 10.1395C15.7641 10.0575 15.8086 9.96402 15.8335 9.86456C15.8584 9.76511 15.8632 9.66168 15.8475 9.56036C15.8319 9.45904 15.7962 9.36187 15.7424 9.27456C15.6887 9.18725 15.618 9.11157 15.5346 9.05195C15.4512 8.99233 15.3567 8.94999 15.2567 8.92741C15.1567 8.90484 15.0532 8.90248 14.9523 8.92047C14.8514 8.93847 14.755 8.97646 14.669 9.03222C14.583 9.08797 14.5089 9.16036 14.4513 9.24513L11.1323 13.8913L9.46667 12.2256C9.32085 12.0898 9.12798 12.0158 8.9287 12.0193C8.72941 12.0228 8.53927 12.1036 8.39834 12.2445C8.2574 12.3854 8.17667 12.5756 8.17315 12.7748C8.16964 12.9741 8.24361 13.167 8.37949 13.3128L10.6872 15.6205C10.7661 15.6994 10.8613 15.7602 10.9661 15.7986C11.071 15.837 11.1829 15.8522 11.2941 15.843C11.4054 15.8338 11.5133 15.8006 11.6104 15.7455C11.7075 15.6904 11.7914 15.6149 11.8564 15.5241L15.7026 10.1395Z" fill="white"></path>
                </svg>
              </div>
              <span class="text-white">Create unlimited room</span>
            </li>
            <li class="flex gap-4">
              <div class="w-6 h-6">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47692 6.47692 2 12 2C17.5231 2 22 6.47692 22 12C22 17.5231 17.5231 22 12 22C6.47692 22 2 17.5231 2 12ZM15.7026 10.1395C15.7641 10.0575 15.8086 9.96402 15.8335 9.86456C15.8584 9.76511 15.8632 9.66168 15.8475 9.56036C15.8319 9.45904 15.7962 9.36187 15.7424 9.27456C15.6887 9.18725 15.618 9.11157 15.5346 9.05195C15.4512 8.99233 15.3567 8.94999 15.2567 8.92741C15.1567 8.90484 15.0532 8.90248 14.9523 8.92047C14.8514 8.93847 14.755 8.97646 14.669 9.03222C14.583 9.08797 14.5089 9.16036 14.4513 9.24513L11.1323 13.8913L9.46667 12.2256C9.32085 12.0898 9.12798 12.0158 8.9287 12.0193C8.72941 12.0228 8.53927 12.1036 8.39834 12.2445C8.2574 12.3854 8.17667 12.5756 8.17315 12.7748C8.16964 12.9741 8.24361 13.167 8.37949 13.3128L10.6872 15.6205C10.7661 15.6994 10.8613 15.7602 10.9661 15.7986C11.071 15.837 11.1829 15.8522 11.2941 15.843C11.4054 15.8338 11.5133 15.8006 11.6104 15.7455C11.7075 15.6904 11.7914 15.6149 11.8564 15.5241L15.7026 10.1395Z" fill="white"></path>
                </svg>
              </div>
              <span class="text-white">Host events and virtual study club</span>
            </li>
            <li class="flex gap-4">
              <div class="w-6 h-6">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.47692 6.47692 2 12 2C17.5231 2 22 6.47692 22 12C22 17.5231 17.5231 22 12 22C6.47692 22 2 17.5231 2 12ZM15.7026 10.1395C15.7641 10.0575 15.8086 9.96402 15.8335 9.86456C15.8584 9.76511 15.8632 9.66168 15.8475 9.56036C15.8319 9.45904 15.7962 9.36187 15.7424 9.27456C15.6887 9.18725 15.618 9.11157 15.5346 9.05195C15.4512 8.99233 15.3567 8.94999 15.2567 8.92741C15.1567 8.90484 15.0532 8.90248 14.9523 8.92047C14.8514 8.93847 14.755 8.97646 14.669 9.03222C14.583 9.08797 14.5089 9.16036 14.4513 9.24513L11.1323 13.8913L9.46667 12.2256C9.32085 12.0898 9.12798 12.0158 8.9287 12.0193C8.72941 12.0228 8.53927 12.1036 8.39834 12.2445C8.2574 12.3854 8.17667 12.5756 8.17315 12.7748C8.16964 12.9741 8.24361 13.167 8.37949 13.3128L10.6872 15.6205C10.7661 15.6994 10.8613 15.7602 10.9661 15.7986C11.071 15.837 11.1829 15.8522 11.2941 15.843C11.4054 15.8338 11.5133 15.8006 11.6104 15.7455C11.7075 15.6904 11.7914 15.6149 11.8564 15.5241L15.7026 10.1395Z" fill="white"></path>
                </svg>
              </div>
              <span class="text-white">Invite up to 100 people to learn together</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <h2 class="text-4xl font-bold font-heading text-center mb-20">Pricing FAQs</h2>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <div class="py-12 border-b border-gray-100 h-full">
          <h2 class="text-xl font-bold font-heading mb-2">What payment options are there?</h2>
          <p class="text-gray-500">You can pay by credit card, PayPal, or Stripe.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="py-12 border-b border-gray-100 h-full">
          <h2 class="text-xl font-bold font-heading mb-2">Are there a free trial?</h2>
          <p class="text-gray-500">Yes! We offer 14-days of trial. Free and no credit card required.</p>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <div class="py-12 border-b border-gray-100 h-full">
          <h2 class="text-xl font-bold font-heading mb-2">What type of pricing plans does Solstice offer?</h2>
          <p class="text-gray-500">We only have one monthly subscription plan, costs no more than the price of a cup of coffee</p>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="py-12 border-b border-gray-100 h-full">
          <h2 class="text-xl font-bold font-heading mb-2">Why am I paying a monthly basis over a one-time payment?</h2>
          <p class="text-gray-500">This is our way of keeping your costs low while giving you access to our platform level quality and peace of mind.</p>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-24 lg:pb-36 bg-white overflow-hidden" x-data="{ pricing: '' }" x-init="pricing = $refs.switch1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -m-2 mb-8">
      <div class="w-auto p-2">
        <h3 class="text-3xl font-semibold" style="letter-spacing: -0.5px;">Save 10% when you choose Annual Billing:</h3>
      </div>
      <div class="w-auto p-2">
        <a class="flex p-2 border border-gray-300 rounded-full" href="#">
          <span x-ref="switch1" x-on:click.prevent="pricing = $refs.switch1.textContent" :class="{'bg-indigo-500 hover:bg-indigo-600 text-white': $refs.switch1.textContent == pricing}" class="inline-block px-6 py-2.5 font-medium tracking-tight bg-indigo-500 hover:bg-indigo-600 text-white rounded-full transition duration-500">Annual</span>
          <span x-ref="switch2" x-on:click.prevent="pricing = $refs.switch2.textContent" :class="{'bg-indigo-500 hover:bg-indigo-600 text-white': $refs.switch2.textContent == pricing}" class="px-6 py-2.5 font-medium tracking-tight rounded-full">Monthly</span>
        </a>
      </div>
    </div>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/2 p-8">
        <div class="p-10 bg-gray-200 rounded-t-lg">
          <h4 class="mb-2 text-xl font-semibold tracking-tight">Basic</h4>
          <p class="text-xl tracking-tight">Use and re-use tons of responsive sections to main &amp; create the perfect layout.</p>
        </div>
        <div class="relative px-10 bg-gray-500 rounded-b-lg">
          <div class="flex flex-wrap justify-between items-center py-1">
            <div class="w-auto p-2">
              <h3 :class="{'block': $refs.switch1.textContent == pricing, 'hidden': $refs.switch1.textContent != pricing}" class="text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">$599/ann</h3>
              <h3 :class="{'block': $refs.switch2.textContent == pricing, 'hidden': $refs.switch2.textContent != pricing}" class="hidden text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">$49/mo</h3>
            </div>
            <div class="w-auto p-2">
              <p :class="{'block': $refs.switch1.textContent == pricing, 'hidden': $refs.switch1.textContent != pricing}" class="text-white font-medium tracking-tight">Billed Yearly</p>
              <p :class="{'block': $refs.switch2.textContent == pricing, 'hidden': $refs.switch2.textContent != pricing}" class="hidden text-white font-medium tracking-tight">Billed Monthly</p>
            </div>
          </div>
        </div>
        <div class="pt-4 px-10 pb-11 border-l border-r border-b rounded-b-lg">
          <div class="py-5 border-b border-gray-200">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-gray-600 tracking-tight">Users</p>
              </div>
              <div class="w-auto p-2">
                <p class="font-medium tracking-tight">20</p>
              </div>
            </div>
          </div>
          <div class="py-5 border-b border-gray-200">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-gray-600 tracking-tight">Bandwidth</p>
              </div>
              <div class="w-auto p-2">
                <p class="font-medium tracking-tight">8GB Per User</p>
              </div>
            </div>
          </div>
          <div class="py-5 border-b border-gray-200">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-gray-600 tracking-tight">Requests</p>
              </div>
              <div class="w-auto p-2">
                <p class="font-medium tracking-tight">20,000 Per Month</p>
              </div>
            </div>
          </div>
          <div class="py-5 border-b border-gray-200">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-gray-600 tracking-tight">API Calls</p>
              </div>
              <div class="w-auto p-2">
                <p class="font-medium tracking-tight">50k</p>
              </div>
            </div>
          </div>
          <div class="mb-8 py-5 border-b border-gray-200">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-gray-600 tracking-tight">Unique Features</p>
              </div>
              <div class="w-auto p-2">
                <p class="font-medium tracking-tight">Unlimited</p>
              </div>
            </div>
          </div>
          <a class="inline-block px-5 py-4 w-full text-center hover:text-white font-semibold tracking-tight bg-white hover:bg-gray-700 border border-gray-700 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-8">
        <div class="p-10 bg-gray-600 rounded-t-lg">
          <h4 class="mb-2 text-xl text-white font-semibold tracking-tight">Pro</h4>
          <p class="text-xl text-white tracking-tight">Use and re-use tons of responsive sections to main &amp; create the perfect layout.</p>
        </div>
        <div class="relative px-10 rounded-b-lg" style="background: url('basko-assets/images/gradient.png'); background-repeat: no-repeat; background-size: cover;">
          <div class="flex flex-wrap justify-between items-center py-1">
            <div class="w-auto p-2">
              <h3 :class="{'block': $refs.switch1.textContent == pricing, 'hidden': $refs.switch1.textContent != pricing}" class="text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">$1199/ann</h3>
              <h3 :class="{'block': $refs.switch2.textContent == pricing, 'hidden': $refs.switch2.textContent != pricing}" class="hidden text-3xl text-white font-semibold" style="letter-spacing: -0.5px;">$99/mo</h3>
            </div>
            <div class="w-auto p-2">
              <p :class="{'block': $refs.switch1.textContent == pricing, 'hidden': $refs.switch1.textContent != pricing}" class="text-white font-medium tracking-tight">Billed Yearly</p>
              <p :class="{'block': $refs.switch2.textContent == pricing, 'hidden': $refs.switch2.textContent != pricing}" class="hidden text-white font-medium tracking-tight">Billed Monthly</p>
            </div>
          </div>
        </div>
        <div class="pt-4 px-10 pb-11 border-l border-r border-b rounded-b-lg">
          <div class="py-5 border-b border-gray-200">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-gray-600 tracking-tight">Users</p>
              </div>
              <div class="w-auto p-2">
                <p class="font-medium tracking-tight">20</p>
              </div>
            </div>
          </div>
          <div class="py-5 border-b border-gray-200">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-gray-600 tracking-tight">Bandwidth</p>
              </div>
              <div class="w-auto p-2">
                <p class="font-medium tracking-tight">8GB Per User</p>
              </div>
            </div>
          </div>
          <div class="py-5 border-b border-gray-200">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-gray-600 tracking-tight">Requests</p>
              </div>
              <div class="w-auto p-2">
                <p class="font-medium tracking-tight">20,000 Per Month</p>
              </div>
            </div>
          </div>
          <div class="py-5 border-b border-gray-200">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-gray-600 tracking-tight">API Calls</p>
              </div>
              <div class="w-auto p-2">
                <p class="font-medium tracking-tight">50k</p>
              </div>
            </div>
          </div>
          <div class="mb-8 py-5 border-b border-gray-200">
            <div class="flex flex-wrap items-center justify-between -m-2">
              <div class="w-auto p-2">
                <p class="text-gray-600 tracking-tight">Unique Features</p>
              </div>
              <div class="w-auto p-2">
                <p class="font-medium tracking-tight">Unlimited</p>
              </div>
            </div>
          </div>
          <a class="inline-block px-5 py-4 w-full text-white text-center font-semibold tracking-tight bg-indigo-500 hover:bg-indigo-600 rounded-lg focus:ring-4 focus:ring-indigo-300 transition duration-200" href="#">Try 14 Days Free Trial</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-10 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="relative py-16 px-8 border border-gray-100 rounded-3xl">
      <div class="absolute top-1/2 left-1/2 min-w-max transform -translate-x-1/2 -translate-y-1/2">
        <div class="absolute bg-gradient-radial-white w-full h-full"></div>
        <img src="zanrly-assets/images/pattern-gray.png" alt="">
      </div>
      <div class="relative max-w-7xl mx-auto">
        <div class="flex flex-wrap -m-4 mb-14">
          <div class="w-full md:w-1/2 p-4">
            <div class="py-16 px-8 text-center h-full bg-white border border-gray-100 rounded-3xl">
              <div class="flex flex-col justify-between h-full">
                <div class="flex-initial mb-10">
                  <span class="inline-block mb-6 text-sm text-blue-500 font-bold uppercase tracking-widest">Standard</span>
                  <h2 class="font-heading text-5xl md:text-7xl text-gray-900 font-black tracking-tight">
                    <span>$32</span>
                    <span class="text-xl">USD</span>
                  </h2>
                  <p class="text-xl text-gray-400 font-bold">per month, paid annually or $20 paid monthly</p>
                </div>
                <div class="flex-initial">
                  <div class="flex flex-wrap justify-center -m-2">
                    <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Start 14 days free trial</a></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/2 p-4">
            <div class="py-16 px-8 text-center h-full bg-white border border-gray-100 rounded-3xl">
              <div class="flex flex-col justify-between h-full">
                <div class="flex-initial mb-10">
                  <span class="inline-block mb-6 text-sm text-blue-500 font-bold uppercase tracking-widest">Standard</span>
                  <h2 class="font-heading text-5xl md:text-7xl text-gray-900 font-black tracking-tight">
                    <span>$32</span>
                    <span class="text-xl">USD</span>
                  </h2>
                  <p class="text-xl text-gray-400 font-bold">per month, paid annually or $20 paid monthly</p>
                </div>
                <div class="flex-initial">
                  <div class="flex flex-wrap justify-center -m-2">
                    <div class="w-full md:w-auto p-2"><a class="block w-full px-8 py-3.5 text-lg text-center text-white font-bold bg-blue-500 hover:bg-blue-600 focus:ring-4 focus:ring-blue-200 rounded-full" href="#">Start 14 days free trial</a></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <p class="text-2xl text-gray-900 font-bold text-center max-w-4xl mx-auto">No credit card required. No trial period. Full design and CMS control. Start building websites today.</p>
      </div>
    </div>
  </div>
</section>

<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="relative py-20" x-data="{ pricing: '' }" x-init="pricing = $refs.pricing1.textContent">
  <img class="hidden lg:block absolute top-0 left-0 mt-64" src="zeus-assets/icons/dots/blue-dot-left-bars.svg" alt="">
  <img class="hidden lg:block absolute top-0 right-0 mt-40" src="zeus-assets/icons/dots/yellow-dot-right-shield.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl mx-auto mb-20 text-center">
      <span class="text-xs text-blue-400 font-semibold">What's new at Shuffle</span>
      <h2 class="mt-8 mb-10 text-4xl font-semibold font-heading">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      <p class="mb-16 text-xl text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      <div class="max-w-max mx-auto p-1 bg-gray-50 rounded">
        <button x-ref="pricing1" class="px-10 py-4 text-sm font-semibold leading-normal bg-white rounded" :class="{'text-gray-900 bg-white': $refs.pricing1.textContent == pricing, 'text-gray-500 hover:text-gray-900': $refs.pricing1.textContent != pricing}" x-on:click="pricing = $refs.pricing1.textContent">Monthly</button>
        <button x-ref="pricing2" class="px-10 py-4 text-sm font-semibold leading-normal text-gray-500 hover:text-gray-900" :class="{'text-gray-900 bg-white': $refs.pricing2.textContent == pricing, 'text-gray-500 hover:text-gray-900': $refs.pricing2.textContent != pricing}" x-on:click="pricing = $refs.pricing2.textContent">Yearly</button>
      </div>
    </div>
    <div class="flex flex-wrap items-center -mx-3">
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="pt-12 pb-8 px-8 border rounded-xl lg:text-center">
          <h3 class="mb-6 font-medium text-gray-500">Starter</h3>
          <div class="flex lg:justify-center mb-8">
            <span class="self-start inline-block mr-1 text-xl font-semibold text-gray-500">$</span>
            <p :class="{'inline-block': $refs.pricing1.textContent == pricing, 'hidden': $refs.pricing1.textContent != pricing }" class="self-end text-5xl font-semibold font-heading">34,99</p>
            <p :class="{'inline-block': $refs.pricing2.textContent == pricing, 'hidden': $refs.pricing2.textContent != pricing }" class="hidden self-end text-5xl font-semibold font-heading">64,99</p>
          </div>
          <ul class="mb-6 text-left">
            <li class="flex items-center py-4 border-b">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium">Complete documentation</p>
            </li>
            <li class="flex items-center py-4 border-b">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium">Working materials in Figma</p>
            </li>
            <li class="flex items-center py-4 border-b">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium">100GB cloud storage</p>
            </li>
            <li class="flex items-center py-4 mb-8">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium">500 team members</p>
            </li>
          </ul>
          <a class="block py-4 text-sm text-center text-white font-medium leading-normal bg-red-400 hover:bg-red-300 rounded transition duration-200" href="#">Try it now</a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="pt-12 pb-8 px-8 bg-red-400 rounded-xl lg:text-center">
          <h3 class="mb-6 font-medium text-red-300">Pro</h3>
          <div class="flex lg:justify-center mb-8">
            <span :class="{'inline-block': $refs.pricing1.textContent == pricing }" class="self-start inline-block mr-1 text-xl font-semibold text-red-300">$</span>
            <p :class="{'inline-block': $refs.pricing1.textContent == pricing, 'hidden': $refs.pricing1.textContent != pricing }" class="self-end text-5xl font-semibold text-white font-heading">65,99</p>
            <p :class="{'inline-block': $refs.pricing2.textContent == pricing, 'hidden': $refs.pricing2.textContent != pricing }" class="hidden self-end text-5xl font-semibold text-white font-heading">165,99</p>
          </div>
          <ul class="mb-6 text-left">
            <li class="flex items-center py-4 border-b border-red-400">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium text-white">Complete documentation</p>
            </li>
            <li class="flex items-center py-4 border-b border-red-400">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium text-white">Working materials in Figma</p>
            </li>
            <li class="flex items-center py-4 border-b border-red-400">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center py-4 border-b border-red-400">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium text-white">500 team members</p>
            </li>
            <li class="flex items-center py-4 mb-8">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium text-white">Premium support</p>
            </li>
          </ul>
          <a class="inline-block py-4 w-full text-sm text-center font-medium leading-normal text-white rounded bg-blue-400 hover:bg-blue-500 transition duration-200" href="#">Try it now</a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="pt-12 pb-8 px-8 border rounded-xl lg:text-center">
          <h3 class="mb-6 font-medium text-gray-500">Premium</h3>
          <div class="flex lg:justify-center mb-8">
            <span class="self-start inline-block mr-1 text-xl font-semibold text-gray-500">$</span>
            <p :class="{'inline-block': $refs.pricing1.textContent == pricing, 'hidden': $refs.pricing1.textContent != pricing }" class="self-end text-5xl font-semibold font-heading">99,99</p>
            <p :class="{'inline-block': $refs.pricing2.textContent == pricing, 'hidden': $refs.pricing2.textContent != pricing }" class="hidden self-end text-5xl font-semibold font-heading">199,99</p>
          </div>
          <ul class="mb-6 text-left -mx-8">
            <li class="flex items-center py-4 pl-8 border-b">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium">Complete documentation</p>
            </li>
            <li class="flex items-center py-4 pl-8 border-b">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium">Working materials in Figma</p>
            </li>
            <li class="flex items-center py-4 pl-8 border-b">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium">100GB cloud storage</p>
            </li>
            <li class="flex items-center py-4 mb-8 pl-8">
              <svg class="mr-2" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67 0H14.34C17.73 0 20 2.38 20 5.92V14.091C20 17.62 17.73 20 14.34 20H5.67C2.28 20 0 17.62 0 14.091V5.92C0 2.38 2.28 0 5.67 0ZM9.43 12.99L14.18 8.24C14.52 7.9 14.52 7.35 14.18 7C13.84 6.66 13.28 6.66 12.94 7L8.81 11.13L7.06 9.38C6.72 9.04 6.16 9.04 5.82 9.38C5.48 9.72 5.48 10.27 5.82 10.62L8.2 12.99C8.37 13.16 8.59 13.24 8.81 13.24C9.04 13.24 9.26 13.16 9.43 12.99Z" fill="#45C1FF"></path>
              </svg>
              <p class="font-medium">500 team members</p>
            </li>
          </ul>
          <a class="inline-block py-4 w-full text-sm text-center font-medium leading-normal text-white rounded bg-red-400 hover:bg-red-300 transition duration-200" href="#">Try it now</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-20 pb-24 2xl:py-40 bg-gray-800">
  <div class="container mx-auto px-4">
    <div class="mb-16 md:mb-24 text-center">
      <h2 class="mb-8 md:mb-14 text-5xl lg:text-6xl 2xl:text-7xl text-white font-bold font-heading">Choose a plan</h2>
      <p class="text-lg text-gray-200">The quick brown fox jumps over the lazy dog.</p>
    </div>
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-3">
        <div class="w-full lg:w-1/3 px-3 mb-8 lg:mb-0">
          <div class="px-12 py-16 bg-gray-500 rounded-3xl">
            <div class="pb-8 mb-14 border-b border-gray-400">
              <div class="flex justify-between items-center px-3">
                <h3 class="text-4xl text-white font-bold font-heading">Free</h3>
                <p class="text-lg text-white font-bold">$0,00</p>
              </div>
            </div>
            <ul class="text-lg text-white mb-16">
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>Complete files</span>
              </li>
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>10GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <span class="mr-6">
                  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>5 team members</span>
              </li>
            </ul>
            <div class="text-center"><a class="inline-block px-10 py-4 border border-gray-200 hover:border-gray-100 rounded-full font-bold text-white" href="#">Try free</a></div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-3 mb-8 lg:mb-0">
          <div class="px-12 py-16 bg-blue-500 rounded-3xl">
            <div class="pb-8 mb-14 border-b border-blueGray-300">
              <div class="flex justify-between items-center px-3">
                <h3 class="text-4xl text-white font-bold font-heading">Team</h3>
                <p class="text-lg text-white font-bold">$9,99</p>
              </div>
            </div>
            <ul class="text-lg text-white mb-16">
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>Complete files</span>
              </li>
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>100GB cloud storage</span>
              </li>
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>20 team members</span>
              </li>
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>Unlimited anonymous board editors</span>
              </li>
              <li class="flex items-center">
                <span class="mr-6">
                  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>10GB cloud storage</span>
              </li>
            </ul>
            <div class="text-center"><a class="inline-block px-10 py-4 border border-blueGray-300 hover:border-blueGray-100 rounded-full font-bold text-white" href="#">Buy now</a></div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-3">
          <div class="px-12 py-16 bg-gray-500 rounded-3xl">
            <div class="pb-8 mb-14 border-b border-gray-400">
              <div class="flex justify-between items-center px-3">
                <h3 class="text-4xl text-white font-bold font-heading">Premium</h3>
                <p class="text-lg text-white font-bold">$29,99</p>
              </div>
            </div>
            <ul class="text-lg text-white mb-16">
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>Complete files</span>
              </li>
              <li class="flex items-center mb-8">
                <span class="mr-6">
                  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>20GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <span class="mr-6">
                  <svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M6.81671 15.0418L0 8.2251L0.90027 7.32483L6.81671 13.2413L19.0997 0.958252L20 1.85852L6.81671 15.0418Z" fill="white"></path>
                  </svg>
                </span>
                <span>200+ team members</span>
              </li>
            </ul>
            <div class="text-center"><a class="inline-block px-10 py-4 border border-gray-200 hover:border-gray-100 rounded-full font-bold text-white" href="#">Buy now</a></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="pt-32 pb-40 overflow-hidden" x-data="{ pricing: '' }" x-init="pricing = $refs.pricing1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex items-center mb-24">
      <span class="font-heading text-xl">05</span>
      <div class="mx-4 rounded-full bg-gray-200 h-1 w-1"></div>
      <span class="font-heading text-xl">Pricing</span>
    </div>
    <div class="max-w-4xl mx-auto text-center mb-24">
      <h1 class="max-w-3xl mx-auto font-heading text-4xl sm:text-6xl xl:text-7xl mb-18">Choose the plan that’s right for you</h1>
      <div class="inline-flex p-2 items-center border border-gray-200 rounded-full">
        <button :class="{'text-gray-500 hover:text-gray-600 sm:px-10': pricing != $refs.pricing1.textContent, 'bg-white py-2 sm:px-8 shadow': pricing == $refs.pricing1.textContent}" class="inline-flex items-center px-4 bg-white py-2 sm:px-8 shadow rounded-full" x-on:click="pricing = $refs.pricing1.textContent">
            <div :class="{'hidden': pricing != $refs.pricing1.textContent}">
                <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="17" cy="17" r="15.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                  <path d="M22.8897 14.1751L21.825 13.1105C21.7901 13.0755 21.7487 13.0477 21.703 13.0287C21.6574 13.0098 21.6084 13 21.559 13C21.5095 13 21.4605 13.0098 21.4149 13.0287C21.3692 13.0477 21.3278 13.0755 21.2929 13.1105L15.8495 18.8567L12.7294 15.7354C12.6579 15.6639 12.5609 15.6238 12.4598 15.6238C12.3586 15.6238 12.2617 15.6639 12.1901 15.7354L11.1115 16.8148C11.04 16.8863 10.9999 16.9833 10.9999 17.0844C10.9999 17.1855 11.04 17.2825 11.1115 17.354L15.5491 21.8943C15.5901 21.9345 15.6398 21.9645 15.6944 21.9821C15.7491 21.9997 15.807 22.0043 15.8637 21.9956C15.9221 22.0057 15.9821 22.0018 16.0387 21.9842C16.0953 21.9666 16.1469 21.9358 16.1892 21.8943L22.8897 14.7076C22.9603 14.637 23 14.5412 23 14.4413C23 14.3415 22.9603 14.2457 22.8897 14.1751V14.1751Z" fill="#D6D7DA"></path>
                  <defs><rect width="12" height="9" fill="white" transform="translate(11 13)"></rect></defs>
                </svg>
            </div>
          <span x-ref="pricing1" class="ml-3 sm:ml-5 sm:text-lg font-medium">Annualy</span>
        </button>
        <button :class="{'text-gray-500 hover:text-gray-600 sm:px-10': pricing != $refs.pricing2.textContent, 'bg-white py-2 sm:px-8 shadow': pricing == $refs.pricing2.textContent}" class="inline-flex items-center px-4 text-gray-500 hover:text-gray-600 sm:px-10 rounded-full" x-on:click="pricing = $refs.pricing2.textContent">
            <div :class="{'hidden': pricing != $refs.pricing2.textContent}" class="hidden">
                <svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <circle cx="17" cy="17" r="15.75" fill="white" stroke="#DDDEE1" stroke-width="2.5"></circle>
                  <path d="M22.8897 14.1751L21.825 13.1105C21.7901 13.0755 21.7487 13.0477 21.703 13.0287C21.6574 13.0098 21.6084 13 21.559 13C21.5095 13 21.4605 13.0098 21.4149 13.0287C21.3692 13.0477 21.3278 13.0755 21.2929 13.1105L15.8495 18.8567L12.7294 15.7354C12.6579 15.6639 12.5609 15.6238 12.4598 15.6238C12.3586 15.6238 12.2617 15.6639 12.1901 15.7354L11.1115 16.8148C11.04 16.8863 10.9999 16.9833 10.9999 17.0844C10.9999 17.1855 11.04 17.2825 11.1115 17.354L15.5491 21.8943C15.5901 21.9345 15.6398 21.9645 15.6944 21.9821C15.7491 21.9997 15.807 22.0043 15.8637 21.9956C15.9221 22.0057 15.9821 22.0018 16.0387 21.9842C16.0953 21.9666 16.1469 21.9358 16.1892 21.8943L22.8897 14.7076C22.9603 14.637 23 14.5412 23 14.4413C23 14.3415 22.9603 14.2457 22.8897 14.1751V14.1751Z" fill="#D6D7DA"></path>
                  <defs><rect width="12" height="9" fill="white" transform="translate(11 13)"></rect></defs>
                </svg>
            </div>
            <span x-ref="pricing2" class="ml-3 sm:ml-5 sm:text-lg font-medium">Monthly</span>
          </button>
      </div>
    </div>
    <div class="flex flex-wrap justify-center -mx-4 3xl:-mx-6">
      <div class="w-full lg:w-1/2 3xl:w-auto px-4 3xl:px-6 mb-16 lg:mb-0">
        <div class="max-w-lg mx-auto pt-3 px-1 pb-10 bg-gray-100 rounded-md">
          <div class="pt-12 pb-16 mb-8 px-6 sm:px-14 bg-white rounded-md">
            <div class="flex items-center justify-between mb-6">
              <h5 class="font-heading text-xl">12 month</h5>
              <span class="text-sm text-gray-400">Membership</span>
            </div>
            <div class="flex mb-8">
              <span class="relative top-1 self-start text-2xl mr-3">£</span>
              <span class="text-4xl">17.49</span>
              <span class="self-end text-sm text-gray-400">/per mo</span>
            </div>
            <div class="flex flex-wrap -mx-2">
              <div class="w-full xl:w-1/2 px-2 mb-4 xl:mb-0">
                <div class="flex">
                  <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle>
                    <path d="M18.9172 11.914L18.1187 11.086C18.0926 11.0587 18.0615 11.0371 18.0272 11.0223C17.993 11.0076 17.9563 11 17.9192 11C17.8821 11 17.8454 11.0076 17.8111 11.0223C17.7769 11.0371 17.7458 11.0587 17.7196 11.086L13.6371 15.5552L11.297 13.1275C11.2434 13.0719 11.1706 13.0407 11.0948 13.0407C11.019 13.0407 10.9462 13.0719 10.8926 13.1275L10.0836 13.9671C10.03 14.0227 9.99988 14.0981 9.99988 14.1768C9.99988 14.2554 10.03 14.3308 10.0836 14.3865L13.4118 17.9178C13.4425 17.949 13.4798 17.9724 13.5208 17.9861C13.5618 17.9997 13.6052 18.0033 13.6478 17.9965C13.6916 18.0044 13.7366 18.0014 13.779 17.9877C13.8214 17.974 13.8601 17.9501 13.8919 17.9178L18.9172 12.3281C18.9702 12.2732 18.9999 12.1987 18.9999 12.121C18.9999 12.0434 18.9702 11.9689 18.9172 11.9139V11.914Z" fill="#95A8FF"></path>
                    <defs><rect width="9" height="7" fill="white" transform="translate(10 11)"></rect></defs>
                  </svg>
                  <span class="ml-7 font-light">The house by the pond cras ornare</span>
                </div>
              </div>
              <div class="w-full xl:w-1/2 px-2">
                <div class="flex">
                  <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle>
                    <path d="M18.9172 11.914L18.1187 11.086C18.0926 11.0587 18.0615 11.0371 18.0272 11.0223C17.993 11.0076 17.9563 11 17.9192 11C17.8821 11 17.8454 11.0076 17.8111 11.0223C17.7769 11.0371 17.7458 11.0587 17.7196 11.086L13.6371 15.5552L11.297 13.1275C11.2434 13.0719 11.1706 13.0407 11.0948 13.0407C11.019 13.0407 10.9462 13.0719 10.8926 13.1275L10.0836 13.9671C10.03 14.0227 9.99988 14.0981 9.99988 14.1768C9.99988 14.2554 10.03 14.3308 10.0836 14.3865L13.4118 17.9178C13.4425 17.949 13.4798 17.9724 13.5208 17.9861C13.5618 17.9997 13.6052 18.0033 13.6478 17.9965C13.6916 18.0044 13.7366 18.0014 13.779 17.9877C13.8214 17.974 13.8601 17.9501 13.8919 17.9178L18.9172 12.3281C18.9702 12.2732 18.9999 12.1987 18.9999 12.121C18.9999 12.0434 18.9702 11.9689 18.9172 11.9139V11.914Z" fill="#95A8FF"></path>
                    <defs><rect width="9" height="7" fill="white" transform="translate(10 11)"></rect></defs>
                  </svg>
                  <span class="ml-7 font-light">All options</span>
                </div>
              </div>
            </div>
          </div>
          <div class="px-4 text-center"><a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Choose</a></div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 3xl:w-auto px-4 3xl:px-6">
        <div class="max-w-lg mx-auto pt-3 px-1 pb-10 bg-gray-100 rounded-md">
          <div class="pt-12 pb-16 mb-8 px-6 sm:px-14 bg-white rounded-md">
            <div class="flex items-center justify-between mb-6">
              <h5 class="font-heading text-xl">18 month</h5>
              <span class="text-sm text-gray-400">Membership</span>
            </div>
            <div class="flex mb-8">
              <span class="relative top-1 self-start text-2xl mr-3">£</span>
              <span class="text-4xl">12.66</span>
              <span class="self-end text-sm text-gray-400">/per mo</span>
            </div>
            <div class="flex flex-wrap -mx-2">
              <div class="w-full xl:w-1/2 px-2 mb-4 xl:mb-0">
                <div class="flex">
                  <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle>
                    <path d="M18.9172 11.914L18.1187 11.086C18.0926 11.0587 18.0615 11.0371 18.0272 11.0223C17.993 11.0076 17.9563 11 17.9192 11C17.8821 11 17.8454 11.0076 17.8111 11.0223C17.7769 11.0371 17.7458 11.0587 17.7196 11.086L13.6371 15.5552L11.297 13.1275C11.2434 13.0719 11.1706 13.0407 11.0948 13.0407C11.019 13.0407 10.9462 13.0719 10.8926 13.1275L10.0836 13.9671C10.03 14.0227 9.99988 14.0981 9.99988 14.1768C9.99988 14.2554 10.03 14.3308 10.0836 14.3865L13.4118 17.9178C13.4425 17.949 13.4798 17.9724 13.5208 17.9861C13.5618 17.9997 13.6052 18.0033 13.6478 17.9965C13.6916 18.0044 13.7366 18.0014 13.779 17.9877C13.8214 17.974 13.8601 17.9501 13.8919 17.9178L18.9172 12.3281C18.9702 12.2732 18.9999 12.1987 18.9999 12.121C18.9999 12.0434 18.9702 11.9689 18.9172 11.9139V11.914Z" fill="#95A8FF"></path>
                    <defs><rect width="9" height="7" fill="white" transform="translate(10 11)"></rect></defs>
                  </svg>
                  <span class="ml-7 font-light">The house by the pond cras ornare</span>
                </div>
              </div>
              <div class="w-full xl:w-1/2 px-2">
                <div class="flex">
                  <svg class="flex-shrink-0" width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <circle opacity="0.1" cx="14" cy="14" r="14" fill="#95A8FF"></circle>
                    <path d="M18.9172 11.914L18.1187 11.086C18.0926 11.0587 18.0615 11.0371 18.0272 11.0223C17.993 11.0076 17.9563 11 17.9192 11C17.8821 11 17.8454 11.0076 17.8111 11.0223C17.7769 11.0371 17.7458 11.0587 17.7196 11.086L13.6371 15.5552L11.297 13.1275C11.2434 13.0719 11.1706 13.0407 11.0948 13.0407C11.019 13.0407 10.9462 13.0719 10.8926 13.1275L10.0836 13.9671C10.03 14.0227 9.99988 14.0981 9.99988 14.1768C9.99988 14.2554 10.03 14.3308 10.0836 14.3865L13.4118 17.9178C13.4425 17.949 13.4798 17.9724 13.5208 17.9861C13.5618 17.9997 13.6052 18.0033 13.6478 17.9965C13.6916 18.0044 13.7366 18.0014 13.779 17.9877C13.8214 17.974 13.8601 17.9501 13.8919 17.9178L18.9172 12.3281C18.9702 12.2732 18.9999 12.1987 18.9999 12.121C18.9999 12.0434 18.9702 11.9689 18.9172 11.9139V11.914Z" fill="#95A8FF"></path>
                    <defs><rect width="9" height="7" fill="white" transform="translate(10 11)"></rect></defs>
                  </svg>
                  <span class="ml-7 font-light">All options</span>
                </div>
              </div>
            </div>
          </div>
          <div class="px-4 text-center"><a class="inline-block w-full sm:w-auto px-7 py-4 text-center font-medium bg-indigo-500 hover:bg-indigo-600 text-white rounded transition duration-250" href="#">Choose</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="bg-white">
  <div class="wave-top w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M1440 64.5909H1090.08C833.336 64.5909 580.229 -7.62939e-06 360 -7.62939e-06C139.771 -7.62939e-06 0 64.5909 0 64.5909V116H1440V64.5909Z" fill="currentColor"></path>
    </svg>
  </div>
  <div class="py-20 xl:pt-24 xl:pb-28 bg-coolGray-50" style="background-image: url('flex-ui-assets/elements/pattern-light-big.svg'); background-position: center;">
    <div class="container px-4 mx-auto">
      <span class="inline-block py-px px-2 mb-4 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Pricing</span>
      <h3 class="mb-4 text-3xl md:text-5xl text-coolGray-900 font-bold tracking-tighter">Flexible pricing plan for your startup</h3>
      <p class="mb-12 text-lg md:text-xl text-coolGray-500 font-medium">Pricing that scales with your business immediately.</p>
      <div class="flex flex-wrap justify-center -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="flex flex-col items-center pt-10 px-8 pb-8 bg-white rounded-md shadow-md hover:scale-105 transition duration-500">
            <span class="inline-block py-px px-2 mb-6 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Pricing</span>
            <h3 class="mb-4 text-lg md:text-xl text-green-500 font-medium">Basic Plan</h3>
            <div class="mb-4">
              <span class="relative -top-6 right-1 text-2xl text-coolGray-900 font-medium">$</span>
              <span class="text-5xl text-coolGray-900 font-medium">10</span>
              <span class="text-3xl text-coolGray-900 font-medium">/mo</span>
            </div>
            <p class="mb-7 text-lg md:text-xl text-coolGray-400 font-medium">Billed annually</p>
            <ul class="self-start mb-8">
              <li class="flex items-center mb-3 text-coolGray-500 font-medium">
                <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.svg">
                <span>Complete documentation</span>
              </li>
              <li class="flex items-center mb-3 text-coolGray-500 font-medium">
                <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.svg">
                <span>Working materials in Figma</span>
              </li>
              <li class="flex items-center mb-3 text-coolGray-500 font-medium">
                <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.svg">
                <span>100GB cloud storage</span>
              </li>
              <li class="flex items-center text-coolGray-500 font-medium">
                <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.svg">
                <span>500 team members</span>
              </li>
            </ul>
            <a class="inline-block py-3 px-7 w-full text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Request a Demo</a>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="flex flex-col items-center pt-10 px-8 pb-8 bg-white rounded-md shadow-md hover:scale-105 transition duration-500">
            <span class="inline-block py-px px-2 mb-6 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Pricing</span>
            <h3 class="mb-4 text-lg md:text-xl text-green-500 font-medium">Freelancer Plan</h3>
            <div class="mb-4">
              <span class="relative -top-6 right-1 text-2xl text-coolGray-900 font-medium">$</span>
              <span class="text-5xl text-coolGray-900 font-medium">99</span>
              <span class="text-3xl text-coolGray-900 font-medium">/mo</span>
            </div>
            <p class="mb-7 text-lg md:text-xl text-coolGray-400 font-medium">Billed annually</p>
            <ul class="self-start mb-8">
              <li class="flex items-center mb-3 text-coolGray-500 font-medium">
                <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.svg">
                <span>Complete documentation</span>
              </li>
              <li class="flex items-center mb-3 text-coolGray-500 font-medium">
                <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.svg">
                <span>Working materials in Figma</span>
              </li>
              <li class="flex items-center mb-3 text-coolGray-500 font-medium">
                <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.svg">
                <span>100GB cloud storage</span>
              </li>
              <li class="flex items-center text-coolGray-500 font-medium">
                <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.svg">
                <span>500 team members</span>
              </li>
            </ul>
            <a class="inline-block py-3 px-7 w-full text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Request a Demo</a>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 p-4">
          <div class="flex flex-col items-center pt-10 px-8 pb-8 bg-white rounded-md shadow-md hover:scale-105 transition duration-500">
            <span class="inline-block py-px px-2 mb-6 text-xs leading-5 text-green-500 bg-green-100 font-medium uppercase rounded-9xl">Pricing</span>
            <h3 class="mb-4 text-lg md:text-xl text-green-500 font-medium">Enterprise Plan</h3>
            <div class="mb-4">
              <span class="relative -top-6 right-1 text-2xl text-coolGray-900 font-medium">$</span>
              <span class="text-5xl text-coolGray-900 font-medium">799</span>
              <span class="text-3xl text-coolGray-900 font-medium">/year</span>
            </div>
            <p class="mb-7 text-lg md:text-xl text-coolGray-400 font-medium">Billed annually</p>
            <ul class="self-start mb-8">
              <li class="flex items-center mb-3 text-coolGray-500 font-medium">
                <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.svg">
                <span>Complete documentation</span>
              </li>
              <li class="flex items-center mb-3 text-coolGray-500 font-medium">
                <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.svg">
                <span>Working materials in Figma</span>
              </li>
              <li class="flex items-center mb-3 text-coolGray-500 font-medium">
                <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.svg">
                <span>100GB cloud storage</span>
              </li>
              <li class="flex items-center text-coolGray-500 font-medium">
                <img class="mr-3" src="flex-ui-assets/elements/pricing/checkbox-green.svg">
                <span>500 team members</span>
              </li>
            </ul>
            <a class="inline-block py-3 px-7 w-full text-green-50 font-medium text-center bg-green-500 hover:bg-green-600 focus:ring-2 focus:ring-green-500 focus:ring-opacity-50 rounded-md shadow-sm" href="#">Request a Demo</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="wave-bottom w-full text-coolGray-50">
    <svg viewbox="0 0 1440 116" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path d="M0 51.4091H349.922C606.664 51.4091 859.771 116 1080 116C1300.23 116 1440 51.4091 1440 51.4091V0H0V51.4091Z" fill="currentColor"></path>
    </svg>
  </div>
</section>

<section class="font-medium bg-white py-24 2xl:py-44">
  <div class="container px-4 mx-auto">
    <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight mb-10">Plans</h2>
    <p class="text-lg leading-6 font-normal text-darkBlueGray-400 mb-20 lg:mb-36">Sed porttitor turpis sit amet malesuada porta. Vivamus lobortis blandit lorem ut posuere.</p>
    <div class="md:grid md:grid-cols-2 xl:grid-cols-4 border border-gray-100 rounded-5xl overflow-hidden">
      <div class="py-16 px-6 md:px-10 flex flex-col justify-between md:border-b border-gray-100 xl:border-b-0">
        <div>
          <div class="flex justify-between items-center mb-8">
            <h3 class="mr-2 font-heading text-6xl md:text-7xl leading-10 tracking-tight">Beginner</h3>
            <div class="relative max-w-max">
              <img class="w-14 h-14" src="uinel-assets/elements/pricing/circle1.svg" alt="">
              <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-3xl md:text-6xl">X</span>
            </div>
          </div>
          <div class="font-heading text-3xl flex items-center mb-14">
            <span class="text-base mr-2 -mb-1">$</span>
            <span>8.80</span>
          </div>
          <h3 class="font-heading text-base tracking-tighter leading-5 mb-6">What's included</h3>
          <ul class="mb-14 xl:mb-36">
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400 mb-3">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>Complete tools</span>
            </li>
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400 mb-3">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>10GB cloud storage</span>
            </li>
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>5 team members</span>
            </li>
          </ul>
        </div>
        <a class="block py-3 px-10 md:mx-auto w-full md:w-auto text-xl leading-7 text-white font-medium tracking-tighter font-heading text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Get started</a>
      </div>
      <div class="bg-gray-50 py-16 px-6 md:px-10 flex flex-col justify-between md:border-b border-gray-100 xl:border-b-0">
        <div>
          <div class="flex justify-between items-center mb-8">
            <h3 class="font-heading text-6xl md:text-7xl leading-10 tracking-tight">Students</h3>
            <div class="relative max-w-max">
              <img class="w-14 h-14" src="uinel-assets/elements/pricing/circle2.svg" alt="">
              <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-3xl md:text-6xl">I</span>
            </div>
          </div>
          <div class="mb-14 flex items-center justify-between">
            <div class="font-heading text-3xl flex items-center">
              <span class="text-base mr-2 -mb-1">$</span>
              <span>15.90</span>
            </div>
            <div class="bg-white rounded-8xl py-2 px-3 uppercase text-xs font-bold tracking-wider text-gray-300">20% off</div>
          </div>
          <h3 class="font-heading text-base tracking-tighter leading-5 mb-6">What's included</h3>
          <ul class="mb-14 xl:mb-36">
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400 mb-3">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>Complete tools</span>
            </li>
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400 mb-3">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>10GB cloud storage</span>
            </li>
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>Unlimited anonymous board editors</span>
            </li>
          </ul>
        </div>
        <a class="block py-3 px-10 md:mx-auto w-full md:w-auto text-xl leading-7 text-white font-medium tracking-tighter font-heading text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Let's go</a>
      </div>
      <div class="py-16 px-6 md:px-10 flex flex-col justify-between">
        <div>
          <div class="flex justify-between items-center mb-8">
            <h3 class="font-heading text-6xl md:text-7xl leading-10 tracking-tight">Team</h3>
            <div class="relative max-w-max">
              <img class="w-14 h-14" src="uinel-assets/elements/pricing/circle3.svg" alt="">
              <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-3xl md:text-6xl">Y</span>
            </div>
          </div>
          <div class="font-heading text-3xl flex items-center mb-14">
            <span class="text-base mr-2 -mb-1">$</span>
            <span>29.90</span>
          </div>
          <h3 class="font-heading text-base tracking-tighter leading-5 mb-6">What's included</h3>
          <ul class="mb-14 xl:mb-36">
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400 mb-3">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>Complete tools</span>
            </li>
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400 mb-3">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>35 plugins for Designers</span>
            </li>
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400 mb-3">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>200GB cloud storage</span>
            </li>
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>100+ team members</span>
            </li>
          </ul>
        </div>
        <a class="block py-3 px-10 md:mx-auto w-full md:w-auto text-xl leading-7 text-white font-medium tracking-tighter font-heading text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Buy now</a>
      </div>
      <div class="bg-gray-50 py-16 px-6 md:px-10 flex flex-col justify-between">
        <div>
          <div class="flex justify-between items-center mb-8">
            <h3 class="font-heading text-6xl md:text-7xl leading-10 tracking-tight">Business</h3>
            <div class="relative max-w-max">
              <img class="w-14 h-14" src="uinel-assets/elements/pricing/circle4.svg" alt="">
              <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-3xl md:text-6xl">O</span>
            </div>
          </div>
          <div class="font-heading text-3xl flex items-center mb-14">
            <span class="text-base mr-2 -mb-1">$</span>
            <span>44.90</span>
          </div>
          <h3 class="font-heading text-base tracking-tighter leading-5 mb-6">What's included</h3>
          <ul class="mb-14 xl:mb-36">
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400 mb-3">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>Complete tools</span>
            </li>
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400 mb-3">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>35 plugins for Designers</span>
            </li>
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400 mb-3">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>500GB cloud storage</span>
            </li>
            <li class="flex items-start leading-6 font-normal text-darkBlueGray-400">
              <img class="relative top-1 pt-px mr-6" src="uinel-assets/elements/pricing/checked.svg" alt="">
              <span>200+ team members</span>
            </li>
          </ul>
        </div>
        <a class="block py-3 px-10 md:mx-auto w-full md:w-auto text-xl leading-7 text-white font-medium tracking-tighter font-heading text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Get started</a>
      </div>
    </div>
  </div>
</section>

<section class="py-26 bg-white">
  <div class="container px-4 mx-auto">
    <span class="text-lg font-extrabold text-green-500">Section label</span>
    <h1 class="text-3xl md:text-4xl font-extrabold font-heading mt-4 mb-6">Business is only as good as its tools.</h1>
    <p class="text-xl font-extrabold leading-8 mb-16">Pricing that scales with your business immediately.</p>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-1/3 px-4 mb-12 xl:mb-0">
        <div class="max-w-md mx-auto px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="text-center mb-12">
            <span class="block text-lg font-extrabold text-green-500 leading-7">Custom Tag</span>
            <h2 class="text-2xl font-extrabold mb-6">Basic Plan</h2>
            <div class="flex justify-center items-start mb-2">
              <span class="pr-1 text-lg font-extrabold">$</span>
              <span class="text-3xl md:text-4xl font-extrabold">10/mth</span>
            </div>
            <p class="text-lg font-extrabold leading-7">Billed annually</p>
          </div>
          <div class="flex mb-4 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-green.svg" alt="">
            <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>
          </div>
          <div class="flex mb-4 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-green.svg" alt="">
            <span class="text-lg font-extrabold">Suspendisse mollis tincidunt</span>
          </div>
          <div class="flex mb-8 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-green.svg" alt="">
            <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>
          </div>
          <a class="inline-block w-full py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Get Started</a>
        </div>
      </div>
      <div class="w-full xl:w-1/3 px-4 mb-12 xl:mb-0">
        <div class="max-w-md mx-auto px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="text-center mb-12">
            <span class="block text-lg font-extrabold text-green-500 leading-7">Custom Tag</span>
            <h2 class="text-2xl font-extrabold mb-6">Freelancer Plan</h2>
            <div class="flex justify-center items-start mb-2">
              <span class="pr-1 text-lg font-extrabold">$</span>
              <span class="text-3xl md:text-4xl font-extrabold">99/mth</span>
            </div>
            <p class="text-lg font-extrabold leading-7">Billed annually</p>
          </div>
          <div class="flex mb-4 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-green.svg" alt="">
            <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>
          </div>
          <div class="flex mb-4 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-green.svg" alt="">
            <span class="text-lg font-extrabold">Suspendisse mollis tincidunt</span>
          </div>
          <div class="flex mb-8 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-green.svg" alt="">
            <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>
          </div>
          <a class="inline-block w-full py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Get Started</a>
        </div>
      </div>
      <div class="w-full xl:w-1/3 px-4">
        <div class="max-w-md mx-auto px-6 py-12 md:p-12 bg-white border-3 border-indigo-900 rounded-2xl shadow-md">
          <div class="text-center mb-12">
            <span class="block text-lg font-extrabold text-green-500 leading-7">Custom Tag</span>
            <h2 class="text-2xl font-extrabold mb-6">Enterprise Plan</h2>
            <div class="flex justify-center items-start mb-2">
              <span class="pr-1 text-lg font-extrabold">$</span>
              <span class="text-3xl md:text-4xl font-extrabold">799/mth</span>
            </div>
            <p class="text-lg font-extrabold leading-7">Billed annually</p>
          </div>
          <div class="flex mb-4 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-green.svg" alt="">
            <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>
          </div>
          <div class="flex mb-4 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-green.svg" alt="">
            <span class="text-lg font-extrabold">Suspendisse mollis tincidunt</span>
          </div>
          <div class="flex mb-8 items-start">
            <img class="block w-6 h-6 mr-2 object-contain" src="nigodo-assets/circle-icon-green.svg" alt="">
            <span class="text-lg font-extrabold">Mauris pellentesque congue libero nec</span>
          </div>
          <a class="inline-block w-full py-4 px-6 text-center leading-6 text-lg text-white font-extrabold bg-indigo-800 hover:bg-indigo-900 border-3 border-indigo-900 shadow rounded transition duration-200" href="#">Get Started</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section x-data="{ pricing: 'Monthly' }" x-init="pricing = $refs.pricing1.textContent">
  <div class="skew skew-top mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 10 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-top ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 10 10 0 10 10"></polygon>
    </svg>
  </div>
  <div class="py-20 bg-gray-900 radius-for-skewed">
    <div class="container mx-auto px-4">
      <div class="max-w-2xl mx-auto text-center mb-16">
        <span class="text-green-600 font-bold">Dolor sit amet consectutar</span>
        <h2 class="mb-2 text-4xl lg:text-5xl font-bold font-heading text-white">Choose your best plan</h2>
        <p class="mb-6 text-gray-500">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="inline-block py-1 px-1 bg-gray-800 rounded-lg">
          <button x-ref="pricing1" class="mr-1 text-sm py-2 px-4 text-white bg-green-600 rounded-lg shadow-md font-bold" :class="{'text-white bg-green-600 rounded-lg shadow-md': $refs.pricing1.textContent == pricing, 'text-gray-500 hover:text-gray-400': $refs.pricing1.textContent != pricing}" x-on:click="pricing = $refs.pricing1.textContent">Monthly</button>
          <button x-ref="pricing2" class="text-sm py-2 px-4 text-gray-500 hover:text-gray-400 font-bold" :class="{'text-white bg-green-600 rounded-lg shadow-md': $refs.pricing2.textContent == pricing, 'text-gray-500 hover:text-gray-400': $refs.pricing2.textContent != pricing}" x-on:click="pricing = $refs.pricing2.textContent">Yearly</button>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8 lg:mb-0">
          <div class="p-8 bg-white shadow rounded">
            <h4 class="mb-2 text-2xl font-bold font-heading">Beginner</h4>
            <span class="text-6xl font-bold">Free</span>
            <p class="mt-3 mb-6 text-gray-500 leading-loose">Nullam diam arcu, sodales quis convallis sit amet, sagittis varius ligula.</p>
            <ul class="mb-6 text-gray-500">
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Vestibulum viverra</span>
              </li>
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Morbi mollis metus pretium</span>
              </li>
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Etiam lectus nunc, commodo</span>
              </li>
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Ut quam nisl mollis id pretium</span>
              </li>
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Suspendisse bibendum</span>
              </li>
            </ul>
            <a class="inline-block text-center py-2 px-4 w-full rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-white font-bold leading-loose transition duration-200" href="#">Get Started</a>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8 lg:mb-0">
          <div class="p-8 bg-green-600 shadow rounded">
            <h4 class="mb-2 text-2xl font-bold text-white">Intermediate</h4>
            <span :class="{'inline-block': $refs.pricing1.textContent == pricing, 'hidden': $refs.pricing1.textContent != pricing }" class="text-6xl font-bold text-white">$24</span>
            <span :class="{'inline-block': $refs.pricing2.textContent == pricing, 'hidden': $refs.pricing2.textContent != pricing }" class="hidden text-6xl font-bold text-white">$299</span>
            <span :class="{'inline-block': $refs.pricing1.textContent == pricing, 'hidden': $refs.pricing1.textContent != pricing }" class="text-gray-50 text-xs">/month</span>
            <span :class="{'inline-block': $refs.pricing2.textContent == pricing, 'hidden': $refs.pricing2.textContent != pricing }" class="hidden text-gray-50 text-xs">/year</span>
            <p class="mt-3 mb-6 leading-loose text-gray-50">Nullam diam arcu, sodales quis convallis sit amet, sagittis varius ligula.</p>
            <ul class="mb-6 text-gray-50">
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Vestibulum viverra</span>
              </li>
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Morbi mollis metus pretium</span>
              </li>
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Etiam lectus nunc, commodo</span>
              </li>
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Ut quam nisl mollis id pretium</span>
              </li>
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Suspendisse bibendum</span>
              </li>
            </ul>
            <a class="inline-block text-center py-2 px-4 w-full rounded-l-xl rounded-t-xl bg-white hover:bg-gray-100 font-bold leading-loose transition duration-200" href="#">Get Started</a>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <div class="p-8 bg-white shadow rounded">
            <h4 class="mb-2 text-2xl font-bold font-heading">Professional</h4>
            <span :class="{'inline-block': $refs.pricing1.textContent == pricing, 'hidden': $refs.pricing1.textContent != pricing }" class="text-6xl font-bold">$48</span>
            <span :class="{'inline-block': $refs.pricing2.textContent == pricing, 'hidden': $refs.pricing2.textContent != pricing }" class="hidden text-6xl font-bold">$599</span>
            <span :class="{'inline-block': $refs.pricing1.textContent == pricing, 'hidden': $refs.pricing1.textContent != pricing }" class="text-gray-400 text-xs">/month</span>
            <span :class="{'inline-block': $refs.pricing2.textContent == pricing, 'hidden': $refs.pricing2.textContent != pricing }" class="hidden text-gray-400 text-xs">/year</span>
            <p class="mt-3 mb-6 text-gray-500 leading-loose">Nullam diam arcu, sodales quis convallis sit amet, sagittis varius ligula.</p>
            <ul class="mb-6 text-gray-500">
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Vestibulum viverra</span>
              </li>
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Morbi mollis metus pretium</span>
              </li>
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Etiam lectus nunc, commodo</span>
              </li>
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Ut quam nisl mollis id pretium</span>
              </li>
              <li class="mb-2 flex">
                <svg class="mr-2 w-5 h-5 text-green-600" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span>Suspendisse bibendum</span>
              </li>
            </ul>
            <a class="inline-block text-center py-2 px-4 w-full rounded-l-xl rounded-t-xl bg-green-600 hover:bg-green-700 text-white font-bold leading-loose transition duration-200" href="#">Get Started</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="skew skew-bottom mr-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 0 10"></polygon>
    </svg>
  </div>
  <div class="skew skew-bottom ml-for-radius">
    <svg class="h-8 md:h-12 lg:h-20 w-full text-gray-900" viewBox="0 0 10 10" preserveAspectRatio="none">
      <polygon fill="currentColor" points="0 0 10 0 10 10"></polygon>
    </svg>
  </div>
</section>

<section class="py-24">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto mb-16 text-center">
      <h1 class="text-4xl md:text-5xl lg:text-6xl font-heading mb-6" >Choose a plan</h1>
      <p class="leading-8" >If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="flex flex-wrap -mx-4 items-center">
      
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="p-12 max-w-md mx-auto bg-indigo-100">
          <div class="flex mb-12 items-end justify-between">
            <h2 class="text-4xl font-heading" >Free</h2>
            <h5 class="text-xl font-bold text-indigo-300"  >$0,00</h5>
          </div>
          <ul class="mb-10">
            <li class="flex items-center mb-2"><img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt=""><span class="leading-8" >1 component categorie</span></li>
            <li class="flex items-center mb-2"><img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt=""><span class="leading-8" >1 mobile component</span></li>
            <li class="flex items-center"><img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt=""><span class="leading-8" >1 Key Visual</span></li>
          </ul><a class="block w-full px-4 py-3 text-center text-white font-bold bg-black hover:bg-gray-900" href="#" >Try for Free</a>
        </div>
      </div>
      
      <div class="w-full lg:w-1/3 px-4 mb-12 lg:mb-0">
        <div class="p-12 max-w-md mx-auto bg-black">
          <div class="flex mb-12 items-end justify-between">
            <h2 class="text-4xl font-heading text-white" >Premium</h2>
            <h5 class="text-xl font-bold text-indigo-300"  >$55,00</h5>
          </div>
          <ul class="mb-10">
            <li class="flex items-center mb-2"><img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt=""><span class="leading-8 text-white" >3 component categorie</span></li>
            <li class="flex items-center mb-2"><img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt=""><span class="leading-8 text-white" >3 mobile component</span></li>
            <li class="flex items-center mb-2"><img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt=""><span class="leading-8 text-white" >3 Key Visual</span></li>
            <li class="flex items-center mb-2"><img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt=""><span class="leading-8 text-white" >Popular frameworks support</span></li>
            <li class="flex items-center"><img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt=""><span class="leading-8 text-white" >Infinite content</span></li>
          </ul><a class="block w-full px-4 py-3 text-center text-white font-bold bg-indigo-300 hover:bg-indigo-400" href="#" >Buy Now</a>
        </div>
      </div>
      
      <div class="w-full lg:w-1/3 px-4">
        <div class="p-12 max-w-md mx-auto bg-indigo-100">
          <div class="flex mb-12 items-end justify-between">
            <h2 class="text-4xl font-heading" >Basic</h2>
            <h5 class="text-xl font-bold text-indigo-300"  >$25,00</h5>
          </div>
          <ul class="mb-10">
            <li class="flex items-center mb-2"><img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt=""><span class="leading-8" >3 component categorie</span></li>
            <li class="flex items-center mb-2"><img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt=""><span class="leading-8" >3 mobile component</span></li>
            <li class="flex items-center mb-2"><img class="mr-2" src="pstls-assets/icons/pricing-1-check-circle.svg" alt=""><span class="leading-8" >3 Key Visual</span></li>
          </ul><a class="block w-full px-4 py-3 text-center text-white font-bold bg-black hover:bg-gray-900" href="#" >Buy Now</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-24 bg-black overflow-x-hidden" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <img class="absolute top-0 left-1/2 transform -translate-x-1/2 object-contain" src="boldui-assets/elements/shadow-blue-pricing.svg" alt="">
  <div class="relative container mx-auto px-4">
    <div class="flex flex-wrap justify-between items-center -mx-4 mb-16">
      <div class="w-full lg:w-auto max-w-md px-4 mb-8 lg:mb-0">
        <span class="text-lg font-semibold text-blue-400">Lorem ipsum</span>
        <h2 class="mt-6 text-2xl text-white uppercase font-heading">Increase your brand's regular profit</h2>
      </div>
      <div class="w-full lg:w-auto px-4">
        <div class="flex flex-wrap items-center">
            <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="inline-block w-full md:w-auto mb-4 md:mb-0 md:mr-8 py-3 px-4 font-bold text-xs text-center rounded-full uppercase font-heading bg-blue-500 hover:bg-blue-600 transform duration-200" :class="{ 'bg-blue-500 hover:bg-blue-600': tab == $refs.tab1.textContent, 'text-gray-500 hover:text-gray-400 border hover:border-gray-500': tab != $refs.tab1.textContent }" href="#">Active demo</a>
            <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="inline-block w-full md:w-auto py-3 px-4 font-bold text-xs text-center rounded-full uppercase font-heading text-gray-500 hover:text-gray-400 border hover:border-gray-500" :class="{ 'bg-blue-500 hover:bg-blue-600': tab == $refs.tab2.textContent, 'text-gray-500 hover:text-gray-400 border hover:border-gray-500': tab != $refs.tab2.textContent }" href="#">Normal Tab</a>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap items-center">
      <div class="w-full lg:w-1/3">
        <div class="py-14 px-10 border lg:border-r-0">
          <h3 class="text-2xl text-white font-heading">Starter</h3>
          <p class="mb-10 text-lg text-gray-500 font-heading">$34.99</p>
          <ul class="mb-14">
            <li class="flex items-center mb-4">
              <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">Complete documentation</span>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">100GB cloud storage</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">Complete documentation</span>
            </li>
          </ul>
          <a class="inline-flex items-center py-4 text-white hover:underline" href="#">
            <span class="mr-2 text-sm font-heading">Activate demo</span>
            <svg class="text-yellow-300" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.0099 3.28373H-6.10352e-05V5.37603H12.0099V8.51449L15.9999 4.32988L12.0099 0.145264V3.28373Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-1/3">
        <div class="py-20 px-10 border">
          <div class="flex items-center justify-between mb-10">
            <div>
              <h3 class="text-5xl text-yellow-400 font-heading">Pro</h3>
              <p class="text-lg text-gray-500 font-heading">$65.99</p>
            </div>
            <div class="relative w-1/2">
              <img class="absolute top-1/2 left-1/2 h-16 md:h-32 w-16 md:w-32 transform -translate-y-1/2 -translate-x-1/2" src="boldui-assets/elements/best-choice-text.svg" alt="">
            </div>
          </div>
          <ul class="mb-14">
            <li class="flex items-center mb-4">
              <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">Complete documentation</span>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">100GB cloud storage</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">Complete documentation</span>
            </li>
          </ul>
          <a class="inline-flex items-center justify-center w-full py-4 md:px-6 rounded-full bg-yellow-300 hover:bg-yellow-400 transform duration-200" href="#">
            <svg class="text-black mr-3" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.01 3.16553H0V5.24886H12.01V8.37386L16 4.20719L12.01 0.0405273V3.16553Z" fill="currentColor"></path>
            </svg>
            <span class="text-sm font-heading">Activate demo</span>
          </a>
        </div>
      </div>
      <div class="w-full lg:w-1/3">
        <div class="py-14 px-10 border lg:border-l-0">
          <h3 class="text-2xl text-white font-heading">Premium</h3>
          <p class="mb-10 text-lg text-gray-500 font-heading">$99.99</p>
          <ul class="mb-14">
            <li class="flex items-center mb-4">
              <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">Complete documentation</span>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">100GB cloud storage</span>
            </li>
            <li class="flex items-center">
              <svg class="mr-4" width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.77494 11.7247L17.9749 0.726318L19.9999 2.71486L6.77494 15.7263L-6.10352e-05 9.09784L2.04994 7.08475L6.77494 11.7247Z" fill="#FFEC3E"></path>
              </svg>
              <span class="text-gray-50">Complete documentation</span>
            </li>
          </ul>
          <a class="inline-flex items-center py-4 text-white hover:underline" href="#">
            <span class="mr-2 text-sm font-heading">Activate demo</span>
            <svg class="text-yellow-300" width="16" height="9" viewBox="0 0 16 9" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.0099 3.28373H-6.10352e-05V5.37603H12.0099V8.51449L15.9999 4.32988L12.0099 0.145264V3.28373Z" fill="currentColor"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-16 bg-gray-50" x-data="{ pricing: '' }" x-init="pricing = $refs.pricing1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-between items-center -mx-4 mb-10">
      <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
        <span class="text-sm font-semibold uppercase">Pricing</span>
        <h2 class="max-w-xl font-heading text-3xl sm:text-4xl">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
      </div>
      <div class="w-full lg:w-auto px-4">
        <div class="inline-flex items-center p-2 bg-gray-100 rounded">
            <a x-ref="pricing1" x-on:click.prevent="pricing = $refs.pricing1.textContent" class="inline-block px-8 pt-2 pb-3 leading-6 font-heading font-medium rounded-sm" :class="{ 'text-green-500 bg-white': pricing == $refs.pricing1.textContent, 'text-gray-900 hover:text-gray-700': pricing != $refs.pricing1.textContent }" href="#">Monthly</a>
            <a x-ref="pricing2" x-on:click.prevent="pricing = $refs.pricing2.textContent" class="inline-block px-8 pt-2 pb-3 leading-6 font-heading font-medium rounded-sm" href="#" :class="{ 'text-green-500 bg-white': pricing == $refs.pricing2.textContent, 'text-gray-900 hover:text-gray-700': pricing != $refs.pricing2.textContent }">Yearly</a>
        </div>
      </div>
    </div>
    <div class="max-w-md lg:max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-full lg:w-1/3">
          <div class="p-8 bg-white rounded-md">
            <div class="text-center mb-20">
              <span class="font-heading font-medium text-lg">Starter</span>
              <div class="flex items-start justify-center mt-2">
                <span class="font-heading font-medium text-lg">$</span>
                <span x-text="pricing == $refs.pricing1.textContent ? '9,99' : '19,98'" class="font-heading font-medium text-3xl leading-10">9,99</span>
              </div>
            </div>
            <ul class="mb-8">
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">Complete documentation</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">Working materials in Figma</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">100GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">500 team members</span>
              </li>
            </ul>
            <a class="block py-4 px-6 text-center font-heading font-medium text-base text-green-500 hover:text-white border border-green-500 hover:bg-green-500 rounded-sm transition duration-200" href="#">Get started</a>
          </div>
        </div>
        <div class="w-full lg:w-1/3">
          <div class="relative py-12 px-8 bg-gray-900 rounded-md">
            <img class="absolute top-0 left-0 -ml-1 -mt-1" src="acros-assets/elements/bestseller.svg" alt="">
            <div class="text-center mb-20">
              <span class="font-heading font-medium text-white text-lg">Pro</span>
              <div class="flex items-start justify-center mt-2">
                <span class="font-heading font-medium text-white text-lg">$</span>
                <span x-text="pricing == $refs.pricing1.textContent ? '14,99' : '29,98'" class="font-heading font-medium text-white text-3xl leading-10">14,99</span>
              </div>
            </div>
            <ul class="mb-8">
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-white text-sm">Complete documentation</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-white text-sm">Working materials in Figma</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-white text-sm">100GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-white text-sm">500 team members</span>
              </li>
            </ul>
            <a class="block py-4 px-6 text-center font-heading font-medium text-base bg-white hover:bg-gray-100 border border-white hover:border-gray-100 rounded-sm transition duration-200" href="#">Get started</a>
          </div>
        </div>
        <div class="w-full lg:w-1/3">
          <div class="p-8 bg-white rounded-md">
            <div class="text-center mb-20">
              <span class="font-heading font-medium text-lg">Premium</span>
              <div class="flex items-start justify-center mt-2">
                <span class="font-heading font-medium text-lg">$</span>
                <span x-text="pricing == $refs.pricing1.textContent ? '19,99' : '39,98'" class="font-heading font-medium text-3xl leading-10">19,99</span>
              </div>
            </div>
            <ul class="mb-8">
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">Complete documentation</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">Working materials in Figma</span>
              </li>
              <li class="flex items-center mb-3">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">100GB cloud storage</span>
              </li>
              <li class="flex items-center">
                <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  <circle cx="10" cy="10" r="9" stroke="#00CBA6" stroke-width="1.5"></circle>
                </svg>
                <span class="ml-4 text-sm">500 team members</span>
              </li>
            </ul>
            <a class="block py-4 px-6 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Get started</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="relative py-24 bg-blue-800" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto mb-16 text-center">
      <span class="text-blue-400 uppercase font-semibold tracking-widest">Lorem ipsum</span>
      <h2 class="mt-8 mb-6 text-4xl font-bold font-heading text-white">Take quick action that increases your brand's regular profit.</h2>
      <p class="mb-8 text-xl text-gray-50">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
      <div class="max-w-max mx-auto flex flex-row">
        <button x-ref="tab1" x-on:click="tab = $refs.tab1.textContent" class="px-8 py-2 leading-8 bg-white font-semibold text-blue-800" :class="{ 'bg-white font-semibold text-blue-800': tab == $refs.tab1.textContent, 'bg-blue-900 text-blue-100 hover:text-blue-200': tab != $refs.tab1.textContent }">Active demo</button>
        <button x-ref="tab2" x-on:click="tab = $refs.tab2.textContent" class="px-8 py-2 leading-8 bg-blue-900 text-blue-100 hover:text-blue-200" :class="{ 'bg-white font-semibold text-blue-800': tab == $refs.tab2.textContent, 'bg-blue-900 text-blue-100 hover:text-blue-200': tab != $refs.tab2.textContent }">Normal Tab</button>
      </div>
    </div>
    <div class="flex flex-wrap items-center -mx-3">
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="relative pt-12 pb-10 px-10 bg-blue-900 lg:text-center">
          <span class="absolute top-0 left-0 w-1/2 py-2 bg-blue-700 clip-path-right-badge text-center text-sm leading-8 font-medium uppercase text-white tracking-widest">Starter</span>
          <div class="flex lg:justify-center mt-8 mb-8">
            <span class="self-end inline-block text-6xl font-semibold text-white">$34</span>
            <p class="self-start text-4xl font-semibold font-heading text-white">99</p>
            <span class="self-end inline-block ml-6 text-sm text-blue-300">/ per month</span>
          </div>
          <ul class="mb-6 text-left">
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Complete documentation</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Working materials in Figma</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-6">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">500 team members</p>
            </li>
          </ul>
          <a class="block py-5 text-sm text-center text-white uppercase font-bold leading-normal border-2 border-white hover:bg-blue-800 transition duration-200" href="#">Try it now</a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="relative pt-12 pb-10 px-10 bg-blue-700 lg:text-center">
          <span class="absolute top-0 left-0 w-1/2 py-2 bg-blue-900 clip-path-right-badge text-center text-sm leading-8 font-medium uppercase text-white tracking-widest">Pro</span>
          <div class="flex lg:justify-center mt-8 mb-8">
            <span class="self-end inline-block text-6xl font-semibold text-white">$65</span>
            <p class="self-start text-4xl font-semibold font-heading text-white">99</p>
            <span class="self-end inline-block ml-6 text-sm text-blue-300">/ per month</span>
          </div>
          <ul class="mb-6 text-left">
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Complete documentation</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Working materials in Figma</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-6">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">500 team members</p>
            </li>
          </ul>
          <a class="block py-5 text-sm text-center text-blue-800 uppercase font-bold bg-yellow-500 hover:bg-yellow-400 transition duration-200" href="#">Try it now</a>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="relative pt-12 pb-10 px-10 bg-blue-900 lg:text-center">
          <span class="absolute top-0 left-0 w-1/2 py-2 bg-blue-700 clip-path-right-badge text-center text-sm leading-8 font-medium uppercase text-white tracking-widest">Premium</span>
          <div class="flex lg:justify-center mt-8 mb-8">
            <span class="self-end inline-block text-6xl font-semibold text-white">$99</span>
            <p class="self-start text-4xl font-semibold font-heading text-white">99</p>
            <span class="self-end inline-block ml-6 text-sm text-blue-300">/ per month</span>
          </div>
          <ul class="mb-6 text-left">
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Complete documentation</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">Working materials in Figma</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-4">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">100GB cloud storage</p>
            </li>
            <li class="flex items-center mb-6">
              <svg class="mr-4 h-5 w-5 text-blue-300" viewBox="0 0 20 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.775 10.9984L17.975 0L20 1.98854L6.775 15L0 8.37152L2.05 6.35843L6.775 10.9984Z"></path>
              </svg>
              <p class="text-white">500 team members</p>
            </li>
          </ul>
          <a class="block py-5 text-sm text-center text-white uppercase font-bold leading-normal border-2 border-white hover:bg-blue-800 transition duration-200" href="#">Try it now</a>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <h2 class="max-w-lg mx-auto mb-4 text-4xl font-bold font-heading">
        <span>Start saving time today and</span>
        <span class="text-blue-600">choose</span>
        <span>your best plan</span>
      </h2>
      <p class="max-w-sm mx-auto text-lg text-blueGray-400">Best for freelance developers who need to save their time</p>
    </div>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="pt-16 pb-8 px-4 text-center bg-white rounded shadow">
          <img class="h-20 mb-6 mx-auto" src="metis-assets/illustrations/people.png" alt="">
          <h3 class="mb-2 text-4xl font-bold font-heading">Begginer</h3>
          <span class="text-4xl text-blue-600 font-bold font-heading">$32.99</span>
          <p class="mt-2 mb-8 text-blueGray-400">user per month</p>
          <div class="flex flex-col items-center mb-8">
            <ul class="text-blueGray-400">
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>3 Emails</span>
              </li>
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>1 Datebases</span>
              </li>
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>Unlimited Domains</span>
              </li>
              <li class="flex">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>10 GB Storage</span>
              </li>
            </ul>
          </div>
          <div><a class="block sm:inline-block py-4 px-6 mb-4 sm:mb-0 sm:mr-3 text-xs text-white text-center font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Start Free Trial</a><a class="block sm:inline-block py-4 px-6 text-xs text-blueGray-500 hover:text-blueGray-600 text-center font-semibold leading-none bg-white border border-blueGray-200 hover:border-blueGray-300 rounded" href="#">Purchase</a></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="pt-16 pb-8 px-4 text-center text-white bg-blue-600 rounded shadow">
          <img class="h-20 mb-6 mx-auto" src="metis-assets/illustrations/job-interview.png" alt="">
          <h3 class="mb-2 text-4xl font-bold font-heading">Intermediate</h3>
          <span class="text-4xl font-bold font-heading">$55.99</span>
          <p class="mt-2 mb-8">user per month</p>
          <div class="flex flex-col items-center mb-8">
            <ul>
              <li class="flex items-center mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>6 Emails</span>
              </li>
              <li class="flex items-center mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>4 Datebases</span>
              </li>
              <li class="flex items-center mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>Unlimited Domains</span>
              </li>
              <li class="flex items-center">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>35 GB Storage</span>
              </li>
            </ul>
          </div>
          <div><a class="block sm:inline-block py-4 px-6 mb-4 sm:mb-0 sm:mr-3 text-xs text-blue-600 font-semibold leading-none bg-white hover:bg-blueGray-50 rounded" href="#">Start Free Trial</a><a class="block sm:inline-block py-4 px-6 text-xs font-semibold leading-none border border border-blue-500 hover:border-blue-400 rounded" href="#">Purchase</a></div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-6">
        <div class="pt-16 pb-8 px-4 text-center bg-white rounded shadow">
          <img class="h-20 mb-6 mx-auto" src="metis-assets/illustrations/team-management.png" alt="">
          <h3 class="mb-2 text-4xl font-bold font-heading">Professional</h3>
          <span class="text-4xl text-blue-600 font-bold font-heading">$62.99</span>
          <p class="mt-2 mb-8 text-blueGray-400">user per month</p>
          <div class="flex flex-col items-center mb-8">
            <ul class="text-blueGray-400">
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>12 Emails</span>
              </li>
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>8 Datebases</span>
              </li>
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>Unlimited Domains</span>
              </li>
              <li class="flex">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>50 GB Storage</span>
              </li>
            </ul>
          </div>
          <div><a class="block sm:inline-block py-4 px-6 mb-4 sm:mb-0 sm:mr-3 text-xs text-white text-center font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Start Free Trial</a><a class="block sm:inline-block py-4 px-6 text-xs text-blueGray-500 hover:text-blueGray-600 text-center font-semibold leading-none bg-white border border-blueGray-200 hover:border-blueGray-300 rounded" href="#">Purchase</a></div>
        </div>
      </div>
    </div>
  </div>
</section>