Redirecting to PayPal

Can't find the right component?

Describe it and Shuffle AI builds it in seconds, ready to edit and export.

Free to start Generate with AI

Shuffle Components in Acros library

Browse 353 ready-made UI components available in Shuffle Editor.

Framework

UI Library

Components

Tailwind Component #81

<section x-data="{ mobileNavOpen: false }">
  <nav class="px-4 sm:px-10 py-4 bg-gray-900">
    <div class="relative flex items-center justify-between">
      <div class="w-auto">
        <a class="inline-block" href="#">
          <img src="acros-assets/logo/logo-acros-white.svg" alt="">
        </a>
      </div>
      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:block">
        <ul class="flex items-center">
          <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">About</a></li>
          <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Company</a></li>
          <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Services</a></li>
          <li class="font-heading mr-12 text-white hover:text-gray-200"><a href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="w-auto hidden lg:block"><a class="inline-block py-4 px-8 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="#">Contact</a></div>
      <div class="w-auto lg:hidden">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-flex w-14 h-14 justify-center items-center bg-gray-500 hover:bg-gray-600 rounded-full">
          <svg width="20" height="10" viewBox="0 0 20 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19 9H1M19 1H1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
      </div>
    </div>
  </nav>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-5/6 max-w-sm z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 backdrop-blur-xl backdrop-filter bg-gray-900 bg-opacity-80"></div>
    <nav class="relative pt-7 pb-8 bg-white h-full overflow-y-auto">
      <div class="flex flex-col px-6 h-full">
        <a class="inline-block ml-4 mb-7" href="#">
          <img src="acros-assets/logo/logo-acros-black.svg" alt="">
        </a>
        <ul class="w-full mb-auto pb-16">
          <li><a class="font-heading block text-base font-medium py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Home</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">About</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Company</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Services</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Testimonials</a></li>
          <li><a class="font-heading block text-base py-4 px-6 hover:bg-green-50 rounded-sm" href="#">Contact</a></li>
        </ul>
        <div class="w-full">
          <a class="block w-full py-4 px-4 mb-4 text-center font-heading font-medium text-base hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-200" href="#">Log in</a><a class="block w-full py-4 px-4 mb-8 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="#">Sign up</a>
          <p class="pl-2 text-sm">2022 © Shuffle</p>
        </div>
      </div>
    </nav>
  </div>
</section>

Tailwind Component #82

<section class="py-12 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-md ml-auto py-8 px-14 bg-white rounded-md">
      <div class="max-w-xs">
        <svg width="49" height="54" viewBox="0 0 49 54" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M43.5331 20.2485C43.5331 20.2485 42.0851 38.2085 41.2451 45.7739C40.8451 49.3872 38.6131 51.5045 34.9571 51.5712C27.9998 51.6965 21.0344 51.7045 14.0798 51.5579C10.5624 51.4859 8.36776 49.3419 7.97576 45.7925C7.13043 38.1605 5.69043 20.2485 5.69043 20.2485" stroke="#AAACAD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M47.2218 11.6392H2.00049" stroke="#AAACAD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M38.5082 11.6391C36.4149 11.6391 34.6122 10.1591 34.2016 8.10848L33.5536 4.86581C33.1536 3.36981 31.7989 2.33514 30.2549 2.33514H18.9669C17.4229 2.33514 16.0682 3.36981 15.6682 4.86581L15.0202 8.10848C14.6096 10.1591 12.8069 11.6391 10.7136 11.6391" stroke="#AAACAD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M31 44L33 20" stroke="#AAACAD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
          <path d="M19 44L17 20" stroke="#AAACAD" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
        <h2 class="font-heading text-lg font-medium mt-6 mb-2">Sign up to our newsletter</h2>
        <p class="leading-7 mb-6">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <div class="sm:flex items-center justify-end"><a class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Cancel</a><a class="inline-block w-full sm:w-auto 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="#">Yes, delete</a></div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #83

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-between items-end -mx-4 mb-12">
      <div class="w-full xl:w-1/2 px-4 mb-8 xl: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 xl:w-auto px-4">
        <p class="max-w-lg leading-7">Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</p>
      </div>
    </div>
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <h4 class="font-medium mb-6">It uses a dictionary of over:</h4>
        <ul>
          <li class="flex items-center mb-4">
            <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">Complete documentation</span>
          </li>
          <li class="flex items-center mb-4">
            <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">Working materials in Figma</span>
          </li>
          <li class="flex items-center mb-4">
            <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">100GB cloud storage</span>
          </li>
          <li class="flex items-center mb-4">
            <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">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">500 team members</span>
          </li>
        </ul>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8 md:mb-0">
        <div class="py-12 px-8 text-center bg-white rounded-md">
          <span class="font-heading font-medium text-lg">Individual</span>
          <div class="flex items-start justify-center mt-4 mb-4">
            <span class="font-heading font-medium text-lg">$</span>
            <span class="font-heading font-medium text-3xl leading-10">24,99</span>
          </div>
          <span>per year</span>
          <a class="block py-4 px-6 mt-18 mb-8 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="#">Try it for free</a>
          <span>1 editor per project</span>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4">
        <div class="py-12 px-8 text-center bg-gray-900 rounded-md">
          <span class="font-heading font-medium text-white text-lg">Team</span>
          <div class="flex items-start justify-center mt-4 mb-4">
            <span class="font-heading font-medium text-white text-lg">$</span>
            <span class="font-heading font-medium text-white text-3xl leading-10">49,99</span>
          </div>
          <span class="text-white">per year</span>
          <a class="block py-4 px-6 mt-18 mb-8 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="#">Try it for free</a>
          <span class="text-white">Unlimited editors</span>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #84

<section class="relative py-16 bg-gray-50">
  <img class="absolute top-0 left-0 w-full h-full object-contain" src="acros-assets/images/call-to-action/cta4-bg.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap -mx-4 items-center">
        <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
          <div class="max-w-lg mx-auto">
            <span class="text-sm font-semibold uppercase">
              <span>Our</span>
              <span class="text-green-500">features</span>
            </span>
            <h1 class="font-heading text-3xl sm:text-4xl mt-2 mb-10">The latest version of this excellent product is waiting to deploy</h1>
            <a class="inline-block w-full sm:w-auto 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="#">Try demo</a>
          </div>
        </div>
        <div class="w-full xl:w-1/2 px-4">
          <div class="flex flex-wrap -mx-4 items-center justify-center">
            <div class="w-full md:w-auto xl:w-1/2 px-4 mb-8 md:mb-0">
              <div class="max-w-xs mx-auto py-10 pl-6 pr-10 mb-8 bg-white rounded">
                <div class="flex items-center justify-center w-14 h-14 p-4 mb-6 rounded-md text-green-500 bg-green-50">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12.5438 9.53998V10.7466C12.5438 11.1299 12.6204 11.4514 12.7714 11.7019C12.9798 12.0476 13.3219 12.2457 13.7102 12.2457C14.0907 12.2457 14.4688 12.0604 14.8339 11.6953L18.8194 7.70984C19.6945 6.83478 19.6945 5.41095 18.8194 4.53589L14.8339 0.550415C14.4688 0.18512 14.0907 0 13.7102 0C13.1296 0 12.5438 0.463623 12.5438 1.49908V2.59497C6.88552 2.92914 2.20132 7.27148 1.50515 12.9567C1.46615 13.2742 1.64669 13.5782 1.94424 13.6959C2.02846 13.7292 2.11617 13.7454 2.20278 13.7454C2.42214 13.7454 2.63491 13.6426 2.77041 13.4575C4.63772 10.9061 7.63589 9.38287 10.7904 9.38287C11.3749 9.38287 11.9627 9.43561 12.5438 9.53998Z" fill="#00CBA6"></path>
                    <path d="M22.0432 10.3041C21.7456 10.1862 21.4061 10.2843 21.217 10.5427C19.3499 13.0939 16.3517 14.6172 13.1972 14.6172C12.6127 14.6172 12.0249 14.5644 11.4437 14.4601V13.2534C11.4437 12.2179 10.8578 11.7543 10.2774 11.7543C9.89686 11.7543 9.51875 11.9396 9.15345 12.3049L5.16798 16.2902C4.2931 17.1652 4.2931 18.5891 5.16816 19.4643L9.15345 23.4496C9.51875 23.8149 9.89686 24 10.2774 24C10.8578 24 11.4437 23.5364 11.4437 22.5009V21.4051C17.1022 21.0709 21.7863 16.7285 22.4824 11.0435C22.5214 10.7258 22.3409 10.4218 22.0432 10.3041Z" fill="#00CBA6"></path>
                    <defs><rect width="24" height="24" fill="white"></rect></defs>
                  </svg>
                </div>
                <h4 class="font-heading font-medium mb-2">Easy changes</h4>
                <p class="text-sm leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
              </div>
              <div class="max-w-xs mx-auto py-10 pl-6 pr-10 bg-white rounded">
                <div class="flex items-center justify-center w-14 h-14 p-4 mb-6 rounded-md text-green-500 bg-green-50">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M17.8076 21.7971V5.45581" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M22.7007 16.8818L17.8074 21.7978L12.9141 16.8818" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M5.89347 2.19971V18.541" stroke="#00CBA6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M1.00024 7.11497L5.89358 2.19897L10.7869 7.11497" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <h4 class="font-heading font-medium mb-2">Sharable showcase</h4>
                <p class="text-sm leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
              </div>
            </div>
            <div class="w-full md:w-auto xl:w-1/2 px-4">
              <div class="max-w-xs mx-auto py-10 pl-6 pr-10 bg-white rounded">
                <div class="flex items-center justify-center w-14 h-14 p-4 mb-6 rounded-md text-green-500 bg-green-50">
                  <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M6.27264 1.5H15.7006C17.0599 1.51525 18.3538 2.08993 19.2808 3.0902C20.2077 4.09048 20.6869 5.42903 20.6067 6.79412V13.322C20.6869 14.6871 20.2077 16.0256 19.2808 17.0259C18.3538 18.0262 17.0599 18.6009 15.7006 18.6161H6.27264C3.35273 18.6161 1.38477 16.2407 1.38477 13.322V6.79412C1.38477 3.87545 3.35273 1.5 6.27264 1.5Z" fill="currentColor" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                    <path d="M16.6529 7.06104L12.3874 10.4953C11.5802 11.1282 10.4486 11.1282 9.64141 10.4953L5.33936 7.06104" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
                <h4 class="font-heading font-medium mb-2">Generate new messages</h4>
                <p class="text-sm leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #85

