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

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl 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="max-w-5xl 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="max-w-lg mx-auto pt-10 px-4 sm:px-10 pb-6 bg-gray-50 rounded-md">
            <div class="flex">
              <div class="flex-shrink-0 mr-5">
                <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>
              </div>
              <div>
                <h3 class="font-heading text-lg mb-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
                <div class="flex items-center">
                  <img class="h-10 w-10 rounded-full mr-4" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                  <div>
                    <h4 class="text-sm font-medium">Denny Bailey</h4>
                    <span class="text-sm text-gray-300">CEO &amp; Founder</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4 mb-8">
          <div class="max-w-lg mx-auto pt-10 px-4 sm:px-10 pb-6 bg-gray-50 rounded-md">
            <div class="flex">
              <div class="flex-shrink-0 mr-5">
                <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>
              </div>
              <div>
                <h3 class="font-heading text-lg mb-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
                <div class="flex items-center">
                  <img class="h-10 w-10 rounded-full mr-4" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                  <div>
                    <h4 class="text-sm font-medium">Denny Bailey</h4>
                    <span class="text-sm text-gray-300">CEO &amp; Founder</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4 mb-8">
          <div class="max-w-lg mx-auto pt-10 px-4 sm:px-10 pb-6 bg-gray-50 rounded-md">
            <div class="flex">
              <div class="flex-shrink-0 mr-5">
                <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>
              </div>
              <div>
                <h3 class="font-heading text-lg mb-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
                <div class="flex items-center">
                  <img class="h-10 w-10 rounded-full mr-4" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                  <div>
                    <h4 class="text-sm font-medium">Denny Bailey</h4>
                    <span class="text-sm text-gray-300">CEO &amp; Founder</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4 mb-8">
          <div class="max-w-lg mx-auto pt-10 px-4 sm:px-10 pb-6 bg-gray-50 rounded-md">
            <div class="flex">
              <div class="flex-shrink-0 mr-5">
                <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>
              </div>
              <div>
                <h3 class="font-heading text-lg mb-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
                <div class="flex items-center">
                  <img class="h-10 w-10 rounded-full mr-4" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                  <div>
                    <h4 class="text-sm font-medium">Denny Bailey</h4>
                    <span class="text-sm text-gray-300">CEO &amp; Founder</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #342

<section class="relative pt-16 lg:pb-16 bg-gray-50 overflow-hidden">
  <img class="hidden lg:block absolute top-0 left-0 h-full w-1/2 object-cover" src="acros-assets/images/features/woman-man-smilling.jpg" alt="">
  <div class="container px-4 mx-auto">
    <div class="w-full lg:w-1/2 ml-auto">
      <div class="max-w-md xl:max-w-lg lg:ml-auto">
        <h2 class="max-w-lg font-heading text-3xl sm:text-4xl mb-6">Lorem Ipsum dolor sit amet boulique</h2>
        <p class="max-w-md 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-12 h-12 p-3 mr-6 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>
          <span class="font-heading font-medium">Lorem Ipsum dolor</span>
        </div>
        <div class="flex items-center mb-4">
          <div class="flex items-center justify-center w-12 h-12 p-3 mr-6 bg-white rounded">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M14.3345 0.75H5.66549C2.64449 0.75 0.750488 2.889 0.750488 5.916V14.084C0.750488 17.111 2.63549 19.25 5.66549 19.25H14.3335C17.3645 19.25 19.2505 17.111 19.2505 14.084V5.916C19.2505 2.889 17.3645 0.75 14.3345 0.75Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M8.6925 9.99995C8.6925 11.0219 7.8635 11.8519 6.8405 11.8519C5.8185 11.8519 4.9895 11.0219 4.9895 9.99995C4.9895 8.97795 5.8185 8.14795 6.8405 8.14795C7.8635 8.14795 8.6925 8.97795 8.6925 9.99995Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M8.69238 10H15.0104V11.852" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M12.1816 11.8515V9.99951" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <span class="font-heading font-medium">Phasellus sit amet blandit ligula</span>
        </div>
        <div class="flex items-center">
          <div class="flex items-center justify-center w-12 h-12 p-3 mr-6 bg-white rounded">
            <svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" clip-rule="evenodd" d="M15.8572 17.417C17.7322 17.417 19.2502 15.898 19.2502 14.024V11.324C18.0102 11.324 17.0102 10.324 17.0102 9.085C17.0102 7.845 18.0102 6.846 19.2502 6.846L19.2482 4.143C19.2482 2.269 17.7302 0.75 15.8562 0.75H4.14424C2.27024 0.75 0.751244 2.269 0.751244 4.143L0.750244 6.933C1.98924 6.933 2.98924 7.845 2.98924 9.085C2.98924 10.324 1.98924 11.324 0.750244 11.324V14.024C0.750244 15.898 2.26824 17.417 4.14224 17.417H15.8572Z" fill="#00CBA6" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.99981 10.8545L11.7398 11.7695C11.9028 11.8545 12.0938 11.7165 12.0628 11.5355L11.7298 9.59653L13.1388 8.22553C13.2708 8.09653 13.1978 7.87353 13.0158 7.84653L11.0698 7.56353L10.1988 5.79953C10.1178 5.63453 9.88281 5.63453 9.80081 5.79953L8.92981 7.56353L6.98481 7.84653C6.80281 7.87353 6.72981 8.09653 6.86181 8.22553L8.26981 9.59653L7.93681 11.5355C7.90581 11.7165 8.09681 11.8545 8.25981 11.7695L9.99981 10.8545Z" fill="white" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <span class="font-heading font-medium">Donec sodales nibh</span>
        </div>
      </div>
    </div>
  </div>
  <img class="block w-full lg:hidden mt-16 object-cover" src="acros-assets/images/features/woman-man-smilling.jpg" alt="">
