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 #101

<section class="relative py-16 bg-gray-50">
  <div class="absolute top-0 left-0 w-full h-96 bg-gray-100"></div>
  <div class="relative container px-4 mx-auto">
    <div class="max-w-xl mx-auto py-10 px-8 sm:px-20 bg-white rounded-md">
      <div class="mb-6">
        <span class="text-sm font-semibold uppercase">
          <span>create an</span>
          <span class="text-green-500">account</span>
        </span>
        <h4 class="max-w-xs font-heading text-3xl sm:text-4xl mt-2">Join our community</h4>
      </div>
      <form action="">
        <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 e-mail">
        </div>
        <div class="mb-4">
          <label class="block text-sm leading-6 mb-2" for="">Password</label>
          <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="password" placeholder="Type password">
        </div>
        <div class="mb-6">
          <label class="block text-sm leading-6 mb-2" for="">Repeat password</label>
          <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="password" placeholder="Repeat password">
        </div>
        <div class="flex items-center mb-6">
          <input class="w-4 h-4" type="checkbox" value="">
          <label class="ml-4 text-sm" for="">
            <span>By signing up, you agree to our</span>
            <a class="font-medium hover:underline" href="#">Terms,</a><a class="font-medium hover:underline" href="#">Data Policy,</a><a class="font-medium hover:underline" href="#">and Cookies Policy</a>
          </label>
        </div>
        <div class="text-right">
          <button class="block w-full 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" type="submit">Get Started</button>
        </div>
      </form>
    </div>
  </div>
</section>

Tailwind Component #102

<section class="py-16">
  <div class="container px-4 mx-auto">
    <h3 class="font-heading text-lg font-medium mb-6">Trusted by brands all over the world</h3>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center border-r border-transparent sm:border-gray-100">
          <img class="block" src="acros-assets/logo/slack.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center border-r border-transparent lg:border-gray-100">
          <img class="block" src="acros-assets/logo/google.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center border-r border-transparent sm:border-gray-100">
          <img class="block" src="acros-assets/logo/coca-cola.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center">
          <img class="block" src="acros-assets/logo/adidas.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #103

<section class="py-12">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
      <h3 class="font-heading text-2xl font-medium mb-8">When I was a developer, I often had a hundred questions when</h3>
      <p class="text-lg font-medium mb-6">Building websites from wireframes that I had received. Some of those questions were:</p>
      <p class="text-lg leading-8 mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="text-lg leading-8">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

Tailwind Component #104

<section class="relative pt-16 pb-32">
  <img class="absolute top-0 left-0 h-full w-full object-cover" src="acros-assets/images/call-to-action/cta-5-bg.jpg" alt="">
  <div class="absolute bottom-0 left-0 w-full h-52 bg-gray-50"></div>
  <div class="relative container px-4 mx-auto">
    <div class="max-w-3xl mx-auto text-center mb-12">
      <h1 class="font-heading text-3xl sm:text-4xl text-white mb-6">Take quick action that increases your brand's regular profit.</h1>
      <p class="text-lg leading-8 text-white">If you have ever wondered how to develop your brand, this is the place for you. Take a big step forward in growing your business with this great tool.</p>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="max-w-sm mx-auto pt-10 pb-8 px-8 text-center bg-white rounded">
          <div class="max-w-xxs mx-auto">
            <div class="flex items-center justify-center w-14 h-14 p-4 mb-8 mx-auto 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="text-lg font-heading font-medium mb-4">Easy changes</h4>
            <p class="leading-7">Options settings for customers convenience</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <div class="max-w-sm mx-auto pt-10 pb-8 px-8 text-center bg-white rounded">
          <div class="max-w-xxs mx-auto">
            <div class="flex items-center justify-center w-14 h-14 p-4 mb-8 mx-auto 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.7974V5.45605" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M22.7007 16.8823L17.8074 21.7983L12.9141 16.8823" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M5.89347 2.19971V18.541" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M1.00024 7.11522L5.89358 2.19922L10.7869 7.11522" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
            </div>
            <h4 class="text-lg font-heading font-medium mb-4">Sharable showcase</h4>
            <p class="leading-7">Options settings for customers convenience</p>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-4">
        <div class="max-w-sm mx-auto pt-10 pb-8 px-8 text-center bg-white rounded">
          <div class="max-w-xxs mx-auto">
            <div class="flex items-center justify-center w-14 h-14 p-4 mb-8 mx-auto 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="#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>
            <h4 class="text-lg font-heading font-medium mb-4">Generate new messages</h4>
            <p class="leading-7">Options settings for customers convenience</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #105