<section class="py-16 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mx-auto">
      <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
      </svg>
      <h3 class="font-heading text-2xl md:text-3xl text-white mt-2 mb-8">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum</h3>
      <div class="flex items-center mb-6 sm:mb-0">
        <img class="rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
        <div>
          <h4 class="font-heading font-medium text-white mb-1">Denny Bailey</h4>
          <span class="text-gray-300">CEO &amp; Founder</span>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #86

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4 mt-16 lg:mt-0 order-last lg:order-first">
        <img class="block max-w-md mx-auto" src="acros-assets/images/applications/double-mobile.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-md mx-auto">
          <span class="text-sm font-semibold uppercase">
            <span>Develop your</span>
            <span class="text-green-500">skills</span>
          </span>
          <h2 class="font-heading text-3xl sm:text-4xl mt-2 mb-6">See what this extension tool looks like</h2>
          <p class="max-w-xl mx-auto text-lg leading-8 mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
          <div class="flex items-center">
            <a class="inline-block mr-4" href="#">
              <img class="h-14 w-36" src="acros-assets/buttons/app-store.svg" alt="">
            </a>
            <a class="inline-block" href="#">
              <img class="h-14 w-36" src="acros-assets/buttons/google-play.svg" alt="">
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #87

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 -mb-12">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="max-w-sm">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-6">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="max-w-sm">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-6">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="max-w-sm">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-6">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="max-w-sm">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-6">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="max-w-sm">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-6">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-12">
        <div class="max-w-sm">
          <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
          <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
          <p class="leading-7 mb-6">There are many variations of passages of Lorem Ipsum available.</p>
          <a class="group inline-flex items-center font-heading font-medium" href="#">
            <span class="mr-4">Read more</span>
            <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #88

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-2xl px-4 mb-12">
      <h2 class="max-w-3xl font-heading text-3xl sm:text-4xl mb-6">The latest version of this excellent product is waiting to deploy</h2>
      <p class="leading-7">If you have ever wondered how to develop your brand, this is the place for you.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-12">
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="p-8 bg-white rounded max-w-sm mx-auto">
          <div class="flex items-center justify-center w-16 h-16 mb-10 bg-green-50 rounded">
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="font-heading text-lg font-medium mb-4">Change of access</h3>
          <p class="max-w-xxs leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="p-8 bg-white rounded max-w-sm mx-auto">
          <div class="flex items-center justify-center w-16 h-16 mb-10 bg-green-50 rounded">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.544 9.53998V10.7466C12.544 11.1299 12.6205 11.4514 12.7716 11.7019C12.9799 12.0476 13.322 12.2457 13.7103 12.2457C14.0908 12.2457 14.469 12.0604 14.8341 11.6953L18.8195 7.70984C19.6946 6.83478 19.6946 5.41095 18.8195 4.53589L14.8341 0.550415C14.469 0.18512 14.0908 0 13.7103 0C13.1297 0 12.544 0.463623 12.544 1.49908V2.59497C6.88564 2.92914 2.20144 7.27148 1.50527 12.9567C1.46627 13.2742 1.64681 13.5782 1.94436 13.6959C2.02859 13.7292 2.11629 13.7454 2.2029 13.7454C2.42226 13.7454 2.63503 13.6426 2.77053 13.4575C4.63784 10.9061 7.63601 9.38287 10.7905 9.38287C11.375 9.38287 11.9628 9.43561 12.544 9.53998Z" fill="#00CBA6"></path>
              <path d="M22.0433 10.3039C21.7457 10.1859 21.4063 10.2841 21.2171 10.5424C19.35 13.0937 16.3518 14.6169 13.1973 14.6169C12.6128 14.6169 12.025 14.5642 11.4439 14.4598V13.2531C11.4439 12.2177 10.8579 11.7541 10.2775 11.7541C9.89698 11.7541 9.51887 11.9394 9.15357 12.3047L5.1681 16.2899C4.29322 17.165 4.29322 18.5888 5.16828 19.4641L9.15357 23.4494C9.51887 23.8147 9.89698 23.9998 10.2775 23.9998C10.8579 23.9998 11.4439 23.5362 11.4439 22.5007V21.4048C17.1024 21.0706 21.7864 16.7283 22.4826 11.0432C22.5216 10.7256 22.341 10.4216 22.0433 10.3039Z" fill="#00CBA6"></path>
              <defs><rect width="24" height="24" fill="white"></rect></defs>
            </svg>
          </div>
          <h3 class="font-heading text-lg font-medium mb-4">Frequent authentication</h3>
          <p class="max-w-xxs leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-12">
        <div class="p-8 bg-white rounded max-w-sm mx-auto">
          <div class="flex items-center justify-center w-16 h-16 mb-10 bg-green-50 rounded">
            <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M6.27264 1.5H15.7006C17.0599 1.51525 18.3538 2.08993 19.2808 3.0902C20.2077 4.09048 20.6869 5.42903 20.6067 6.79412V13.322C20.6869 14.6871 20.2077 16.0256 19.2808 17.0259C18.3538 18.0262 17.0599 18.6009 15.7006 18.6161H6.27264C3.35273 18.6161 1.38477 16.2407 1.38477 13.322V6.79412C1.38477 3.87545 3.35273 1.5 6.27264 1.5Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M16.6529 7.06104L12.3874 10.4953C11.5802 11.1282 10.4486 11.1282 9.64141 10.4953L5.33936 7.06104" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="font-heading text-lg font-medium mb-4">List of regular users</h3>
          <p class="max-w-xxs leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #89

<section class="py-16 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-16">
      <div class="w-full xl:w-2/3 px-4 mb-8 xl:mb-0">
        <span class="text-sm font-semibold uppercase">projects</span>
        <h2 class="max-w-3xl font-heading text-3xl sm:text-4xl">Finish what you started today before you forget to do it.</h2>
      </div>
      <div class="w-full xl:w-auto ml-auto px-4 xl:text-right"><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Check all posts</a></div>
    </div>
    <div>
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-1/3 px-4 order-last lg:order-first">
          <img class="block lg:w-full h-88 object-cover rounded" src="acros-assets/images/portfolio/diagram-md.jpg" alt="">
        </div>
        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
          <div class="relative h-88 px-6 sm:pl-10 py-16">
            <img class="absolute top-0 left-0 w-full h-full object-cover rounded" src="acros-assets/images/portfolio/diagram-2-wide.jpg" alt="">
            <div class="relative max-w-xs">
              <div class="mb-2"><a class="inline-block font-heading hover:text-gray-800 mr-4" href="#">#people</a><a class="inline-block font-heading hover:text-gray-800" href="#">#family</a></div>
              <h3 class="font-heading text-3xl mb-4">Sheridan</h3>
              <p class="leading-7 mb-6">The best way to archive better skills is by challenging yourself with exciting projects.</p>
              <a class="group inline-flex items-center font-heading font-medium" href="#">
                <span class="mr-4">Check project</span>
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 group-hover:bg-green-600">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
          <div class="relative h-88 px-6 sm:pl-10 py-16">
            <img class="absolute top-0 left-0 w-full h-full object-cover rounded" src="acros-assets/images/portfolio/robot-wide.jpg" alt="">
            <div class="relative max-w-xs">
              <div class="mb-2"><a class="inline-block font-heading hover:text-gray-800 mr-4" href="#">#people</a><a class="inline-block font-heading hover:text-gray-800" href="#">#family</a></div>
              <h3 class="font-heading text-3xl mb-4">Neonic</h3>
              <p class="leading-7 mb-6">The best way to archive better skills is by challenging yourself with exciting projects.</p>
              <a class="group inline-flex items-center font-heading font-medium" href="#">
                <span class="mr-4">Check project</span>
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 group-hover:bg-green-600">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full lg:w-1/3 px-4">
          <img class="block lg:w-full h-88 object-cover rounded" src="acros-assets/images/portfolio/vr-md.jpg" alt="">
        </div>
      </div>
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 order-last lg:order-first">
          <img class="block lg:w-full h-88 object-cover rounded" src="acros-assets/images/portfolio/diagram-md.jpg" alt="">
        </div>
        <div class="w-full lg:w-2/3 px-4 mb-8 lg:mb-0">
          <div class="relative h-88 px-6 sm:pl-10 py-16">
            <img class="absolute top-0 left-0 w-full h-full object-cover rounded" src="acros-assets/images/portfolio/diagram-2-wide.jpg" alt="">
            <div class="relative max-w-xs">
              <div class="mb-2"><a class="inline-block font-heading hover:text-gray-800 mr-4" href="#">#people</a><a class="inline-block font-heading hover:text-gray-800" href="#">#family</a></div>
              <h3 class="font-heading text-3xl mb-4">Sheridan</h3>
              <p class="leading-7 mb-6">The best way to archive better skills is by challenging yourself with exciting projects.</p>
              <a class="group inline-flex items-center font-heading font-medium" href="#">
                <span class="mr-4">Check project</span>
                <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 group-hover:bg-green-600">
                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M2.5 6H9.5M9.5 6L6.5 3M9.5 6L6.5 9" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #90

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-16 lg:mb-0">
        <div class="max-w-md">
          <span class="text-sm font-semibold uppercase">
            <span>Feel free to</span>
            <span class="text-green-500">contact us</span>
          </span>
          <h4 class="font-heading text-3xl sm:text-4xl mt-2 mb-6">Let’s discuss about your needs</h4>
          <p class="text-lg leading-8 mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
          <div class="flex flex-wrap -mx-2">
            <div class="w-full sm:w-1/2 px-2 mb-8 sm:mb-0">
              <div class="flex items-center justify-center w-14 h-14 mb-6 bg-green-50 rounded">
                <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M8.94336 1.7393C4.70278 1.7249 1.25342 5.15089 1.23901 9.39148V9.41756C1.30918 11.4599 2.01436 13.4296 3.2564 15.0523C4.64995 16.9133 6.36008 18.5145 8.30858 19.7828C8.65807 20.0851 9.17648 20.0851 9.52597 19.7828C10.833 18.939 12.0381 17.9469 13.1173 16.8263C15.0042 14.835 16.5434 12.2871 16.5955 9.53061V9.44365C16.6099 5.20306 13.1839 1.75371 8.94336 1.7393ZM8.99988 13.0002C10.9329 13.0002 12.4999 11.4332 12.4999 9.50024C12.4999 7.56725 10.9329 6.00024 8.99988 6.00024C7.06688 6.00024 5.49988 7.56725 5.49988 9.50024C5.49988 11.4332 7.06688 13.0002 8.99988 13.0002Z" fill="#00CBA6"></path>
                  <path d="M1.23901 9.39148L0.489014 9.38893V9.39148H1.23901ZM8.94336 1.7393L8.94081 2.4893L8.94336 1.7393ZM1.23901 9.41756H0.489014C0.489014 9.42615 0.489161 9.43473 0.489456 9.44332L1.23901 9.41756ZM3.2564 15.0523L3.85677 14.6028L3.85198 14.5965L3.2564 15.0523ZM8.30858 19.7828L8.79923 19.2155C8.77348 19.1933 8.74625 19.1728 8.71771 19.1542L8.30858 19.7828ZM9.52597 19.7828L9.11919 19.1527C9.0898 19.1717 9.06177 19.1927 9.03532 19.2155L9.52597 19.7828ZM13.1173 16.8263L13.6575 17.3465L13.6617 17.3421L13.1173 16.8263ZM16.5955 9.53061L17.3454 9.5448C17.3455 9.54007 17.3455 9.53534 17.3455 9.53061H16.5955ZM16.5955 9.44365L15.8455 9.4411V9.44365H16.5955ZM1.98901 9.39403C2.00201 5.56765 5.11444 2.4763 8.94081 2.4893L8.94591 0.989307C4.29111 0.973493 0.504833 4.73413 0.489018 9.38893L1.98901 9.39403ZM1.98901 9.41756V9.39148H0.489014V9.41756H1.98901ZM3.85198 14.5965C2.70474 13.0976 2.05338 11.2783 1.98857 9.39181L0.489456 9.44332C0.564977 11.6415 1.32399 13.7615 2.66083 15.5082L3.85198 14.5965ZM8.71771 19.1542C6.84296 17.9339 5.19755 16.3933 3.85674 14.6028L2.65607 15.5019C4.10235 17.4333 5.87721 19.0951 7.89945 20.4114L8.71771 19.1542ZM9.03532 19.2155C8.96754 19.2742 8.86701 19.2742 8.79923 19.2155L7.81792 20.35C8.44914 20.896 9.38541 20.896 10.0166 20.35L9.03532 19.2155ZM12.577 16.306C11.538 17.385 10.3777 18.3402 9.11919 19.1527L9.93275 20.4129C11.2884 19.5377 12.5383 18.5088 13.6575 17.3465L12.577 16.306ZM15.8457 9.51641C15.7985 12.0068 14.3986 14.3837 12.5729 16.3104L13.6617 17.3421C15.6099 15.2862 17.2882 12.5674 17.3454 9.5448L15.8457 9.51641ZM15.8455 9.44365V9.53061H17.3455V9.44365H15.8455ZM8.94081 2.4893C12.7672 2.5023 15.8585 5.61473 15.8455 9.4411L17.3455 9.4462C17.3613 4.7914 13.6007 1.00512 8.94591 0.989307L8.94081 2.4893ZM11.7499 9.50024C11.7499 11.019 10.5187 12.2502 8.99988 12.2502V13.7502C11.3471 13.7502 13.2499 11.8475 13.2499 9.50024H11.7499ZM8.99988 6.75024C10.5187 6.75024 11.7499 7.98146 11.7499 9.50024H13.2499C13.2499 7.15303 11.3471 5.25024 8.99988 5.25024V6.75024ZM6.24988 9.50024C6.24988 7.98146 7.48109 6.75024 8.99988 6.75024V5.25024C6.65267 5.25024 4.74988 7.15303 4.74988 9.50024H6.24988ZM8.99988 12.2502C7.48109 12.2502 6.24988 11.019 6.24988 9.50024H4.74988C4.74988 11.8475 6.65267 13.7502 8.99988 13.7502V12.2502Z" fill="#00CBA6"></path>
                </svg>
              </div>
              <h5 class="font-heading font-medium mb-2">Address</h5>
              <p class="text-sm leading-6">1686, Geraldine Lane</p>
              <p class="text-sm leading-6">New York, NY 10013</p>
            </div>
            <div class="w-full sm:w-1/2 px-2">
              <div class="flex items-center justify-center w-14 h-14 mb-6 bg-green-50 rounded">
                <svg 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="M0.990332 2.87254C1.30665 2.34878 3.0495 0.443765 4.29322 0.501275C4.665 0.532084 4.99364 0.756989 5.26067 1.01784C5.87379 1.61656 7.62896 3.88101 7.72859 4.35753C7.97096 5.52621 6.57833 6.1999 7.00454 7.37783C8.09112 10.0366 9.96337 11.9088 12.6233 12.9943C13.8003 13.4205 14.474 12.0279 15.6428 12.2713C16.1183 12.3709 18.3839 14.126 18.9826 14.7391C19.2425 15.0051 19.4684 15.3347 19.4992 15.7065C19.5454 17.0159 17.5222 18.7833 17.1278 19.0092C16.1974 19.6747 14.9834 19.6634 13.5035 18.9753C9.37387 17.2572 2.77426 10.7822 1.02422 6.49669C0.354608 5.02505 0.308393 3.80296 0.990332 2.87254Z" fill="#00CBA6"></path>
                </svg>
              </div>
              <h5 class="font-heading font-medium mb-2">Contact info</h5>
              <p class="text-sm leading-6">hello@wireframes.org</p>
              <p class="text-sm leading-6">+7-843-672-431</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div>
          <h4 class="font-heading text-lg font-medium mb-4">Contact form</h4>
          <form action="#">
            <div class="mb-4">
              <label class="block text-sm leading-6 mb-2" for="">Name</label>
              <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="text" placeholder="Type your name">
            </div>
            <div class="mb-4">
              <label class="block text-sm leading-6 mb-2" for="">E-mail address</label>
              <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="email" placeholder="Type your e-mail">
            </div>
            <div class="mb-6">
              <label class="block text-sm leading-6 mb-2" for="">Message</label>
              <textarea class="block w-full h-40 p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none resize-none" type="text" placeholder="Type your message"></textarea>
            </div>
            <div class="text-right">
              <button class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 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" type="submit">Send now</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #91