</section>

Tailwind Component #343

<section class="relative py-16 overflow-hidden">
  <img class="absolute top-0 left-0 mt-20 object-contain" src="acros-assets/images/call-to-action/cta-10-bg.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <div class="max-w-md lg:max-w-xl py-8 mx-auto">
          <div class="text-sm mb-2 font-semibold text-gray-900 uppercase">
            <span>Lorem</span>
            <span class="text-green-500">ipsum</span>
          </div>
          <h1 class="font-heading text-3xl sm:text-4xl mb-6">The latest version of this excellent product is waiting to&nbsp;deploy</h1>
          <p class="max-w-md text-lg leading-8 mb-12">If you have ever wondered how to develop your brand, this is the place for you.</p>
          <div class="sm:flex items-center"><a class="inline-block w-full sm:w-auto py-4 px-6 mb-4 sm:mb-0 sm:mr-4 text-center font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Active demo</a><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base text-gray-900 hover:text-green-500 border border-gray-900 hover:border-green-500 rounded-sm transition duration-150" href="#">Share with friends</a></div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <img class="block h-full mx-auto" src="acros-assets/images/call-to-action/cta-12-work.jpg" alt="">
      </div>
    </div>
  </div>
</section>

Tailwind Component #344

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

Tailwind Component #345

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl 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="max-w-md md:max-w-5xl mx-auto">
      <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="pt-8 px-8 pb-6 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-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
            <div class="flex items-center">
              <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
              <div>
                <h4 class="text-sm font-medium">Denny Bailey</h4>
                <span class="text-sm text-gray-300">CEO &amp; Founder</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="pt-8 px-8 pb-6 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-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
            <div class="flex items-center">
              <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
              <div>
                <h4 class="text-sm font-medium">Denny Bailey</h4>
                <span class="text-sm text-gray-300">CEO &amp; Founder</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="pt-8 px-8 pb-6 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-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
            <div class="flex items-center">
              <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
              <div>
                <h4 class="text-sm font-medium">Denny Bailey</h4>
                <span class="text-sm text-gray-300">CEO &amp; Founder</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="pt-8 px-8 pb-6 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-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
            <div class="flex items-center">
              <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
              <div>
                <h4 class="text-sm font-medium">Denny Bailey</h4>
                <span class="text-sm text-gray-300">CEO &amp; Founder</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="pt-8 px-8 pb-6 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-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
            <div class="flex items-center">
              <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
              <div>
                <h4 class="text-sm font-medium">Denny Bailey</h4>
                <span class="text-sm text-gray-300">CEO &amp; Founder</span>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="pt-8 px-8 pb-6 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-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
            <div class="flex items-center">
              <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
              <div>
                <h4 class="text-sm font-medium">Denny Bailey</h4>
                <span class="text-sm text-gray-300">CEO &amp; Founder</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #346

<section class="py-20 bg-green-500">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center justify-between -mx-4">
      <div class="w-full lg:w-2/5 px-4 mb-6 lg:mb-0">
        <h2 class="max-w-md font-heading text-3xl sm:text-4xl text-white">The latest version of this excellent product</h2>
      </div>
      <div class="w-full lg:w-auto px-4 mb-6 lg:mb-0">
        <p class="max-w-sm text-white leading-7">The standard chunk of Lorem Ipsum used since the 1500s is reproduced.</p>
      </div>
      <div class="w-full lg:w-auto px-4"><a class="inline-block w-full sm:w-auto py-4 px-6 text-center font-heading font-medium text-base hover:text-green-500 bg-white hover:bg-gray-50 border border-white hover:border-gray-50 rounded-sm transition duration-200" href="#">Send inquiry</a></div>
    </div>
  </div>