<section class="relative py-16 bg-gray-50 overflow-hidden">
  <img class="absolute top-0 left-0" src="acros-assets/images/call-to-action/cta-10-bg.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-4xl mx-auto">
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full md:w-1/2 px-4 mb-8">
          <div class="p-8 bg-white rounded max-w-md 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 md:w-1/2 px-4 mb-8">
          <div class="p-8 bg-white rounded max-w-md 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 md:w-1/2 px-4 mb-8">
          <div class="p-8 bg-white rounded max-w-md 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 class="w-full md:w-1/2 px-4 mb-8">
          <div class="p-8 bg-white rounded max-w-md 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="M11.9998 11.4782C14.0169 11.4782 15.652 9.84306 15.652 7.82602C15.652 5.80897 14.0169 4.17383 11.9998 4.17383C9.98279 4.17383 8.34766 5.80897 8.34766 7.82602C8.34766 9.84306 9.98279 11.4782 11.9998 11.4782Z" fill="#00CBA6"></path>
                <path d="M19.3045 13.565C20.7452 13.565 21.9132 12.3971 21.9132 10.9563C21.9132 9.5156 20.7452 8.34766 19.3045 8.34766C17.8637 8.34766 16.6958 9.5156 16.6958 10.9563C16.6958 12.3971 17.8637 13.565 19.3045 13.565Z" fill="#00CBA6"></path>
                <path d="M4.76957 13.565C6.2103 13.565 7.37825 12.3971 7.37825 10.9563C7.37825 9.5156 6.2103 8.34766 4.76957 8.34766C3.32883 8.34766 2.16089 9.5156 2.16089 10.9563C2.16089 12.3971 3.32883 13.565 4.76957 13.565Z" fill="#00CBA6"></path>
                <path d="M11.9999 12.522C8.26007 12.522 5.21729 15.5647 5.21729 19.3046C5.21729 19.5926 5.45104 19.8263 5.73904 19.8263H18.2608C18.5488 19.8263 18.7825 19.5926 18.7825 19.3046C18.7825 15.5647 15.7397 12.522 11.9999 12.522Z" fill="#00CBA6"></path>
                <path d="M5.66921 14.7216C5.34991 14.6537 5.02537 14.6089 4.69565 14.6089C2.10678 14.6089 0 16.7157 0 19.3045C0 19.5925 0.233755 19.8263 0.521755 19.8263H4.26991C4.21146 19.6625 4.17389 19.4882 4.17389 19.3045C4.17389 17.5922 4.73321 16.0113 5.66921 14.7216Z" fill="#00CBA6"></path>
                <path d="M19.3041 14.6089C18.9744 14.6089 18.6499 14.6537 18.3306 14.7216C19.2666 16.0113 19.8259 17.5922 19.8259 19.3045C19.8259 19.4882 19.7883 19.6624 19.7299 19.8263H23.478C23.766 19.8263 23.9998 19.5925 23.9998 19.3045C23.9998 16.7157 21.893 14.6089 19.3041 14.6089Z" fill="#00CBA6"></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>
  </div>
</section>

Tailwind Component #106

<div class="fixed z-50 bottom-0 w-full px-6 py-4 bg-gray-900" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-auto px-4 mb-8 lg:mb-0">
        <img src="acros-assets/icons/cookies/cookie.svg" alt="">
      </div>
      <div class="w-full md:w-3/5 px-4 mr-auto mb-8 lg:mb-0">
        <div class="max-w-md">
          <p class="font-heading leading-7 text-white">We use cookies to personalise content, to provide social media features and to analyse our traffic.</p>
        </div>
      </div>
      <div class="w-full lg:w-auto px-4">
        <div class="sm:flex items-center"><a x-on:click.prevent="open = false" 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="#">Accept</a><a x-on:click.prevent="open=false" class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-white hover:text-green-500 border border-white hover:border-green-500 rounded-sm transition duration-150" href="#">Decline</a></div>
      </div>
    </div>
  </div>
</div>

Tailwind Component #107