<section class="py-16" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-12">
      <div class="w-full xl:w-2/3 px-4 mb-8 xl:mb-0">
        <div class="text-sm mb-2 font-semibold text-gray-900 uppercase">
          <span>Develop your</span>
          <span class="text-green-500">skills</span>
        </div>
        <h2 class="max-w-md font-heading text-3xl sm:text-4xl">See what this extension tool looks like</h2>
      </div>
      <div class="w-full xl:w-auto ml-auto px-4 xl:text-right"><a x-on:click.prevent="showContent = true" :class="{ 'hidden': showContent }" class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Check all posts</a></div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-12">
      <div class="w-full lg:w-1/2 px-4 mb-12">
        <div class="sm:flex">
          <img class="w-40 h-40 rounded mb-6 sm:mb-0 sm:mr-8" src="acros-assets/images/blog/work-man-160x160.jpg" alt="">
          <div>
            <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
            <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
            <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
            <a class="group inline-flex items-center font-heading font-medium" href="#">
              <span class="mr-4">Read more</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-12">
        <div class="sm:flex">
          <img class="w-40 h-40 rounded mb-6 sm:mb-0 sm:mr-8" src="acros-assets/images/blog/woman-160x160.jpg" alt="">
          <div>
            <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
            <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
            <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
            <a class="group inline-flex items-center font-heading font-medium" href="#">
              <span class="mr-4">Read more</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-12">
        <div class="sm:flex">
          <img class="w-40 h-40 rounded mb-6 sm:mb-0 sm:mr-8" src="acros-assets/images/blog/robot-160x160.jpg" alt="">
          <div>
            <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
            <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
            <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
            <a class="group inline-flex items-center font-heading font-medium" href="#">
              <span class="mr-4">Read more</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4 mb-12">
        <div class="sm:flex">
          <img class="w-40 h-40 rounded mb-6 sm:mb-0 sm:mr-8" src="acros-assets/images/blog/programming-160x160.jpg" alt="">
          <div>
            <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
            <h3 class="font-heading font-medium text-lg mt-2 mb-4">There are many variations of passages of Lorem Ipsum available</h3>
            <p class="leading-7 mb-4">There are many variations of passages of Lorem Ipsum available.</p>
            <a class="group inline-flex items-center font-heading font-medium" href="#">
              <span class="mr-4">Read more</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="hidden w-full lg:w-1/2 px-4 mb-12" :class="{ 'hidden': !showContent }">
        <div class="sm:flex">
          <img class="w-40 h-40 rounded mb-6 sm:mb-0 sm:mr-8" src="acros-assets/images/blog/work-man-160x160.jpg" alt="">
          <div>
            <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
            <h3 class="font-heading font-medium text-lg mt-2 mb-4">Unveiling the Layers of Lorem Ipsum</h3>
            <p class="leading-7 mb-4">Unveiling the Layers of Lorem Ipsum.</p>
            <a class="group inline-flex items-center font-heading font-medium" href="#">
              <span class="mr-4">Read more</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
      <div class="hidden w-full lg:w-1/2 px-4 mb-12" :class="{ 'hidden': !showContent }">
        <div class="sm:flex">
          <img class="w-40 h-40 rounded mb-6 sm:mb-0 sm:mr-8" src="acros-assets/images/blog/woman-160x160.jpg" alt="">
          <div>
            <span class="text-sm font-semibold uppercase text-gray-200">10 JUN 2022</span>
            <h3 class="font-heading font-medium text-lg mt-2 mb-4">Unveiling the Layers of Lorem Ipsum</h3>
            <p class="leading-7 mb-4">Unveiling the Layers of Lorem Ipsum.</p>
            <a class="group inline-flex items-center font-heading font-medium" href="#">
              <span class="mr-4">Read more</span>
              <div class="flex items-center justify-center w-10 h-10 rounded-full bg-green-50 group-hover:bg-green-100">
                <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.49992 4H8.49992M8.49992 4L5.49992 1M8.49992 4L5.49992 7" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #92