</section>

Tailwind Component #347

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="relative p-6 sm:p-8 rounded">
      <img class="absolute top-0 left-0 h-full w-full object-cover" src="acros-assets/images/features/work.jpg" alt="">
      <div class="relative max-w-sm lg:max-w-md p-6 sm:p-10 bg-green-500 rounded">
        <h3 class="font-heading text-2xl text-white mb-8">The latest version of this excellent product</h3>
        <div class="sm:flex max-w-xs sm:max-w-none mb-8">
          <div class="flex items-center justify-center w-12 h-12 p-3 mb-6 sm:mb-0 sm:mr-6 bg-green-300 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="white"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h4 class="font-heading text-lg font-medium text-white mb-2">Repeat predefined</h4>
            <p class="leading-7 text-white">Take care to develop resources continually and integrity.</p>
          </div>
        </div>
        <div class="sm:flex max-w-xs sm:max-w-none mb-8">
          <div class="flex items-center justify-center w-12 h-12 p-3 mb-6 sm:mb-0 sm:mr-6 bg-green-300 rounded">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.02 10.9138C17.841 10.9138 19.317 9.43782 19.317 7.61682C19.317 5.79682 17.841 4.31982 16.02 4.31982" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M17.5361 14.4966C18.0801 14.5336 18.6201 14.6116 19.1531 14.7296C19.8921 14.8766 20.7821 15.1796 21.0981 15.8426C21.3001 16.2676 21.3001 16.7626 21.0981 17.1876C20.7831 17.8506 19.8921 18.1536 19.1531 18.3056" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.59149 15.2065C13.2815 15.2065 16.4335 15.7655 16.4335 17.9985C16.4335 20.2325 13.3015 20.8105 9.59149 20.8105C5.90149 20.8105 2.75049 20.2525 2.75049 18.0185C2.75049 15.7845 5.88149 15.2065 9.59149 15.2065Z" fill="white" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.59152 12.019C7.15752 12.019 5.20752 10.068 5.20752 7.634C5.20752 5.201 7.15752 3.25 9.59152 3.25C12.0255 3.25 13.9765 5.201 13.9765 7.634C13.9765 10.068 12.0255 12.019 9.59152 12.019Z" fill="white" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h4 class="font-heading text-lg font-medium text-white mb-2">Classical Latin literature</h4>
            <p class="leading-7 text-white">Take care to develop resources continually and integrity.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #348

<section x-data="{ mobileNavOpen: false }">
  <nav class="py-4 bg-white">
    <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-black.svg" alt="">
              </a>
            </div>
            <div class="w-auto hidden lg:block">
              <ul class="flex items-center">
                <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">About</a></li>
                <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Company</a></li>
                <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Services</a></li>
                <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" 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="black" 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-50 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-50 hover:bg-gray-100 rounded-full" href="#">
                <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="black" 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 #349

<section x-data="{ mobileNavOpen: false }">
  <nav class="py-4 bg-white">
    <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-black.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-50 hover:bg-gray-100 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="black" 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-50 hover:bg-gray-100 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="black" 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 #350

<section class="py-16 bg-gray-50">
  <div class="container px-4 mx-auto">
    <div class="relative p-6 sm:p-8 rounded">
      <img class="absolute top-0 left-0 h-full w-full object-cover" src="acros-assets/images/features/work-2.jpg" alt="">
      <div class="relative max-w-sm lg:max-w-md ml-auto p-6 sm:p-10 bg-green-500 rounded">
        <h3 class="font-heading text-2xl text-white mb-8">The latest version of this excellent product</h3>
        <div class="sm:flex max-w-xs sm:max-w-none mb-8">
          <div class="flex items-center justify-center w-12 h-12 p-3 mb-6 sm:mb-0 sm:mr-6 bg-green-300 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="white"></path>
              <path d="M6.25 11.4167L8.75 13.9167L13.75 8.5" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h4 class="font-heading text-lg font-medium text-white mb-2">Repeat predefined</h4>
            <p class="leading-7 text-white">Take care to develop resources continually and integrity.</p>
          </div>
        </div>
        <div class="sm:flex max-w-xs sm:max-w-none mb-8">
          <div class="flex items-center justify-center w-12 h-12 p-3 mb-6 sm:mb-0 sm:mr-6 bg-green-300 rounded">
            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M16.02 10.9138C17.841 10.9138 19.317 9.43782 19.317 7.61682C19.317 5.79682 17.841 4.31982 16.02 4.31982" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path d="M17.5361 14.4966C18.0801 14.5336 18.6201 14.6116 19.1531 14.7296C19.8921 14.8766 20.7821 15.1796 21.0981 15.8426C21.3001 16.2676 21.3001 16.7626 21.0981 17.1876C20.7831 17.8506 19.8921 18.1536 19.1531 18.3056" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.59149 15.2065C13.2815 15.2065 16.4335 15.7655 16.4335 17.9985C16.4335 20.2325 13.3015 20.8105 9.59149 20.8105C5.90149 20.8105 2.75049 20.2525 2.75049 18.0185C2.75049 15.7845 5.88149 15.2065 9.59149 15.2065Z" fill="white" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.59152 12.019C7.15752 12.019 5.20752 10.068 5.20752 7.634C5.20752 5.201 7.15752 3.25 9.59152 3.25C12.0255 3.25 13.9765 5.201 13.9765 7.634C13.9765 10.068 12.0255 12.019 9.59152 12.019Z" fill="white" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div>
            <h4 class="font-heading text-lg font-medium text-white mb-2">Classical Latin literature</h4>
            <p class="leading-7 text-white">Take care to develop resources continually and integrity.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #351