<section x-data="{ mobileNavOpen: false }">
  <nav class="py-4 bg-gray-900">
    <div class="container px-4 mx-auto">
      <div class="flex items-center justify-between">
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <div class="w-auto mr-14">
              <a class="inline-block" href="#">
                <img src="acros-assets/logo/logo-acros-white.svg" alt="">
              </a>
            </div>
            <div class="w-auto 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>
        </div>
        <div class="w-auto">
          <div class="flex flex-wrap">
            <div class="w-auto hidden lg:block">
              <div class="relative">
                <a class="absolute right-5 top-1/2 transform -translate-y-1/2" href="#">
                  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M13.8 13.8L17 17M15.9333 8.46667C15.9333 12.5904 12.5904 15.9333 8.46667 15.9333C4.34294 15.9333 1 12.5904 1 8.46667C1 4.34294 4.34294 1 8.46667 1C12.5904 1 15.9333 4.34294 15.9333 8.46667Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                </a>
                <input class="px-4 pr-12 w-72 h-14 text-gray-300 placeholder-gray-300 bg-gray-800 outline-none" type="text" placeholder="Search here">
              </div>
            </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>
        </div>
      </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 #108

<section class="py-16 overflow-hidden" x-data="{ tab: '' }" x-init="tab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4 mb-10">
      <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 class="mb-10">
        <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" class="inline-block px-6 py-4 mr-2 font-heading bg-green-500 text-white rounded-full transition duration-300" :class="{ 'bg-green-500 text-white': tab == $refs.tab1.textContent, 'text-gray-900 border border-gray-200 hover:bg-green-500 hover:text-white hover:border-transparent': tab != $refs.tab1.textContent }" href="#">All</a>
        <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" class="inline-block px-6 py-4 mr-2 font-heading text-gray-900 border border-gray-200 hover:bg-green-500 hover:text-white hover:border-transparent rounded-full transition duration-300" :class="{ 'bg-green-500 text-white': tab == $refs.tab2.textContent, 'text-gray-900 border border-gray-200 hover:bg-green-500 hover:text-white hover:border-transparent': tab != $refs.tab2.textContent }" href="#">People</a>
        <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" class="inline-block px-6 py-4 mr-2 font-heading text-gray-900 border border-gray-200 hover:bg-green-500 hover:text-white hover:border-transparent rounded-full transition duration-300" :class="{ 'bg-green-500 text-white': tab == $refs.tab3.textContent, 'text-gray-900 border border-gray-200 hover:bg-green-500 hover:text-white hover:border-transparent': tab != $refs.tab3.textContent }" href="#">Tech</a>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full sm:w-1/2 px-4 mb-8">
            <div class="relative flex items-end h-72 p-6 rounded overflow-hidden">
              <img class="absolute top-0 left-0 w-full h-full object-cover" src="acros-assets/images/portfolio/diagram-md.jpg" alt="">
              <div class="relative">
                <div class="mb-2"><a class="inline-block font-heading text-white hover:text-gray-100 mr-4" href="#">#people</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">#family</a></div>
                <a class="font-heading text-lg text-white hover:underline" href="#">Brand24</a>
              </div>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-8">
            <div class="relative flex items-end h-72 p-6 rounded overflow-hidden">
              <img class="absolute top-0 left-0 w-full h-full object-cover" src="acros-assets/images/portfolio/hand-md.jpg" alt="">
              <div class="relative">
                <div class="mb-2"><a class="inline-block font-heading text-white hover:text-gray-100 mr-4" href="#">#people</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">#family</a></div>
                <a class="font-heading text-lg text-white hover:underline" href="#">Brand24</a>
              </div>
            </div>
          </div>
          <div class="w-full px-4">
            <div class="relative flex items-end h-140 p-6 rounded overflow-hidden">
              <img class="absolute top-0 left-0 w-full h-full object-cover" src="acros-assets/images/portfolio/robot-md.jpg" alt="">
              <div class="relative">
                <div class="mb-2"><a class="inline-block font-heading text-white hover:text-gray-100 mr-4" href="#">#people</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">#family</a></div>
                <a class="font-heading text-3xl text-white hover:underline" href="#">Neonic</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <div class="flex flex-wrap -mx-4">
          <div class="w-full px-4 mb-8">
            <div class="relative flex items-end h-140 p-6 rounded overflow-hidden">
              <img class="absolute top-0 left-0 w-full h-full object-cover" src="acros-assets/images/portfolio/work-md.jpg" alt="">
              <div class="relative">
                <div class="mb-2"><a class="inline-block font-heading text-white hover:text-gray-100 mr-4" href="#">#people</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">#family</a></div>
                <a class="font-heading text-3xl text-white hover:underline" href="#">Sheridan</a>
              </div>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-8 sm:mb-0">
            <div class="relative flex items-end h-72 p-6 rounded overflow-hidden">
              <img class="absolute top-0 left-0 w-full h-full object-cover" src="acros-assets/images/portfolio/vr-md.jpg" alt="">
              <div class="relative">
                <div class="mb-2"><a class="inline-block font-heading text-white hover:text-gray-100 mr-4" href="#">#people</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">#family</a></div>
                <a class="font-heading text-lg text-white hover:underline" href="#">Klakier</a>
              </div>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4">
            <div class="relative flex items-end h-72 p-6 rounded overflow-hidden">
              <img class="absolute top-0 left-0 w-full h-full object-cover" src="acros-assets/images/portfolio/hand-md.jpg" alt="">
              <div class="relative">
                <div class="mb-2"><a class="inline-block font-heading text-white hover:text-gray-100 mr-4" href="#">#people</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">#family</a></div>
                <a class="font-heading text-lg text-white hover:underline" href="#">Brand24</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #109