<section class="pt-32 pb-16 bg-gray-50 overflow-x-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex -mx-4">
      <div class="w-full sm:flex-shrink-0 sm:w-auto px-4">
        <div class="w-full max-w-sm mx-auto pt-18 pb-8 px-10 text-center bg-white rounded-md">
          <div class="-mt-32">
            <img class="block w-24 h-24 mb-8 mx-auto rounded-full" src="acros-assets/images/teams/man-1-medium-circle.png" alt="">
            <h4 class="font-heading leading-7 text-lg font-medium mb-2">Steven Johson</h4>
            <span class="leading-7 text-gray-300">CEO &amp; Founder</span>
            <p class="mt-4 mb-6 leading-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <div>
              <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
                </svg>
              </a>
              <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
                </svg>
              </a>
              <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                  <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                  </mask>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden sm:block flex-shrink-0 w-auto px-4 opacity-60 md:opacity-100">
        <div class="w-full max-w-sm mx-auto pt-18 pb-8 px-10 text-center bg-white rounded-md">
          <div class="-mt-32">
            <img class="block w-24 h-24 mb-8 mx-auto rounded-full" src="acros-assets/images/teams/woman-1-medium-circle.png" alt="">
            <h4 class="font-heading leading-7 text-lg font-medium mb-2">Justine Loren</h4>
            <span class="leading-7 text-gray-300">Assistant</span>
            <p class="mt-4 mb-6 leading-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <div>
              <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
                </svg>
              </a>
              <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
                </svg>
              </a>
              <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                  <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                  </mask>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden sm:block flex-shrink-0 w-auto px-4 opacity-60 xl:opacity-100">
        <div class="w-full max-w-sm mx-auto pt-18 pb-8 px-10 text-center bg-white rounded-md">
          <div class="-mt-32">
            <img class="block w-24 h-24 mb-8 mx-auto rounded-full" src="acros-assets/images/teams/man-2-medium-circle.png" alt="">
            <h4 class="font-heading leading-7 text-lg font-medium mb-2">Carl Axel</h4>
            <span class="leading-7 text-gray-300">Team Leader</span>
            <p class="mt-4 mb-6 leading-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <div>
              <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
                </svg>
              </a>
              <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
                </svg>
              </a>
              <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                  <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                  </mask>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden sm:block flex-shrink-0 w-auto px-4 opacity-60">
        <div class="w-full max-w-sm mx-auto pt-18 pb-8 px-10 text-center bg-white rounded-md">
          <div class="-mt-32">
            <img class="block w-24 h-24 mb-8 mx-auto rounded-full" src="acros-assets/images/teams/man-1-medium-circle.png" alt="">
            <h4 class="font-heading leading-7 text-lg font-medium mb-2">Steven Johson</h4>
            <span class="leading-7 text-gray-300">CEO &amp; Founder</span>
            <p class="mt-4 mb-6 leading-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <div>
              <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M10.8 0H1.2C0.54 0 0 0.54 0 1.2V10.8C0 11.46 0.54 12 1.2 12H10.8C11.46 12 12 11.46 12 10.8V1.2C12 0.54 11.46 0 10.8 0ZM3.6 10.2H1.8V4.8H3.6V10.2ZM2.7 3.78C2.1 3.78 1.62 3.3 1.62 2.7C1.62 2.1 2.1 1.62 2.7 1.62C3.3 1.62 3.78 2.1 3.78 2.7C3.78 3.3 3.3 3.78 2.7 3.78ZM10.2 10.2H8.4V7.02C8.4 6.54002 7.98 6.12 7.5 6.12C7.02 6.12 6.6 6.54002 6.6 7.02V10.2H4.8V4.8H6.6V5.52C6.9 5.04 7.56 4.68 8.1 4.68C9.24 4.68 10.2 5.64 10.2 6.78V10.2Z" fill="#00CBA6"></path>
                </svg>
              </a>
              <a class="inline-flex mr-2 items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="#00CBA6"></path>
                </svg>
              </a>
              <a class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-green-50 hover:bg-green-100" href="#">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="#00CBA6"></path>
                  <mask id="mask0_141_635" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
                  </mask>
                </svg>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #93

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-12">
      <div class="w-full xl:w-2/3 px-4 mb-8 xl:mb-0">
        <h2 class="max-w-3xl font-heading text-3xl sm:text-4xl mb-6">The latest version of this excellent product is waiting to deploy</h2>
        <p class="text-lg">If you have ever wondered how to develop your brand, this is the place for you.</p>
      </div>
      <div class="w-full xl:w-auto ml-auto px-4 xl:text-right"><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base border border-green-500 hover:border-green-600 rounded-sm" href="#">Learn more</a></div>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="max-w-md lg:max-w-none mx-auto p-8 bg-white">
          <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
            <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-white bg-gray-900 rounded-full">1</div>
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h3 class="max-w-xxs font-heading font-medium text-lg mb-4">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="leading-7">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="max-w-md lg:max-w-none mx-auto p-8 bg-white">
          <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
            <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-white bg-gray-900 rounded-full">2</div>
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h3 class="max-w-xxs font-heading font-medium text-lg mb-4">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="leading-7">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="max-w-md lg:max-w-none mx-auto p-8 bg-white">
          <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
            <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-white bg-gray-900 rounded-full">3</div>
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h3 class="max-w-xxs font-heading font-medium text-lg mb-4">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="leading-7">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="max-w-md lg:max-w-none mx-auto p-8 bg-white">
          <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
            <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-white bg-gray-900 rounded-full">4</div>
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h3 class="max-w-xxs font-heading font-medium text-lg mb-4">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="leading-7">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="max-w-md lg:max-w-none mx-auto p-8 bg-white">
          <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
            <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-white bg-gray-900 rounded-full">5</div>
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h3 class="max-w-xxs font-heading font-medium text-lg mb-4">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="leading-7">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="max-w-md lg:max-w-none mx-auto p-8 bg-white">
          <div class="relative flex items-center justify-center w-16 h-16 mb-8 bg-green-50 rounded">
            <div class="absolute bottom-0 right-0 -mb-3 -mr-3 flex items-center justify-center w-6 h-6 text-xs font-semibold text-white bg-gray-900 rounded-full">6</div>
            <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h3 class="max-w-xxs font-heading font-medium text-lg mb-4">Suspendisse interdum ullamcorper elit, at consequat libero.</h3>
            <p class="leading-7">Etiam pellentesque non nibh non pulvinar. Mauris posuere, tellus sit amet tempus vestibulum, erat augue imperdiet.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #94

<section class="relative py-16 bg-gray-50 overflow-hidden">
  <div class="hidden sm:block absolute top-0 left-0 h-full sm:w-40 md:w-64 mt-40 bg-gradient-white-left"></div>
  <div class="hidden sm:block absolute top-0 right-0 h-full sm:w-40 md:w-64 mt-40 bg-gradient-white-right"></div>
  <div class="container px-4 mx-auto">
    <div class="max-w-4xl mb-12">
      <div class="text-sm mb-2 font-semibold text-gray-900 uppercase">
        <span>Our</span>
        <span class="text-green-500">testimonials</span>
      </div>
      <h1 class="font-heading text-3xl sm:text-4xl">What people says about us</h1>
    </div>
    <div class="flex justify-center -mx-4 mb-8">
      <div class="w-full sm:flex-shrink-0 flex-shrink-0 max-w-lg px-4">
        <div class="py-6 px-12 bg-white rounded-md">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
          </svg>
          <h3 class="font-heading text-lg mt-2 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <div class="flex items-center mb-6 sm:mb-0">
            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h4 class="font-heading font-medium mb-1">Denny Bailey</h4>
              <span class="text-gray-300">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden sm:block flex-shrink-0 max-w-lg px-4">
        <div class="py-6 px-12 bg-white rounded-md">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
          </svg>
          <h3 class="font-heading text-lg mt-2 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <div class="flex items-center mb-6 sm:mb-0">
            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h4 class="font-heading font-medium mb-1">Denny Bailey</h4>
              <span class="text-gray-300">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden md:block flex-shrink-0 max-w-lg px-4">
        <div class="py-6 px-12 bg-white rounded-md">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
          </svg>
          <h3 class="font-heading text-lg mt-2 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <div class="flex items-center mb-6 sm:mb-0">
            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h4 class="font-heading font-medium mb-1">Denny Bailey</h4>
              <span class="text-gray-300">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex justify-center -mx-4">
      <div class="w-full sm:flex-shrink-0 max-w-lg px-4">
        <div class="py-6 px-12 bg-white rounded-md">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
          </svg>
          <h3 class="font-heading text-lg mt-2 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <div class="flex items-center mb-6 sm:mb-0">
            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h4 class="font-heading font-medium mb-1">Denny Bailey</h4>
              <span class="text-gray-300">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden sm:block flex-shrink-0 max-w-lg px-4">
        <div class="py-6 px-12 bg-white rounded-md">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
          </svg>
          <h3 class="font-heading text-lg mt-2 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <div class="flex items-center mb-6 sm:mb-0">
            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h4 class="font-heading font-medium mb-1">Denny Bailey</h4>
              <span class="text-gray-300">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden sm:block flex-shrink-0 max-w-lg px-4">
        <div class="py-6 px-12 bg-white rounded-md">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
          </svg>
          <h3 class="font-heading text-lg mt-2 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <div class="flex items-center mb-6 sm:mb-0">
            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h4 class="font-heading font-medium mb-1">Denny Bailey</h4>
              <span class="text-gray-300">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
      </div>
      <div class="hidden md:block flex-shrink-0 max-w-lg px-4">
        <div class="py-6 px-12 bg-white rounded-md">
          <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
          </svg>
          <h3 class="font-heading text-lg mt-2 mb-4">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
          <div class="flex items-center mb-6 sm:mb-0">
            <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
            <div>
              <h4 class="font-heading font-medium mb-1">Denny Bailey</h4>
              <span class="text-gray-300">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #95