<section class="py-16 bg-gray-50" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl mx-auto xl:max-w-none">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
          <div class="max-w-xs sm:max-w-sm">
            <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 mb-6">What people says about us</h1>
            <p class="text-lg leading-8">If you have ever wondered how to develop your brand, this is the place for you.</p>
          </div>
        </div>
        <div class="w-full xl:w-1/2 px-4">
          <div class="sm:flex items-center">
            <div class="max-w-md pt-8 px-8 pb-6 mb-8 sm:mb-0 sm:mr-8 bg-white rounded-md">
              <svg width="24" height="16" viewBox="0 0 24 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M0.959961 16C2.41063 14.72 3.62663 13.3973 4.60796 12.032C5.58929 10.624 6.22929 9.30133 6.52796 8.064H6.39996C5.20529 8.064 4.28796 7.68 3.64796 6.912C3.00796 6.144 2.68796 5.26933 2.68796 4.288V3.904C2.68796 2.79467 3.05063 1.87733 3.77596 1.152C4.50129 0.384 5.46129 0 6.65596 0C7.89329 0 8.85329 0.405333 9.53596 1.216C10.2613 2.02667 10.624 3.008 10.624 4.16V4.736C10.624 5.67467 10.4533 6.656 10.112 7.68C9.77063 8.704 9.3013 9.728 8.70396 10.752C8.1493 11.776 7.46663 12.736 6.65596 13.632C5.88796 14.528 5.05596 15.3173 4.15996 16H0.959961ZM13.376 16C14.8266 14.72 16.0426 13.3973 17.024 12.032C18.0053 10.624 18.6453 9.30133 18.944 8.064H18.816C17.6213 8.064 16.704 7.68 16.064 6.912C15.424 6.144 15.104 5.26933 15.104 4.288V3.904C15.104 2.79467 15.4666 1.87733 16.192 1.152C16.9173 0.384 17.8773 0 19.072 0C20.3093 0 21.2693 0.405333 21.952 1.216C22.6773 2.02667 23.04 3.008 23.04 4.16V4.736C23.04 5.67467 22.8693 6.656 22.528 7.68C22.1866 8.704 21.7173 9.728 21.12 10.752C20.5653 11.776 19.8826 12.736 19.072 13.632C18.304 14.528 17.472 15.3173 16.576 16H13.376Z" fill="#00CBA6"></path>
              </svg>
              <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-5">
                    <div x-ref="slide1" class="flex-shrink-0 w-full p-5">
                        <h3 class="font-heading text-lg mt-2 mb-6">The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</h3>
                    </div>
                    <div x-ref="slide2" class="flex-shrink-0 w-full p-5">
                        <h3 class="font-heading text-lg mt-2 mb-6">Unlocking Creativity in Design: How to Break Free from Repetition and Inject Humor into Your Work</h3>
                    </div>
                    <div x-ref="slide3" class="flex-shrink-0 w-full p-5">
                        <h3 class="font-heading text-lg mt-2 mb-6">Crafting Authentic Brand Voice: Strategies to Avoid Non-Characteristic Language and Infuse Humor into Your Messaging</h3>
                    </div>
                </div>
              </div>
              <div class="flex justify-between items-center">
                <div :class="{ 'hidden': activeSlide != 0 }" class="flex items-center">
                  <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                  <div>
                    <h4 class="text-sm font-medium">Denny Bailey</h4>
                    <span class="text-sm text-gray-300">CEO &amp; Founder</span>
                  </div>
                </div>
                <div :class="{ 'hidden': activeSlide != 1 }" class="hidden flex items-center">
                  <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                  <div>
                    <h4 class="text-sm font-medium">Jenna Larson</h4>
                    <span class="text-sm text-gray-300">Creative Director</span>
                  </div>
                </div>
                <div :class="{ 'hidden': activeSlide != 2 }" class="hidden flex items-center">
                  <img class="h-8 w-8 rounded-full mr-6" src="acros-assets/images/testimonials/man-56x56.png" alt="">
                  <div>
                    <h4 class="text-sm font-medium">Alex Chen</h4>
                    <span class="text-sm text-gray-300">Marketing Manager</span>
                  </div>
                </div>
                <div class="flex items-center justify-end">
                  <a x-on:click.prevent="activeSlide = 0, slideWidth = $refs['slide1'].offsetWidth * 0" class="group inline-flex items-center justify-center w-4 h-4 mr-2 rounded-full border border-gray-900" :class="{ 'border-gray-900': activeSlide == 0, 'border-transparent': activeSlide != 0 }" href="#">
                      <div class="w-1 h-1 rounded-full" :class="{ 'bg-transparent': activeSlide == 0, 'bg-gray-900': activeSlide != 0 }"></div>
                  </a>
                  <a x-on:click.prevent="activeSlide = 1, slideWidth = $refs['slide2'].offsetWidth * 1" class="group inline-flex items-center justify-center w-4 h-4 mr-2 rounded-full border border-transparent" :class="{ 'border-gray-900': activeSlide == 1, 'border-transparent': activeSlide != 1 }" href="#">
                      <div class="w-1 h-1 rounded-full bg-gray-900" :class="{ 'bg-transparent': activeSlide == 1, 'bg-gray-900': activeSlide != 1 }"></div>
                  </a>
                  <a x-on:click.prevent="activeSlide = 2, slideWidth = $refs['slide3'].offsetWidth * 2" class="group inline-flex items-center justify-center w-4 h-4 mr-2 rounded-full border border-transparent" :class="{ 'border-gray-900': activeSlide == 2, 'border-transparent': activeSlide != 2 }" href="#">
                      <div class="w-1 h-1 rounded-full bg-gray-900" :class="{ 'bg-transparent': activeSlide == 2, 'bg-gray-900': activeSlide != 2 }"></div>
                  </a>
                </div>
              </div>
            </div>
            <div class="text-right">
              <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex-shrink-0 inline-flex w-16 h-16 items-center justify-center bg-green-50 hover:bg-green-100 rounded-full">
                <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M1.66675 1.33337L6.33342 6.00004L1.66675 10.6667" stroke="#00CBA6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #352