<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">FAQ</span>
      <h2 class="font-heading text-3xl sm:text-4xl mt-2 mb-6">Questions &amp; Answers</h2>
      <p class="text-lg leading-8">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-white rounded-md">
          <div class="flex items-center justify-center w-14 h-14 mb-6 bg-gray-50 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="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M10.6924 12.0002H17.0104V13.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>
          <h3 class="max-w-xxs font-heading font-medium text-lg 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="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="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="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="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-white rounded-md">
          <div class="flex items-center justify-center w-14 h-14 mb-6 bg-gray-50 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="white"></path>
            </svg>
          </div>
          <h3 class="max-w-xxs font-heading font-medium text-lg 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="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="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="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="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-white rounded-md">
          <div class="flex items-center justify-center w-14 h-14 mb-6 bg-gray-50 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="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="max-w-xxs font-heading font-medium text-lg 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="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="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="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="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-white rounded-md">
          <div class="flex items-center justify-center w-14 h-14 mb-6 bg-gray-50 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="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12.2426 10.6056H8.8866" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <h3 class="max-w-xxs font-heading font-medium text-lg 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="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="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="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="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-white rounded-md">
          <div class="flex items-center justify-center w-14 h-14 mb-6 bg-gray-50 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 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="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="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="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="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-white rounded-md">
          <div class="flex items-center justify-center w-14 h-14 mb-6 bg-gray-50 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="white" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></circle>
            </svg>
          </div>
          <h3 class="max-w-xxs font-heading font-medium text-lg 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="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="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="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="leading-7 ml-2">Erat augue imperdiet neque</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #110

<section class="py-16">
  <div class="container px-4 mx-auto">
    <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="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>
  </div>
</section>

Tailwind Component #111

<section class="relative py-16 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">
      <div class="w-full sm:flex-shrink-0 flex-shrink-0 max-w-lg px-4">
        <div class="py-6 px-12 bg-gray-50 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-gray-50 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-gray-50 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-gray-50 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 #112

<section x-data="{ mobileNavOpen: false }">
  <nav class="py-4 bg-gray-900">
    <div class="container px-4 mx-auto">
      <div class="relative flex items-center justify-between">
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
          <a class="inline-block" href="#">
            <img src="acros-assets/logo/logo-acros-column-white.svg" alt="">
          </a>
        </div>
        <div class="w-auto">
          <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="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M13.8 13.8L17 17M15.9333 8.46667C15.9333 12.5904 12.5904 15.9333 8.46667 15.9333C4.34294 15.9333 1 12.5904 1 8.46667C1 4.34294 4.34294 1 8.46667 1C12.5904 1 15.9333 4.34294 15.9333 8.46667Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
        <div class="w-auto">
          <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>
    </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 #113

<div class="fixed z-50 bottom-0 w-full p-6" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container mx-auto">
    <div class="px-8 py-6 mx-auto w-full bg-white rounded-md">
      <div class="flex flex-wrap items-start -mx-4">
        <div class="w-full xl:w-1/6 px-4 mb-6 xl:mb-0">
          <h4 class="font-heading text-2xl font-medium">Cookie Policy</h4>
        </div>
        <div class="w-full xl:w-3/6 px-4 mr-auto mb-8 xl:mb-0">
          <div class="max-w-lg xl:max-w-2xl">
            <p class="text-sm leading-6">We use cookies to personalise content, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners. If you want to change your cookie setting, please see the ‘how to reject cookies' section of our . Otherwise, if you agree to our use of cookies, please continue to use our website.</p>
          </div>
        </div>
        <div class="w-full xl:w-2/6 px-4">
          <div class="max-w-lg xl:max-w-xs xl:ml-auto"><a x-on:click.prevent="open = false" class="inline-block w-full py-4 px-6 sm:px-20 mb-2 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="#">Accept</a><a x-on:click.prevent="open=false" class="inline-block w-full py-4 px-6 sm:px-20 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="#">Decline</a></div>
        </div>
      </div>
    </div>
  </div>