<section class="relative py-16 bg-gray-50">
  <img class="absolute top-0 left-0 w-full h-80" src="acros-assets/images/contacts/dark-bg.jpg" alt="">
  <div class="relative container px-4 mx-auto">
    <span class="text-sm font-semibold uppercase">
      <span class="text-white">Feel free to</span>
      <span class="text-green-500">contact us</span>
    </span>
    <h4 class="max-w-sm font-heading text-3xl sm:text-4xl text-white mt-2 mb-12">Let’s discuss about your needs</h4>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="h-full max-w-sm mx-auto p-8 bg-white rounded">
          <div class="max-w-xxs mx-auto text-center">
            <h5 class="font-heading font-medium text-lg mb-8">Address</h5>
            <div class="flex items-center justify-center w-14 h-14 mx-auto mb-6 bg-green-50 rounded">
              <svg width="18" height="21" viewBox="0 0 18 21" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M8.94336 1.7393C4.70278 1.7249 1.25342 5.15089 1.23901 9.39148V9.41756C1.30918 11.4599 2.01436 13.4296 3.2564 15.0523C4.64995 16.9133 6.36008 18.5145 8.30858 19.7828C8.65807 20.0851 9.17648 20.0851 9.52597 19.7828C10.833 18.939 12.0381 17.9469 13.1173 16.8263C15.0042 14.835 16.5434 12.2871 16.5955 9.53061V9.44365C16.6099 5.20306 13.1839 1.75371 8.94336 1.7393ZM8.99988 13.0002C10.9329 13.0002 12.4999 11.4332 12.4999 9.50024C12.4999 7.56725 10.9329 6.00024 8.99988 6.00024C7.06688 6.00024 5.49988 7.56725 5.49988 9.50024C5.49988 11.4332 7.06688 13.0002 8.99988 13.0002Z" fill="#00CBA6"></path>
                <path d="M1.23901 9.39148L0.489014 9.38893V9.39148H1.23901ZM8.94336 1.7393L8.94081 2.4893L8.94336 1.7393ZM1.23901 9.41756H0.489014C0.489014 9.42615 0.489161 9.43473 0.489456 9.44332L1.23901 9.41756ZM3.2564 15.0523L3.85677 14.6028L3.85198 14.5965L3.2564 15.0523ZM8.30858 19.7828L8.79923 19.2155C8.77348 19.1933 8.74625 19.1728 8.71771 19.1542L8.30858 19.7828ZM9.52597 19.7828L9.11919 19.1527C9.0898 19.1717 9.06177 19.1927 9.03532 19.2155L9.52597 19.7828ZM13.1173 16.8263L13.6575 17.3465L13.6617 17.3421L13.1173 16.8263ZM16.5955 9.53061L17.3454 9.5448C17.3455 9.54007 17.3455 9.53534 17.3455 9.53061H16.5955ZM16.5955 9.44365L15.8455 9.4411V9.44365H16.5955ZM1.98901 9.39403C2.00201 5.56765 5.11444 2.4763 8.94081 2.4893L8.94591 0.989307C4.29111 0.973493 0.504833 4.73413 0.489018 9.38893L1.98901 9.39403ZM1.98901 9.41756V9.39148H0.489014V9.41756H1.98901ZM3.85198 14.5965C2.70474 13.0976 2.05338 11.2783 1.98857 9.39181L0.489456 9.44332C0.564977 11.6415 1.32399 13.7615 2.66083 15.5082L3.85198 14.5965ZM8.71771 19.1542C6.84296 17.9339 5.19755 16.3933 3.85674 14.6028L2.65607 15.5019C4.10235 17.4333 5.87721 19.0951 7.89945 20.4114L8.71771 19.1542ZM9.03532 19.2155C8.96754 19.2742 8.86701 19.2742 8.79923 19.2155L7.81792 20.35C8.44914 20.896 9.38541 20.896 10.0166 20.35L9.03532 19.2155ZM12.577 16.306C11.538 17.385 10.3777 18.3402 9.11919 19.1527L9.93275 20.4129C11.2884 19.5377 12.5383 18.5088 13.6575 17.3465L12.577 16.306ZM15.8457 9.51641C15.7985 12.0068 14.3986 14.3837 12.5729 16.3104L13.6617 17.3421C15.6099 15.2862 17.2882 12.5674 17.3454 9.5448L15.8457 9.51641ZM15.8455 9.44365V9.53061H17.3455V9.44365H15.8455ZM8.94081 2.4893C12.7672 2.5023 15.8585 5.61473 15.8455 9.4411L17.3455 9.4462C17.3613 4.7914 13.6007 1.00512 8.94591 0.989307L8.94081 2.4893ZM11.7499 9.50024C11.7499 11.019 10.5187 12.2502 8.99988 12.2502V13.7502C11.3471 13.7502 13.2499 11.8475 13.2499 9.50024H11.7499ZM8.99988 6.75024C10.5187 6.75024 11.7499 7.98146 11.7499 9.50024H13.2499C13.2499 7.15303 11.3471 5.25024 8.99988 5.25024V6.75024ZM6.24988 9.50024C6.24988 7.98146 7.48109 6.75024 8.99988 6.75024V5.25024C6.65267 5.25024 4.74988 7.15303 4.74988 9.50024H6.24988ZM8.99988 12.2502C7.48109 12.2502 6.24988 11.019 6.24988 9.50024H4.74988C4.74988 11.8475 6.65267 13.7502 8.99988 13.7502V12.2502Z" fill="#00CBA6"></path>
              </svg>
            </div>
            <p class="leading-6">1686, Geraldine Lane</p>
            <p class="leading-6">New York, NY 10013</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="h-full max-w-sm mx-auto p-8 bg-white rounded">
          <div class="max-w-xxs mx-auto text-center">
            <h5 class="font-heading font-medium text-lg mb-8">Contact info</h5>
            <div class="flex items-center justify-center w-14 h-14 mx-auto mb-6 bg-green-50 rounded">
              <svg 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="M0.990332 2.87254C1.30665 2.34878 3.0495 0.443765 4.29322 0.501275C4.665 0.532084 4.99364 0.756989 5.26067 1.01784C5.87379 1.61656 7.62896 3.88101 7.72859 4.35753C7.97096 5.52621 6.57833 6.1999 7.00454 7.37783C8.09112 10.0366 9.96337 11.9088 12.6233 12.9943C13.8003 13.4205 14.474 12.0279 15.6428 12.2713C16.1183 12.3709 18.3839 14.126 18.9826 14.7391C19.2425 15.0051 19.4684 15.3347 19.4992 15.7065C19.5454 17.0159 17.5222 18.7833 17.1278 19.0092C16.1974 19.6747 14.9834 19.6634 13.5035 18.9753C9.37387 17.2572 2.77426 10.7822 1.02422 6.49669C0.354608 5.02505 0.308393 3.80296 0.990332 2.87254Z" fill="#00CBA6"></path>
              </svg>
            </div>
            <p class="leading-6">1686, Geraldine Lane</p>
            <p class="leading-6">New York, NY 10013</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4">
        <div class="h-full max-w-sm mx-auto p-8 bg-white rounded">
          <div class="max-w-xxs mx-auto text-center">
            <h5 class="font-heading font-medium text-lg mb-8">Social media</h5>
            <div class="flex mb-6 items-center justify-center">
              <a class="inline-flex mr-4 items-center justify-center w-14 h-14 border border-green-500 hover:border-green-600 rounded-full" href="#">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7275V12.7662H16.3583L16.7669 9.66268H13.6349V7.6815C13.6349 6.78323 13.8882 6.17107 15.203 6.17107L16.8771 6.1704V3.39446C16.5876 3.35756 15.5938 3.27295 14.4371 3.27295C12.0217 3.27295 10.3681 4.71903 10.3681 7.37413V9.66268H7.63647V12.7662H10.3681V20.7275H13.6349Z" fill="#00CBA6"></path>
                  <mask id="mask0_149_2742" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7275V12.7662H16.3583L16.7669 9.66268H13.6349V7.6815C13.6349 6.78323 13.8882 6.17107 15.203 6.17107L16.8771 6.1704V3.39446C16.5876 3.35756 15.5938 3.27295 14.4371 3.27295C12.0217 3.27295 10.3681 4.71903 10.3681 7.37413V9.66268H7.63647V12.7662H10.3681V20.7275H13.6349Z" fill="white"></path>
                  </mask>
                </svg>
              </a>
              <a class="inline-flex mr-4 items-center justify-center w-14 h-14 border border-green-500 hover:border-green-600 rounded-full" href="#">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.1461C21.1356 6.44856 20.4032 6.65368 19.6336 6.74525C20.4194 6.27474 21.0208 5.52844 21.3059 4.64189C20.5689 5.07762 19.7553 5.39401 18.8885 5.56553C18.1943 4.82501 17.2069 4.36377 16.1118 4.36377C14.0108 4.36377 12.3072 6.06731 12.3072 8.16719C12.3072 8.46501 12.3408 8.75589 12.4057 9.03404C9.24434 8.87525 6.44104 7.36062 4.56483 5.05907C4.23686 5.61998 4.05028 6.27356 4.05028 6.97122C4.05028 8.29119 4.72243 9.45586 5.74225 10.1373C5.11877 10.1164 4.53237 9.94489 4.01901 9.6598V9.70732C4.01901 11.5499 5.33086 13.0877 7.07031 13.4377C6.75161 13.5235 6.41555 13.571 6.06789 13.571C5.82222 13.571 5.58464 13.5467 5.35171 13.5003C5.8361 15.0126 7.24067 16.1124 8.90483 16.1426C7.6034 17.1624 5.96243 17.7685 4.1801 17.7685C3.87301 17.7685 3.57052 17.7499 3.27271 17.7163C4.95655 18.7976 6.95561 19.428 9.10416 19.428C16.1026 19.428 19.928 13.6313 19.928 8.6041L19.9153 8.11159C20.6627 7.57847 21.3094 6.90865 21.8181 6.1461Z" fill="#00CBA6"></path>
                  <mask id="mask0_149_2746" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.1461C21.1356 6.44856 20.4032 6.65368 19.6336 6.74525C20.4194 6.27474 21.0208 5.52844 21.3059 4.64189C20.5689 5.07762 19.7553 5.39401 18.8885 5.56553C18.1943 4.82501 17.2069 4.36377 16.1118 4.36377C14.0108 4.36377 12.3072 6.06731 12.3072 8.16719C12.3072 8.46501 12.3408 8.75589 12.4057 9.03404C9.24434 8.87525 6.44104 7.36062 4.56483 5.05907C4.23686 5.61998 4.05028 6.27356 4.05028 6.97122C4.05028 8.29119 4.72243 9.45586 5.74225 10.1373C5.11877 10.1164 4.53237 9.94489 4.01901 9.6598V9.70732C4.01901 11.5499 5.33086 13.0877 7.07031 13.4377C6.75161 13.5235 6.41555 13.571 6.06789 13.571C5.82222 13.571 5.58464 13.5467 5.35171 13.5003C5.8361 15.0126 7.24067 16.1124 8.90483 16.1426C7.6034 17.1624 5.96243 17.7685 4.1801 17.7685C3.87301 17.7685 3.57052 17.7499 3.27271 17.7163C4.95655 18.7976 6.95561 19.428 9.10416 19.428C16.1026 19.428 19.928 13.6313 19.928 8.6041L19.9153 8.11159C20.6627 7.57847 21.3094 6.90865 21.8181 6.1461Z" fill="white"></path>
                  </mask>
                </svg>
              </a>
              <a class="inline-flex mr-4 items-center justify-center w-14 h-14 border border-green-500 hover:border-green-600 rounded-full" href="#">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M7.6007 2.18164H16.3992C19.3874 2.18164 21.8184 4.61264 21.8182 7.60057V16.3991C21.8182 19.387 19.3874 21.818 16.3992 21.818H7.6007C4.61276 21.818 2.18188 19.3871 2.18188 16.3991V7.60057C2.18188 4.61264 4.61276 2.18164 7.6007 2.18164ZM16.3993 20.0758C18.4267 20.0758 20.0761 18.4265 20.0761 16.3991H20.076V7.60057C20.076 5.5733 18.4266 3.92387 16.3992 3.92387H7.6007C5.57343 3.92387 3.92412 5.5733 3.92412 7.60057V16.3991C3.92412 18.4265 5.57343 20.0759 7.6007 20.0758H16.3993ZM6.85721 11.9999C6.85721 9.16406 9.16425 6.85697 12.0001 6.85697C14.8359 6.85697 17.1429 9.16406 17.1429 11.9999C17.1429 14.8357 14.8359 17.1427 12.0001 17.1427C9.16425 17.1427 6.85721 14.8357 6.85721 11.9999ZM8.62805 11.9998C8.62805 13.8591 10.1408 15.3717 12.0001 15.3717C13.8593 15.3717 15.3721 13.8591 15.3721 11.9998C15.3721 10.1404 13.8594 8.62772 12.0001 8.62772C10.1407 8.62772 8.62805 10.1404 8.62805 11.9998Z" fill="#00CBA6"></path>
                  <mask id="mask0_149_2749" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="20" height="20">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M7.6007 2.18164H16.3992C19.3874 2.18164 21.8184 4.61264 21.8182 7.60057V16.3991C21.8182 19.387 19.3874 21.818 16.3992 21.818H7.6007C4.61276 21.818 2.18188 19.3871 2.18188 16.3991V7.60057C2.18188 4.61264 4.61276 2.18164 7.6007 2.18164ZM16.3993 20.0758C18.4267 20.0758 20.0761 18.4265 20.0761 16.3991H20.076V7.60057C20.076 5.5733 18.4266 3.92387 16.3992 3.92387H7.6007C5.57343 3.92387 3.92412 5.5733 3.92412 7.60057V16.3991C3.92412 18.4265 5.57343 20.0759 7.6007 20.0758H16.3993ZM6.85721 11.9999C6.85721 9.16406 9.16425 6.85697 12.0001 6.85697C14.8359 6.85697 17.1429 9.16406 17.1429 11.9999C17.1429 14.8357 14.8359 17.1427 12.0001 17.1427C9.16425 17.1427 6.85721 14.8357 6.85721 11.9999ZM8.62805 11.9998C8.62805 13.8591 10.1408 15.3717 12.0001 15.3717C13.8593 15.3717 15.3721 13.8591 15.3721 11.9998C15.3721 10.1404 13.8594 8.62772 12.0001 8.62772C10.1407 8.62772 8.62805 10.1404 8.62805 11.9998Z" fill="white"></path>
                  </mask>
                </svg>
              </a>
            </div>
            <p class="leading-6">Stay in touch!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #96