<section x-data="{ mobileNavOpen: false }">
  <nav class="py-4 bg-white">
    <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-black.svg" alt="">
              </a>
            </div>
            <div class="w-auto hidden lg:block">
              <ul class="flex items-center">
                <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">About</a></li>
                <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Company</a></li>
                <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Services</a></li>
                <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Testimonials</a></li>
              </ul>
            </div>
          </div>
        </div>
        <div class="w-auto hidden lg:flex items-center"><a class="inline-block mr-12 font-heading font-medium text-base text-gray-900" href="#">Log in</a><a class="inline-block py-4 px-8 font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Sign up</a></div>
        <div class="w-auto lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-flex w-14 h-14 justify-center items-center bg-gray-50 hover:bg-gray-100 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="black" 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 #353

<section x-data="{ mobileNavOpen: false }">
  <nav class="py-4 bg-white">
    <div class="container px-4 mx-auto">
      <div class="relative flex items-center justify-between">
        <div class="w-auto">
          <a class="inline-block" href="#">
            <img src="acros-assets/logo/logo-acros-black.svg" alt="">
          </a>
        </div>
        <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 hidden lg:block">
          <ul class="flex items-center">
            <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">About</a></li>
            <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Company</a></li>
            <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Services</a></li>
            <li class="font-heading mr-12 text-gray-900"><a class="hover:text-black" href="#">Testimonials</a></li>
          </ul>
        </div>
        <div class="w-auto hidden lg:block"><a class="inline-block py-4 px-8 font-heading font-medium text-base text-white bg-green-500 hover:bg-green-600 border border-green-500 hover:border-green-600 rounded-sm transition duration-200" href="#">Contact</a></div>
        <div class="w-auto lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen" class="inline-flex w-14 h-14 justify-center items-center bg-gray-50 hover:bg-gray-100 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="black" 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>

1
...
15
16
17
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.