</div>

Tailwind Component #114

<section class="relative py-16 bg-gray-50">
  <div class="absolute top-0 left-0 w-full h-96 bg-gray-100"></div>
  <div class="relative container px-4 mx-auto">
    <div class="max-w-xl mx-auto py-10 px-8 sm:px-20 bg-white rounded-md">
      <div class="mb-6">
        <span class="text-sm font-semibold uppercase">Sign in</span>
        <h4 class="max-w-xs font-heading text-3xl sm:text-4xl mt-2">Join our community</h4>
      </div>
      <form action="">
        <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 e-mail">
        </div>
        <div class="mb-6">
          <label class="block text-sm leading-6 mb-2" for="">Password</label>
          <input class="block w-full p-4 font-heading text-gray-300 placeholder-gray-300 bg-gray-50 rounded outline-none" type="password" placeholder="Type password">
        </div>
        <div class="text-right mb-6">
          <button class="block w-full 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" type="submit">Sign in</button>
        </div>
        <a class="block font-heading text-center hover:underline mb-6" href="#">Forgot password</a>
        <a class="relative block px-3 py-4 mb-2 text-center bg-green-100 hover:bg-green-200 rounded-sm" href="#">
          <div class="absolute top-1/2 left-0 ml-3 transform -translate-y-1/2 flex items-center justify-center w-8 h-8 bg-white">
            <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.8182V8.51074H10.9054L11.1778 6.4417H9.08979V5.12092C9.08979 4.52207 9.25864 4.11397 10.1352 4.11397L11.2512 4.11352V2.26289C11.0582 2.23829 10.3957 2.18188 9.62456 2.18188C8.01431 2.18188 6.9119 3.14594 6.9119 4.91601V6.4417H5.09082V8.51074H6.9119V13.8182H9.08979Z" fill="#00CBA6"></path>
              <mask id="mask0_115_950" 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.8182V8.51074H10.9054L11.1778 6.4417H9.08979V5.12092C9.08979 4.52207 9.25864 4.11397 10.1352 4.11397L11.2512 4.11352V2.26289C11.0582 2.23829 10.3957 2.18188 9.62456 2.18188C8.01431 2.18188 6.9119 3.14594 6.9119 4.91601V6.4417H5.09082V8.51074H6.9119V13.8182H9.08979Z" fill="white"></path>
              </mask>
            </svg>
          </div>
          <span class="font-heading">Sign in with Facebook</span>
        </a>
        <a class="relative block px-3 py-4 mb-2 text-center bg-green-100 hover:bg-green-200 rounded-sm" href="#">
          <div class="absolute top-1/2 left-0 ml-3 transform -translate-y-1/2 flex items-center justify-center w-8 h-8 bg-white">
            <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.5453 4.0974C14.0902 4.29904 13.6019 4.43579 13.0889 4.49684C13.6128 4.18316 14.0137 3.68562 14.2038 3.09459C13.7124 3.38508 13.17 3.59601 12.5921 3.71035C12.1294 3.21667 11.4711 2.90918 10.741 2.90918C9.34035 2.90918 8.20465 4.04488 8.20465 5.4448C8.20465 5.64334 8.22705 5.83726 8.27033 6.02269C6.16273 5.91684 4.29386 4.90708 3.04305 3.37272C2.82441 3.74665 2.70002 4.18237 2.70002 4.64748C2.70002 5.52746 3.14813 6.30391 3.828 6.75817C3.41235 6.74427 3.02142 6.62993 2.67918 6.43987V6.47154C2.67918 7.69995 3.55374 8.72516 4.71338 8.95849C4.50091 9.01566 4.27687 9.04734 4.0451 9.04734C3.88132 9.04734 3.72293 9.03112 3.56764 9.00021C3.89057 10.0084 4.82695 10.7416 5.93639 10.7617C5.06877 11.4416 3.97479 11.8456 2.78657 11.8456C2.58184 11.8456 2.38019 11.8333 2.18164 11.8109C3.30421 12.5317 4.63691 12.952 6.06928 12.952C10.7349 12.952 13.2852 9.08752 13.2852 5.73607L13.2767 5.40773C13.775 5.05231 14.2061 4.60577 14.5453 4.0974Z" fill="#00CBA6"></path>
              <mask id="mask0_115_962" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="2" width="13" height="11">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5453 4.0974C14.0902 4.29904 13.6019 4.43579 13.0889 4.49684C13.6128 4.18316 14.0137 3.68562 14.2038 3.09459C13.7124 3.38508 13.17 3.59601 12.5921 3.71035C12.1294 3.21667 11.4711 2.90918 10.741 2.90918C9.34035 2.90918 8.20465 4.04488 8.20465 5.4448C8.20465 5.64334 8.22705 5.83726 8.27033 6.02269C6.16273 5.91684 4.29386 4.90708 3.04305 3.37272C2.82441 3.74665 2.70002 4.18237 2.70002 4.64748C2.70002 5.52746 3.14813 6.30391 3.828 6.75817C3.41235 6.74427 3.02142 6.62993 2.67918 6.43987V6.47154C2.67918 7.69995 3.55374 8.72516 4.71338 8.95849C4.50091 9.01566 4.27687 9.04734 4.0451 9.04734C3.88132 9.04734 3.72293 9.03112 3.56764 9.00021C3.89057 10.0084 4.82695 10.7416 5.93639 10.7617C5.06877 11.4416 3.97479 11.8456 2.78657 11.8456C2.58184 11.8456 2.38019 11.8333 2.18164 11.8109C3.30421 12.5317 4.63691 12.952 6.06928 12.952C10.7349 12.952 13.2852 9.08752 13.2852 5.73607L13.2767 5.40773C13.775 5.05231 14.2061 4.60577 14.5453 4.0974Z" fill="white"></path>
              </mask>
            </svg>
          </div>
          <span class="font-heading">Sign in with Twitter</span>
        </a>
      </form>
    </div>
  </div>