<section class="py-14 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4 pb-16">
      <div class="w-full lg:w-auto px-4 mb-8 lg:mb-0">
        <ul class="sm:flex flex-wrap items-center -mb-2">
          <li class="mb-2 sm:mr-6 lg:mr-16"><a class="font-heading text-white hover:text-gray-100" href="#">About</a></li>
          <li class="mb-2 sm:mr-6 lg:mr-16"><a class="font-heading text-white hover:text-gray-100" href="#">Company</a></li>
          <li class="mb-2 sm:mr-6 lg:mr-16"><a class="font-heading text-white hover:text-gray-100" href="#">Services</a></li>
          <li class="mb-2"><a class="font-heading text-white hover:text-gray-100" href="#">Testimonials</a></li>
        </ul>
      </div>
      <div class="w-full lg:w-auto px-4">
        <div class="flex flex-wrap items-center -mb-2">
          <a class="flex items-center justify-center w-12 h-12 mr-2 mb-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08979 13.8181V8.51062H10.9054L11.1778 6.44158H9.08979V5.1208C9.08979 4.52195 9.25864 4.11384 10.1352 4.11384L11.2512 4.11339V2.26277C11.0582 2.23817 10.3957 2.18176 9.62456 2.18176C8.01431 2.18176 6.9119 3.14582 6.9119 4.91588V6.44158H5.09082V8.51062H6.9119V13.8181H9.08979Z" fill="white"></path>
              <mask id="mask0_37_110" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="5" y="2" width="7" height="12">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.08979 13.8181V8.51062H10.9054L11.1778 6.44158H9.08979V5.1208C9.08979 4.52195 9.25864 4.11384 10.1352 4.11384L11.2512 4.11339V2.26277C11.0582 2.23817 10.3957 2.18176 9.62456 2.18176C8.01431 2.18176 6.9119 3.14582 6.9119 4.91588V6.44158H5.09082V8.51062H6.9119V13.8181H9.08979Z" fill="white"></path>
              </mask>
            </svg>
          </a>
          <a class="flex items-center justify-center w-12 h-12 mr-2 mb-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="white"></path>
              <mask id="mask0_37_113" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="13" height="11">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5455 4.09728C14.0905 4.29892 13.6022 4.43566 13.0892 4.49671C13.613 4.18304 14.014 3.6855 14.204 3.09447C13.7127 3.38496 13.1703 3.59589 12.5924 3.71023C12.1296 3.21655 11.4714 2.90906 10.7413 2.90906C9.34059 2.90906 8.2049 4.04475 8.2049 5.44467C8.2049 5.64322 8.2273 5.83714 8.27057 6.02257C6.16298 5.91671 4.29411 4.90696 3.0433 3.37259C2.82465 3.74653 2.70027 4.18225 2.70027 4.64736C2.70027 5.52734 3.14837 6.30379 3.82825 6.75805C3.41259 6.74415 3.02166 6.62981 2.67942 6.43974V6.47142C2.67942 7.69983 3.55399 8.72504 4.71362 8.95837C4.50116 9.01554 4.27712 9.04722 4.04534 9.04722C3.88156 9.04722 3.72318 9.031 3.56788 9.00009C3.89081 10.0083 4.8272 10.7415 5.93663 10.7616C5.06902 11.4415 3.97504 11.8455 2.78681 11.8455C2.58209 11.8455 2.38043 11.8332 2.18188 11.8108C3.30445 12.5316 4.63716 12.9519 6.06952 12.9519C10.7351 12.9519 13.2854 9.0874 13.2854 5.73595L13.2769 5.4076C13.7752 5.05219 14.2063 4.60564 14.5455 4.09728Z" fill="white"></path>
              </mask>
            </svg>
          </a>
          <a class="flex items-center justify-center w-12 h-12 mr-2 mb-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
              <mask id="mask0_37_116" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="1" y="1" width="14" height="14">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M5.06713 1.45459H10.9328C12.9249 1.45459 14.5456 3.07525 14.5455 5.06721V10.9329C14.5455 12.9248 12.9249 14.5455 10.9328 14.5455H5.06713C3.07518 14.5455 1.45459 12.9249 1.45459 10.9329V5.06721C1.45459 3.07525 3.07518 1.45459 5.06713 1.45459ZM10.9329 13.384C12.2845 13.384 13.3841 12.2845 13.3841 10.9329H13.384V5.06721C13.384 3.7157 12.2844 2.61608 10.9328 2.61608H5.06713C3.71562 2.61608 2.61608 3.7157 2.61608 5.06721V10.9329C2.61608 12.2845 3.71562 13.3841 5.06713 13.384H10.9329ZM4.57147 8.00012C4.57147 6.10954 6.1095 4.57147 8.00004 4.57147C9.89059 4.57147 11.4286 6.10954 11.4286 8.00012C11.4286 9.89063 9.89059 11.4286 8.00004 11.4286C6.1095 11.4286 4.57147 9.89063 4.57147 8.00012ZM5.75203 8.00004C5.75203 9.23958 6.76054 10.248 8.00005 10.248C9.23955 10.248 10.2481 9.23958 10.2481 8.00004C10.2481 6.76043 9.23963 5.75198 8.00005 5.75198C6.76046 5.75198 5.75203 6.76043 5.75203 8.00004Z" fill="white"></path>
              </mask>
            </svg>
          </a>
          <a class="flex items-center justify-center w-12 h-12 mr-2 mb-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8 2C4.685 2 2 4.75474 2 8.15226C2 10.871 3.719 13.1765 6.1025 13.9894C6.4025 14.0473 6.5125 13.8569 6.5125 13.6936C6.5125 13.5475 6.5075 13.1604 6.505 12.6475C4.836 13.0184 4.484 11.8221 4.484 11.8221C4.211 11.112 3.8165 10.9221 3.8165 10.9221C3.273 10.5407 3.8585 10.5486 3.8585 10.5486C4.461 10.5913 4.7775 11.1825 4.7775 11.1825C5.3125 12.1232 6.182 11.8513 6.525 11.6943C6.579 11.2962 6.7335 11.0254 6.905 10.8715C5.5725 10.7176 4.172 10.1886 4.172 7.83139C4.172 7.15992 4.4045 6.61106 4.7895 6.18063C4.722 6.02516 4.5195 5.3996 4.842 4.55231C4.842 4.55231 5.3445 4.38744 6.492 5.18308C6.972 5.04639 7.482 4.97856 7.992 4.97543C8.502 4.97856 9.012 5.04639 9.492 5.18308C10.632 4.38744 11.1345 4.55231 11.1345 4.55231C11.457 5.3996 11.2545 6.02516 11.1945 6.18063C11.577 6.61106 11.8095 7.15992 11.8095 7.83139C11.8095 10.1948 10.407 10.715 9.072 10.8663C9.282 11.051 9.477 11.4282 9.477 12.0047C9.477 12.828 9.4695 13.4896 9.4695 13.6894C9.4695 13.8506 9.5745 14.0431 9.882 13.9816C12.2825 13.1739 14 10.8668 14 8.15226C14 4.75474 11.3135 2 8 2V2Z" fill="white"></path>
            </svg>
          </a>
          <a class="flex items-center justify-center w-12 h-12 mb-2 rounded-full bg-gray-800 hover:bg-gray-700" href="#">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12.8 2H3.2C2.54 2 2 2.54 2 3.2V12.8C2 13.46 2.54 14 3.2 14H12.8C13.46 14 14 13.46 14 12.8V3.2C14 2.54 13.46 2 12.8 2ZM5.6 12.2H3.8V6.8H5.6V12.2ZM4.7 5.78C4.1 5.78 3.62 5.3 3.62 4.7C3.62 4.1 4.1 3.62 4.7 3.62C5.3 3.62 5.78 4.1 5.78 4.7C5.78 5.3 5.3 5.78 4.7 5.78ZM12.2 12.2H10.4V9.02C10.4 8.54002 9.98 8.12 9.5 8.12C9.02 8.12 8.6 8.54002 8.6 9.02V12.2H6.8V6.8H8.6V7.52C8.9 7.04 9.56 6.68 10.1 6.68C11.24 6.68 12.2 7.64 12.2 8.78V12.2Z" fill="white"></path>
            </svg>
          </a>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap items-center justify-between pt-14 border-t border-gray-600">
      <div class="w-full sm:w-auto">
        <span class="mt-6 sm:mt-0 text-gray-300">2022 © Shuffle</span>
      </div>
      <div class="w-full sm:w-auto"><a class="text-gray-300" href="#">Privacy Policy</a></div>
    </div>
  </div>
</section>

Tailwind Component #97

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mb-12">
      <span class="text-sm font-semibold uppercase">Pricing</span>
      <h2 class="font-heading text-3xl sm:text-4xl">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
    </div>
    <div class="max-w-md lg:max-w-4xl xl:max-w-5xl px-4 mx-auto">
      <div class="pt-8 pb-7 px-6 sm:px-8 bg-white rounded-md">
        <div class="flex flex-wrap justify-between -mx-4">
          <div class="w-full lg:w-1/6 px-4 mb-8 lg:mb-0">
            <h4 class="font-heading text-3xl">Free</h4>
          </div>
          <div class="w-full lg:w-auto px-4 mb-8 lg:mb-0">
            <ul>
              <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">
                  <circle cx="10" cy="10" r="9" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5"></circle>
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </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">
                  <circle cx="10" cy="10" r="9" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5"></circle>
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </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">
                  <circle cx="10" cy="10" r="9" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5"></circle>
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </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">
                  <circle cx="10" cy="10" r="9" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5"></circle>
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="ml-4 text-sm">500 team members</span>
              </li>
            </ul>
          </div>
          <div class="w-full lg:w-auto px-4">
            <div class="p-4 text-center bg-green-50 rounded">
              <div class="flex items-start justify-center mb-2">
                <span class="font-heading font-medium text-lg mr-1">$</span>
                <span class="font-heading font-medium text-2xl leading-10">0</span>
              </div>
              <span>per month</span>
              <a class="block py-4 px-12 mt-4 text-center font-heading font-medium text-base text-green-500 bg-white hover:bg-gray-50 rounded-sm" href="#">Get started</a>
            </div>
          </div>
        </div>
      </div>
      <div class="relative -mx-4 xl:-mx-8 pt-8 pb-7 px-12 xl:px-16 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="flex flex-wrap justify-between -mx-4">
          <div class="w-full lg:w-1/6 px-4 mb-8 lg:mb-0">
            <h4 class="font-heading text-white text-3xl">Pro</h4>
          </div>
          <div class="w-full lg:w-auto px-4 mb-8 lg:mb-0">
            <ul>
              <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">
                  <circle cx="10" cy="10" r="9" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5"></circle>
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </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">
                  <circle cx="10" cy="10" r="9" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5"></circle>
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </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">
                  <circle cx="10" cy="10" r="9" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5"></circle>
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </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">
                  <circle cx="10" cy="10" r="9" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5"></circle>
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="ml-4 text-white text-sm">500 team members</span>
              </li>
            </ul>
          </div>
          <div class="w-full lg:w-auto px-4">
            <div class="p-4 text-center bg-white rounded">
              <div class="flex items-start justify-center mb-2">
                <span class="font-heading font-medium text-lg mr-1">$</span>
                <span class="font-heading font-medium text-2xl leading-10">14,99</span>
              </div>
              <span>per month</span>
              <a class="block py-4 px-9 mt-4 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="#">Try it for free</a>
            </div>
          </div>
        </div>
      </div>
      <div class="pt-8 pb-7 px-6 sm:px-8 bg-white rounded-md">
        <div class="flex flex-wrap justify-between -mx-4">
          <div class="w-full lg:w-1/6 px-4 mb-8 lg:mb-0">
            <h4 class="font-heading text-3xl">Free</h4>
          </div>
          <div class="w-full lg:w-auto px-4 mb-8 lg:mb-0">
            <ul>
              <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">
                  <circle cx="10" cy="10" r="9" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5"></circle>
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </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">
                  <circle cx="10" cy="10" r="9" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5"></circle>
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </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">
                  <circle cx="10" cy="10" r="9" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5"></circle>
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </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">
                  <circle cx="10" cy="10" r="9" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5"></circle>
                  <path d="M5.5 10.5L8.5 13.5L14.5 7" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
                <span class="ml-4 text-sm">500 team members</span>
              </li>
            </ul>
          </div>
          <div class="w-full lg:w-auto px-4">
            <div class="p-4 text-center bg-green-50 rounded">
              <div class="flex items-start justify-center mb-2">
                <span class="font-heading font-medium text-lg mr-1">$</span>
                <span class="font-heading font-medium text-2xl leading-10">0</span>
              </div>
              <span>per month</span>
              <a class="block py-4 px-12 mt-4 text-center font-heading font-medium text-base text-green-500 bg-white hover:bg-gray-50 rounded-sm" href="#">Get started</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #98

<section class="py-16 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mb-12">
      <span class="text-sm font-semibold uppercase text-white">FAQ</span>
      <h2 class="font-heading text-3xl sm:text-4xl text-white mt-2 mb-6">Questions &amp; Answers</h2>
      <p class="text-lg leading-8 text-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="p-6 bg-gray-800 rounded-md">
          <div class="flex items-center justify-center w-14 h-14 mb-6 bg-gray-900 rounded-sm">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3345 2.75024H7.66549C4.64449 2.75024 2.75049 4.88924 2.75049 7.91624V16.0842C2.75049 19.1112 4.63549 21.2502 7.66549 21.2502H16.3335C19.3645 21.2502 21.2505 19.1112 21.2505 16.0842V7.91624C21.2505 4.88924 19.3645 2.75024 16.3345 2.75024Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6925 12.0002C10.6925 13.0222 9.8635 13.8522 8.8405 13.8522C7.8185 13.8522 6.9895 13.0222 6.9895 12.0002C6.9895 10.9782 7.8185 10.1482 8.8405 10.1482C9.8635 10.1482 10.6925 10.9782 10.6925 12.0002Z" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M10.6924 12.0002H17.0104V13.8522" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M14.1816 13.8518V11.9998" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="max-w-xxs font-heading font-medium text-lg text-white mb-4">Mauris vitae ex ut lectus cursus ornare?</h3>
          <ul>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Etiam pellentesque non nibh</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Mauris posuere</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Tellus sit amet tempus vestibulum</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Erat augue imperdiet neque</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="p-6 bg-gray-800 rounded-md">
          <div class="flex items-center justify-center w-14 h-14 mb-6 bg-gray-900 rounded-sm">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M12.02 2C6.21 2 2 6.74612 2 12.015C2 13.6975 2.49 15.4291 3.35 17.0115C3.51 17.2729 3.53 17.6024 3.42 17.9139L2.75 20.1572C2.6 20.698 3.06 21.0976 3.57 20.9374L5.59 20.3375C6.14 20.1572 6.57 20.3866 7.08 20.698C8.54 21.5583 10.36 22 12 22C16.96 22 22 18.1642 22 11.985C22 6.65598 17.7 2 12.02 2Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.69518 13.3909C7.05042 13.3909 6.52661 12.8671 6.52661 12.2223C6.52661 11.5795 7.05042 11.0557 7.69518 11.0557C8.33994 11.0557 8.86375 11.5795 8.86375 12.2223C8.86375 12.8671 8.33994 13.3909 7.69518 13.3909ZM12.238 13.3909C11.5933 13.3909 11.0695 12.8671 11.0695 12.2223C11.0695 11.5795 11.5933 11.0557 12.238 11.0557C12.8828 11.0557 13.4066 11.5795 13.4066 12.2223C13.4066 12.8671 12.8828 13.3909 12.238 13.3909ZM15.6124 12.2223C15.6124 12.8671 16.1362 13.3909 16.781 13.3909C17.4258 13.3909 17.9496 12.8671 17.9496 12.2223C17.9496 11.5795 17.4258 11.0557 16.781 11.0557C16.1362 11.0557 15.6124 11.5795 15.6124 12.2223Z" fill="#2B3031"></path>
            </svg>
          </div>
          <h3 class="max-w-xxs font-heading font-medium text-lg text-white mb-4">All the Lorem Ipsum generators on the Internet tend</h3>
          <ul>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Etiam pellentesque non nibh</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Mauris posuere</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Tellus sit amet tempus vestibulum</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Erat augue imperdiet neque</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="p-6 bg-gray-800 rounded-md">
          <div class="flex items-center justify-center w-14 h-14 mb-6 bg-gray-900 rounded-sm">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M7.42233 19.8203C7.84433 19.8203 8.18733 20.1633 8.18733 20.5853C8.18733 21.0073 7.84433 21.3493 7.42233 21.3493C7.00033 21.3493 6.65833 21.0073 6.65833 20.5853C6.65833 20.1633 7.00033 19.8203 7.42233 19.8203Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M18.6747 19.8203C19.0967 19.8203 19.4397 20.1633 19.4397 20.5853C19.4397 21.0073 19.0967 21.3493 18.6747 21.3493C18.2527 21.3493 17.9097 21.0073 17.9097 20.5853C17.9097 20.1633 18.2527 19.8203 18.6747 19.8203Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M5.79288 15.083L5.12273 7.099H19.9089C20.7259 7.099 21.3529 7.823 21.2359 8.632L20.2869 15.19C20.1579 16.078 19.3979 16.736 18.5019 16.736H7.58988C6.65188 16.736 5.87088 16.018 5.79288 15.083Z" fill="#00CBA6"></path>
              <path d="M2.74988 3.25L4.82988 3.61L5.79288 15.083C5.87088 16.018 6.65188 16.736 7.58988 16.736H18.5019C19.3979 16.736 20.1579 16.078 20.2869 15.19L21.2359 8.632C21.3529 7.823 20.7259 7.099 19.9089 7.099H5.12273" stroke="#00CBA6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M14.1254 10.795H16.8984" stroke="#2B3031" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="max-w-xxs font-heading font-medium text-lg text-white mb-4">Mauris vitae ex ut lectus cursus ornare?</h3>
          <ul>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Etiam pellentesque non nibh</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Mauris posuere</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Tellus sit amet tempus vestibulum</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Erat augue imperdiet neque</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="p-6 bg-gray-800 rounded-md">
          <div class="flex items-center justify-center w-14 h-14 mb-6 bg-gray-900 rounded-sm">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M14.7368 2.76184H8.08376C6.02476 2.76184 4.24976 4.43084 4.24976 6.49084V17.2038C4.24976 19.3798 5.90876 21.1148 8.08376 21.1148H16.0728C18.1328 21.1148 19.8018 19.2648 19.8018 17.2038V8.03784L14.7368 2.76184Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M14.677 2.518V5.427C14.677 6.847 15.826 7.999 17.245 8.002C18.562 8.005 19.909 8.006 20 8" fill="#80E5D3"></path>
              <path d="M14.677 2.518V5.427C14.677 6.847 15.826 7.999 17.245 8.002C18.562 8.005 19.909 8.006 20 8L14.677 2.518Z" stroke="#80E5D3" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M14.2841 15.5577H8.88708" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12.2426 10.6056H8.8866" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="max-w-xxs font-heading font-medium text-lg text-white mb-4">Mauris vitae ex ut lectus cursus ornare?</h3>
          <ul>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Etiam pellentesque non nibh</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Mauris posuere</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Tellus sit amet tempus vestibulum</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Erat augue imperdiet neque</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="p-6 bg-gray-800 rounded-md">
          <div class="flex items-center justify-center w-14 h-14 mb-6 bg-gray-900 rounded-sm">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.02 10.9133C17.841 10.9133 19.317 9.43734 19.317 7.61634C19.317 5.79634 17.841 4.31934 16.02 4.31934" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M17.5361 14.4963C18.0801 14.5333 18.6201 14.6113 19.1531 14.7293C19.8921 14.8763 20.7821 15.1793 21.0981 15.8423C21.3001 16.2673 21.3001 16.7623 21.0981 17.1873C20.7831 17.8503 19.8921 18.1533 19.1531 18.3053" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.59137 15.2063C13.2814 15.2063 16.4334 15.7653 16.4334 17.9983C16.4334 20.2323 13.3014 20.8103 9.59137 20.8103C5.90137 20.8103 2.75037 20.2523 2.75037 18.0183C2.75037 15.7843 5.88137 15.2063 9.59137 15.2063Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.5914 12.0188C7.1574 12.0188 5.2074 10.0678 5.2074 7.63376C5.2074 5.20076 7.1574 3.24976 9.5914 3.24976C12.0254 3.24976 13.9764 5.20076 13.9764 7.63376C13.9764 10.0678 12.0254 12.0188 9.5914 12.0188Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="max-w-xxs font-heading font-medium text-lg text-white mb-4">Mauris vitae ex ut lectus cursus ornare?</h3>
          <ul>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Etiam pellentesque non nibh</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Mauris posuere</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Tellus sit amet tempus vestibulum</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Erat augue imperdiet neque</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
        <div class="p-6 bg-gray-800 rounded-md">
          <div class="flex items-center justify-center w-14 h-14 mb-6 bg-gray-900 rounded-sm">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M20.8067 7.62361L20.1842 6.54352C19.6577 5.6296 18.4907 5.31432 17.5755 5.83872C17.1399 6.09534 16.6201 6.16815 16.1307 6.04109C15.6413 5.91402 15.2226 5.59752 14.9668 5.16137C14.8023 4.88415 14.7139 4.56839 14.7105 4.24604C14.7254 3.72922 14.5304 3.2284 14.17 2.85767C13.8096 2.48694 13.3145 2.27786 12.7975 2.27808H11.5435C11.037 2.27807 10.5513 2.47991 10.194 2.83895C9.83669 3.19798 9.63717 3.68459 9.63961 4.19112C9.6246 5.23693 8.77248 6.07681 7.72657 6.0767C7.40421 6.07336 7.08846 5.98494 6.81123 5.82041C5.89606 5.29601 4.72911 5.61129 4.20254 6.52522L3.53435 7.62361C3.00841 8.53639 3.3194 9.70261 4.23 10.2323C4.8219 10.574 5.18653 11.2056 5.18653 11.8891C5.18653 12.5725 4.8219 13.2041 4.23 13.5458C3.32056 14.0719 3.00923 15.2353 3.53435 16.1454L4.16593 17.2346C4.41265 17.6798 4.8266 18.0083 5.31619 18.1474C5.80578 18.2866 6.33064 18.2249 6.77462 17.976C7.21108 17.7213 7.73119 17.6516 8.21934 17.7822C8.70749 17.9128 9.12324 18.233 9.37416 18.6717C9.5387 18.9489 9.62711 19.2646 9.63046 19.587C9.63046 20.6435 10.487 21.5 11.5435 21.5H12.7975C13.8505 21.5001 14.7055 20.6491 14.7105 19.5962C14.7081 19.088 14.9089 18.6 15.2682 18.2407C15.6275 17.8814 16.1155 17.6807 16.6236 17.6831C16.9452 17.6917 17.2596 17.7798 17.5389 17.9394C18.4517 18.4653 19.6179 18.1544 20.1476 17.2438L20.8067 16.1454C21.0618 15.7075 21.1318 15.186 21.0012 14.6964C20.8706 14.2067 20.5502 13.7894 20.111 13.5367C19.6718 13.284 19.3514 12.8666 19.2208 12.3769C19.0902 11.8873 19.1603 11.3658 19.4154 10.928C19.5812 10.6383 19.8214 10.3982 20.111 10.2323C21.0161 9.70289 21.3264 8.54349 20.8067 7.63277V7.62361Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <circle cx="12.1751" cy="11.8891" r="2.63616" fill="#2B3031" stroke="#2B3031" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></circle>
            </svg>
          </div>
          <h3 class="max-w-xxs font-heading font-medium text-lg text-white mb-4">Mauris vitae ex ut lectus cursus ornare?</h3>
          <ul>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Etiam pellentesque non nibh</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Mauris posuere</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Tellus sit amet tempus vestibulum</span>
            </li>
            <li class="flex items-center mb-2">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.33325 5L10.6666 5M10.6666 5L6.66658 1M10.6666 5L6.66658 9" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <span class="text-white leading-7 ml-2">Erat augue imperdiet neque</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #99