</section>

Tailwind Component #115

<section class="relative py-16 bg-gray-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="w-full lg:w-1/2 px-4 ml-auto mb-16 lg:mb-0">
      <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-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>
  </div>
  <img class="hidden lg:block lg:absolute top-0 left-0 mt-16 -ml-40 lg:max-w-2xl xl:max-w-4xl" src="acros-assets/images/applications/macbook.png" alt="">
  <img class="block lg:hidden -ml-24 sm:-ml-40" src="acros-assets/images/applications/macbook.png" alt="">
</section>

Tailwind Component #116

<section class="py-20 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-start justify-between -mx-4">
      <div class="w-full xl:w-1/6 px-4 mb-16 xl:mb-0">
        <a class="inline-block mb-24" href="#">
          <img src="acros-assets/logo/logo-acros-white.svg" alt="">
        </a>
        <span class="block text-gray-300 mb-6">2022 © Shuffle</span>
        <a class="inline-block font-heading text-white hover:text-gray-100 mr-8" href="#">Terms</a><a class="inline-block font-heading text-white hover:text-gray-100" href="#">Privacy</a>
      </div>
      <div class="w-1/2 xl:w-auto px-4 mb-16 xl:mb-0">
        <ul>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">About us</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Careers</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Press</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Service</a></li>
          <li><a class="font-heading text-white hover:text-gray-100" href="#">Blog</a></li>
        </ul>
      </div>
      <div class="w-1/2 xl:w-auto px-4 mb-16 xl:mb-0">
        <ul>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Pricing</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Register</a></li>
          <li class="mb-6"><a class="font-heading text-white hover:text-gray-100" href="#">Add list</a></li>
          <li><a class="font-heading text-white hover:text-gray-100" href="#">Contact</a></li>
        </ul>
      </div>
      <div class="w-full xl:w-auto px-4">
        <div class="max-w-md">
          <h5 class="max-w-sm font-heading text-lg text-white mb-6">Expand your brand with this excellent extension tool</h5>
          <div>
            <form class="mb-4" action="">
              <div class="md:flex">
                <input class="block flex-grow-1 w-full p-4 mb-4 md:mb-0 sm:mr-4 font-heading text-gray-500 bg-white outline-none rounded-sm" type="email" placeholder="Type your e-mail">
                <button class="inline-block flex-shrink-0 w-full md: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" type="submit">Sign up</button>
              </div>
            </form>
            <p class="max-w-xs leading-6 text-sm text-gray-300">If you have ever wondered how to develop your brand, this is the place for you.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #117

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <h3 class="font-heading text-lg font-medium mb-6">Trusted by brands all over the world</h3>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/slack.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/google.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/coca-cola.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/adidas.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/audi.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-8">
        <div class="flex h-32 px-4 items-center justify-center bg-white rounded-md">
          <img class="block" src="acros-assets/logo/tinder.svg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #118