<section class="relative py-16 bg-gray-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="max-w-md">
      <span class="text-sm font-semibold uppercase">
        <span>Develop your</span>
        <span class="text-green-500">skills</span>
      </span>
      <h2 class="font-heading text-3xl sm:text-4xl mt-2 mb-6">See what this extension tool looks like</h2>
      <p class="max-w-xl mx-auto text-lg leading-8 mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec.</p>
      <div class="flex items-center mb-4">
        <div class="flex items-center justify-center w-16 h-16 mr-6 bg-green-50 rounded">
          <svg width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M19.468 1.47802C19.342 1.15003 18.858 1.07803 18.636 1.314C17.631 2.199 16.342 2.685 15.001 2.685C13.153 2.685 11.439 1.76498 10.418 0.224016C10.3251 0.084 10.1691 0 10.0011 0C9.83404 0 9.67705 0.084 9.58504 0.222984C8.56105 1.764 6.84702 2.68397 4.99902 2.68397C3.64302 2.68397 2.34102 2.18695 1.33302 1.28395C1.18602 1.15195 0.976024 1.11994 0.795039 1.19995C0.615039 1.27997 0.499023 1.45894 0.499023 1.65595V12.4989C0.499023 18.7429 9.37902 23.7279 9.75702 23.937C9.83202 23.979 9.91602 24 9.99904 24C10.0821 24 10.1661 23.979 10.2411 23.939C10.6191 23.73 19.4991 18.744 19.4991 12.501V1.70095C19.5051 1.626 19.495 1.55002 19.468 1.47802Z" fill="#00CBA6"></path>
            <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
        <span class="font-medium">Lorem Ipsum dolor</span>
      </div>
      <div class="flex items-center mb-4">
        <div class="flex items-center justify-center w-16 h-16 mr-6 bg-green-50 rounded">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M16.3344 2.75024H7.66543C4.64443 2.75024 2.75043 4.88924 2.75043 7.91624V16.0842C2.75043 19.1112 4.63543 21.2502 7.66543 21.2502H16.3334C19.3644 21.2502 21.2504 19.1112 21.2504 16.0842V7.91624C21.2504 4.88924 19.3644 2.75024 16.3344 2.75024Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M10.6923 12.0002C10.6923 13.0222 9.86332 13.8522 8.84032 13.8522C7.81832 13.8522 6.98932 13.0222 6.98932 12.0002C6.98932 10.9782 7.81832 10.1482 8.84032 10.1482C9.86332 10.1482 10.6923 10.9782 10.6923 12.0002Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M10.6923 12.0002H17.0103V13.8522" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M14.1816 13.8518V11.9998" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
        <span class="font-medium">Phasellus sit amet blandit ligula</span>
      </div>
      <div class="flex items-center mb-4">
        <div class="flex items-center justify-center w-16 h-16 mr-6 bg-green-50 rounded">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M17.8573 20.4168C19.7323 20.4168 21.2503 18.8978 21.2503 17.0238V14.3238C20.0103 14.3238 19.0103 13.3238 19.0103 12.0848C19.0103 10.8448 20.0103 9.84576 21.2503 9.84576L21.2483 7.14276C21.2483 5.26876 19.7303 3.74976 17.8563 3.74976H6.14431C4.27031 3.74976 2.75131 5.26876 2.75131 7.14276L2.75031 9.93276C3.98931 9.93276 4.98931 10.8448 4.98931 12.0848C4.98931 13.3238 3.98931 14.3238 2.75031 14.3238V17.0238C2.75031 18.8978 4.26831 20.4168 6.14231 20.4168H17.8573Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M11.9998 13.8543L13.7398 14.7693C13.9028 14.8543 14.0938 14.7163 14.0628 14.5353L13.7298 12.5963L15.1388 11.2253C15.2708 11.0963 15.1978 10.8733 15.0158 10.8463L13.0698 10.5633L12.1988 8.79929C12.1178 8.63429 11.8828 8.63429 11.8008 8.79929L10.9298 10.5633L8.98481 10.8463C8.80281 10.8733 8.72981 11.0963 8.86181 11.2253L10.2698 12.5963L9.93681 14.5353C9.90581 14.7163 10.0968 14.8543 10.2598 14.7693L11.9998 13.8543Z" fill="white" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </div>
        <span class="font-medium">Donec sodales nibh</span>
      </div>
    </div>
  </div>
  <img class="hidden lg:block lg:absolute top-0 right-0 mt-16 -mr-40 lg:max-w-3xl xl:max-w-4xl" src="acros-assets/images/applications/macbook.png" alt="">
  <img class="block lg:hidden ml-auto -mr-24 sm:-mr-40" src="acros-assets/images/applications/macbook.png" alt="">
</section>

Tailwind Component #100

<section class="pt-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg mx-auto mb-12 text-center">
      <span class="text-sm font-semibold uppercase">
        <span>Error</span>
        <span class="text-green-500">404</span>
      </span>
      <h2 class="font-heading text-3xl sm:text-4xl lg:text-5xl mt-2 mb-6">Page not found</h2>
      <p class="max-w-xl mx-auto text-lg leading-8 mb-10">Sorry! We are unable to find the page you are looking for</p>
      <div class="sm:flex items-center justify-center"><a class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 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="#">Go back to home page</a><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Try again</a></div>
    </div>
    <div class="max-w-4xl mx-auto">
      <img class="block w-full h-80 rounded object-cover" src="acros-assets/images/http-codes/loupe-row.jpg" alt="">
    </div>
  </div>
</section>

1
2
3
4
5
6
7
8
...
18

The easiest way to create beautiful websites

Developer

Team License

monthly

$24/month

That's $0.80/day

annual

$99/year

That's $0.27/day

Last chance

lifetime

$249/paid once

Best value

The selected plan includes lifetimeannualmonthly access to Shuffle Editor.

A lifetime license is best for those who prefer to avoid subscriptions.

Lifetime License

Create an account

OR USE EMAIL

Pay with card

Pay with card

Pay with PayPal™

I agree to the terms of use and privacy policy.

We issue VAT invoices. Already have an account? Sign in

Why creators choose Shuffle

From idea to live website in minutes.

Shuffle pairs an AI visual editor with 80+ UI libraries, so you can design, build and export production‑ready code without starting from scratch.

13,400+ UI components

Top AI models built in

1-click code export

An AI Agent that builds with you Describe a page, watch it come to life, then fine-tune it visually or with a prompt.
Pick the best model for every task GPT-6 Astra, Claude Opus 5.5 and Gemini 3.8 in one place.
13,400+ professionally designed components Prefer building by hand? Drag in pixel-perfect sections crafted by professional designers.
Export to the stack you love Tailwind CSS, Bootstrap, Next.js, Laravel, WordPress and beyond.

“Its AI-powered features have transformed how I work! Designing and building websites has become faster, easier, and far more efficient.”

Est. 2019

Helping web builders ship since 2019 7 years of steady development.

Build websites faster with an AI Visual Editor

Products

UI Components

Extensions

Support

Company

© 2026 Shuffle. All rights reserved.