<section class="py-16 bg-gray-50" x-data="{ pricing: 'annual' }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-between items-center -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">
        <div class="flex flex-wrap items-center -mb-4">
          <label class="mb-4 mr-10" for="">
            <input type="radio" name="radio_06" value="annual" x-model="pricing">
            <span class="ml-3 mr-2 font-heading font-medium">Annual license</span>
            <div class="relative inline-flex items-center px-3 py-px rounded" :class="{ 'bg-green-50': pricing=='annual', 'bg-gray-100': pricing!='annual' }">
              <div class="absolute right-full top-1/2 w-1 h-1 transform translate-x-1/2 -translate-y-1/2 rotate-45" :class="{ 'bg-green-50': pricing=='annual', 'bg-gray-100': pricing!='annual' }"></div>
              <span class="text-sm font-medium">$99</span>
            </div>
          </label>
          <label class="mb-4" for="">
            <input type="radio" name="radio_06" value="monthly" x-model="pricing">
            <span class="ml-3 mr-2 font-heading">Monthly license</span>
            <div class="relative inline-flex items-center px-3 py-px rounded" :class="{ 'bg-green-50': pricing=='monthly', 'bg-gray-100': pricing!='monthly' }">
              <div class="absolute right-full top-1/2 w-1 h-1 transform translate-x-1/2 -translate-y-1/2 rotate-45" :class="{ 'bg-green-50': pricing=='monthly', 'bg-gray-100': pricing!='monthly' }"></div>
              <span class="text-sm font-medium">$24</span>
            </div>
          </label>
        </div>
      </div>
    </div>
    <div class="max-w-5xl mx-auto px-6 py-8 sm:px-8 bg-white rounded-md">
      <div class="flex flex-wrap items-start -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-8 md:mb-0">
          <span class="text-sm font-semibold">STEP 2 - SIGN UP</span>
          <h3 class="font-heading text-3xl mt-2 mb-6">Finish your payment</h3>
          <form action="">
            <div class="mb-4">
              <label class="block mb-2 text-sm" for="">E-mail address</label>
              <input class="block w-full p-4 text-gray-500 placeholder-gray-200 bg-gray-50 rounded-sm outline-none" type="email" placeholder="Enter e-mail">
            </div>
            <div class="mb-6">
              <label class="block mb-2 text-sm" for="">Password</label>
              <input class="block w-full p-4 text-gray-500 placeholder-gray-200 bg-gray-50 rounded-sm outline-none" type="email" placeholder="Enter password">
            </div>
            <div class="flex mb-6">
              <input type="checkbox">
              <label class="ml-4 text-sm" for="">
                <span>By signing up, you agree to our</span>
                <a class="font-medium hover:underline" href="#">Terms,</a><a class="font-medium hover:underline" href="#">Data Policy,</a><a class="font-medium hover:underline" href="#">and Cookies Policy</a>
              </label>
            </div>
            <a class="block py-4 px-6 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Try it for free</a>
          </form>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <img class="block w-full h-112 rounded object-cover" src="acros-assets/images/pricing/work.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #119

<section class="py-12">
  <div class="container px-4 mx-auto">
    <div class="max-w-3xl mx-auto">
      <h3 class="font-heading text-2xl font-medium mb-8">When I was a developer, I often had a hundred questions when</h3>
      <p class="text-lg font-medium mb-4">Building websites from wireframes that I had received. Some of those questions were:</p>
      <ul class="mb-8">
        <li class="flex mb-2 sm:items-center">
          <div class="flex-shrink-0 flex items-center justify-center w-6 h-8 mr-4 rounded bg-green-500 text-white text-xs">1</div>
          <span class="text-lg">How will this design scale when I shrink the browser window?</span>
        </li>
        <li class="flex mb-2 sm:items-center">
          <div class="flex-shrink-0 flex items-center justify-center w-6 h-8 mr-4 rounded bg-green-500 text-white text-xs">2</div>
          <span class="text-lg">What happens when this shape is filled out incorrectly?</span>
        </li>
        <li class="flex mb-2 sm:items-center">
          <div class="flex-shrink-0 flex items-center justify-center w-6 h-8 mr-4 rounded bg-green-500 text-white text-xs">3</div>
          <span class="text-lg">What are the options in this sorting filter, and what do they do?</span>
        </li>
      </ul>
      <p class="text-lg leading-8 mb-6">These types of questions led me to miss numerous deadlines, and I wasted time and energy in back-and-forth communication. Sadly, this situation could have been avoided if the wireframes had provided enough detail.</p>
      <p class="text-lg leading-8">Now that I am a UX designer, I notice that some designers tend to forget that wireframes are equally creative and technical. We are responsible for designing great ideas, but we are also responsible for creating product specifications. I admit that there can be so many details to remember that it’s easy to lose track. To save time and energy for myself, I gathered all of my years of wireframing knowledge into a single checklist that I refer to throughout the process. And now I am sharing this knowledge with you, so that you can get back to being creative.</p>
    </div>
  </div>
</section>

Tailwind Component #120

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
        <h2 class="max-w-lg font-heading text-3xl sm:text-4xl mb-6">Expand your brand with this excellent extension tool</h2>
        <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 class="w-full xl:w-1/2 px-4">
        <div class="flex flex-wrap -mx-4 -mb-12">
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="max-w-xs">
              <div class="flex items-center justify-center w-16 h-16 mb-8 bg-white 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">Frequent authentication</h3>
              <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="max-w-xs">
              <div class="flex items-center justify-center w-16 h-16 mb-8 bg-white rounded">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11.9998 11.4782C14.0169 11.4782 15.652 9.84306 15.652 7.82602C15.652 5.80897 14.0169 4.17383 11.9998 4.17383C9.98279 4.17383 8.34766 5.80897 8.34766 7.82602C8.34766 9.84306 9.98279 11.4782 11.9998 11.4782Z" fill="#00CBA6"></path>
                  <path d="M19.3045 13.565C20.7452 13.565 21.9132 12.3971 21.9132 10.9563C21.9132 9.5156 20.7452 8.34766 19.3045 8.34766C17.8637 8.34766 16.6958 9.5156 16.6958 10.9563C16.6958 12.3971 17.8637 13.565 19.3045 13.565Z" fill="#00CBA6"></path>
                  <path d="M4.76957 13.565C6.2103 13.565 7.37825 12.3971 7.37825 10.9563C7.37825 9.5156 6.2103 8.34766 4.76957 8.34766C3.32883 8.34766 2.16089 9.5156 2.16089 10.9563C2.16089 12.3971 3.32883 13.565 4.76957 13.565Z" fill="#00CBA6"></path>
                  <path d="M11.9999 12.522C8.26007 12.522 5.21729 15.5647 5.21729 19.3046C5.21729 19.5926 5.45104 19.8263 5.73904 19.8263H18.2608C18.5488 19.8263 18.7825 19.5926 18.7825 19.3046C18.7825 15.5647 15.7397 12.522 11.9999 12.522Z" fill="#00CBA6"></path>
                  <path d="M5.66921 14.7216C5.34991 14.6537 5.02537 14.6089 4.69565 14.6089C2.10678 14.6089 0 16.7157 0 19.3045C0 19.5925 0.233755 19.8263 0.521755 19.8263H4.26991C4.21146 19.6625 4.17389 19.4882 4.17389 19.3045C4.17389 17.5922 4.73321 16.0113 5.66921 14.7216Z" fill="#00CBA6"></path>
                  <path d="M19.3041 14.6089C18.9744 14.6089 18.6499 14.6537 18.3306 14.7216C19.2666 16.0113 19.8259 17.5922 19.8259 19.3045C19.8259 19.4882 19.7883 19.6624 19.7299 19.8263H23.478C23.766 19.8263 23.9998 19.5925 23.9998 19.3045C23.9998 16.7157 21.893 14.6089 19.3041 14.6089Z" fill="#00CBA6"></path>
                </svg>
              </div>
              <h3 class="font-heading text-lg font-medium mb-4">List of regular users</h3>
              <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="max-w-xs">
              <div class="flex items-center justify-center w-16 h-16 mb-8 bg-white 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">Change of access</h3>
              <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
          <div class="w-full sm:w-1/2 px-4 mb-12">
            <div class="max-w-xs">
              <div class="flex items-center justify-center w-16 h-16 mb-8 bg-white 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">Weekly email updates</h3>
              <p class="leading-7">Take care to develop resources continually and integrity them with previous projects.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

1
...
3
4
5
6
7
8
9
...
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.