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 Gradia library

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

Framework

UI Library

Components

Tailwind Component #41

<section class="relative pt-24 pb-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-5 max-w-xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >Connect with experts</h2>
    <p class="mb-11 max-w-lg mx-auto text-center text-gray-600 text-lg" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    <div class="flex flex-wrap justify-center max-w-4xl mx-auto mb-12 divide-y md:divide-y-0 md:divide-x">
      <div class="w-full md:w-1/3 p-11 md:py-0">
        <div class="flex flex-wrap -m-1.5">
          <div class="w-auto px-1.5">
            <svg class="relative top-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="12" cy="12" r="11.25" stroke="#18181B" stroke-width="1.5"></circle>
              <path d="M7.41357 12.6552L10.0343 15.2758L16.586 8.72412" stroke="#18181B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div class="flex-1 px-1.5">
            <p class="font-heading font-bold text-2xl text-gray-900" >195+</p>
            <p class="text-gray-600 text-base" >Successful Projects</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-11 md:py-0">
        <div class="flex flex-wrap -m-1.5">
          <div class="w-auto px-1.5">
            <svg class="relative top-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="12" cy="12" r="11.25" stroke="#18181B" stroke-width="1.5"></circle>
              <path d="M7.41357 12.6552L10.0343 15.2758L16.586 8.72412" stroke="#18181B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div class="flex-1 px-1.5">
            <p class="font-heading font-bold text-2xl text-gray-900" >23 years</p>
            <p class="text-gray-600 text-base" >Experienced Experts</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-11 md:py-0">
        <div class="flex flex-wrap -m-1.5">
          <div class="w-auto px-1.5">
            <svg class="relative top-1" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="12" cy="12" r="11.25" stroke="#18181B" stroke-width="1.5"></circle>
              <path d="M7.41357 12.6552L10.0343 15.2758L16.586 8.72412" stroke="#18181B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div class="flex-1 px-1.5">
            <p class="font-heading font-bold text-2xl text-gray-900" >98.99%</p>
            <p class="text-gray-600 text-base" >Success Rate</p>
          </div>
        </div>
      </div>
    </div>
    <div class="p-0.5 mb-7 border max-w-lg mx-auto bg-gradient-cyan focus-within:ring focus-within:ring-indigo-400 overflow-hidden rounded-xl">
      <div class="p-0.5 flex flex-col md:flex-row bg-white overflow-hidden rounded-lg">
        <input class="block flex-1 px-5 py-4 md:py-0 text-base text-gray-500 bg-transparent outline-none placeholder-gray-500 rounded-tl-xl rounded-bl-xl" type="text" placeholder="Enter email to get started">
        <button class="group relative font-heading font-semibold w-full md:w-auto py-5 px-8 text-xs text-white bg-gray-900 hover:bg-gray-800 uppercase overflow-hidden rounded-md tracking-px">
          <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full transition ease-in-out duration-500 bg-gradient-cyan"></div>
          <p class="relative z-10" >Join now</p>
        </button>
      </div>
    </div>
    <div class="flex flex-wrap justify-center items-center -m-1">
      <div class="w-auto p-1">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12 8.25V9H12.75V8.25H12ZM6 8.25H5.25V9H6V8.25ZM9.75 11.25C9.75 10.8358 9.41421 10.5 9 10.5C8.58579 10.5 8.25 10.8358 8.25 11.25H9.75ZM8.25 12.75C8.25 13.1642 8.58579 13.5 9 13.5C9.41421 13.5 9.75 13.1642 9.75 12.75H8.25ZM4.5 9H13.5V7.5H4.5V9ZM14.25 9.75V14.25H15.75V9.75H14.25ZM13.5 15H4.5V16.5H13.5V15ZM3.75 14.25V9.75H2.25V14.25H3.75ZM4.5 15C4.08579 15 3.75 14.6642 3.75 14.25H2.25C2.25 15.4926 3.25736 16.5 4.5 16.5V15ZM14.25 14.25C14.25 14.6642 13.9142 15 13.5 15V16.5C14.7426 16.5 15.75 15.4926 15.75 14.25H14.25ZM13.5 9C13.9142 9 14.25 9.33579 14.25 9.75H15.75C15.75 8.50736 14.7426 7.5 13.5 7.5V9ZM4.5 7.5C3.25736 7.5 2.25 8.50736 2.25 9.75H3.75C3.75 9.33579 4.08579 9 4.5 9V7.5ZM11.25 5.25V8.25H12.75V5.25H11.25ZM12 7.5H6V9H12V7.5ZM6.75 8.25V5.25H5.25V8.25H6.75ZM9 3C10.2426 3 11.25 4.00736 11.25 5.25H12.75C12.75 3.17893 11.0711 1.5 9 1.5V3ZM9 1.5C6.92893 1.5 5.25 3.17893 5.25 5.25H6.75C6.75 4.00736 7.75736 3 9 3V1.5ZM8.25 11.25V12.75H9.75V11.25H8.25Z" fill="#A1A1AA"></path>
        </svg>
      </div>
      <div class="w-auto p-1">
        <p class="text-gray-500 text-sm text-center" >We don’t share or sell your email address publicly</p>
      </div>
    </div>
  </div>
</section>

Tailwind Component #42

<section class="relative pt-24 overflow-hidden">
  <div class="container mx-auto px-4 mb-12">
    <div class="flex flex-wrap -m-6">
      <div class="w-full p-6">
        <h2 class="mb-16 max-w-xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >Expert teachers are ready to help you grow fast.</h2>
        <div class="flex flex-wrap -m-6">
          <div class="w-full lg:w-1/2 p-6">
            <div class="mb-11 lg:max-w-sm">
              <h3 class="mb-4 text-transparent bg-clip-text bg-gradient-purple2 font-heading text-xl" >Connect with expert teachers</h3>
              <p class="text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
            </div>
            <div class="mb-11 lg:max-w-sm">
              <h3 class="mb-4 text-transparent bg-clip-text bg-gradient-purple2 font-heading text-xl" >Filter your expertise</h3>
              <p class="text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
            </div>
            <div class="lg:max-w-sm">
              <h3 class="mb-4 text-transparent bg-clip-text bg-gradient-purple2 font-heading text-xl" >No hidden fees</h3>
              <p class="text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="ml-auto lg:absolute lg:top-64 lg:right-0 lg:w-1/2 max-w-max overflow-hidden bg-gradient-purple2 rounded-tl-3xl rounded-bl-3xl"><img class="relative left-16 top-16 transform hover:-translate-x-5 hover:-translate-y-5 transition ease-in-out duration-500" src="gradia-assets/images/features/dahsboard.png" alt=""></div>
</section>

Tailwind Component #43

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-8 py-5 bg-white">
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto mr-14"><a href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
      </div>
    </div>
    <div class="w-auto hidden lg:block">
      <ul class="flex items-center mr-10">
        <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Features</a></li>
        <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Solutions</a></li>
        <li class="font-heading mr-9 text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Resources</a></li>
        <li class="font-heading text-gray-900 hover:text-gray-700 text-lg"><a href="#" >Pricing</a></li>
      </ul>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <button class="group relative p-0.5 font-heading block w-full md:w-auto text-lg text-gray-900 font-medium bg-gradient-cyan overflow-hidden rounded-10">
            <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
            <div class="py-2 px-5 bg-white rounded-lg">
              <p class="relative z-10" >Start Free Trial</p>
            </div>
          </button>
        </div>
        <div class="w-auto lg:hidden">
          <button x-on:click="mobileNavOpen = !mobileNavOpen">
            <svg class="text-gray-800" width="51" height="51" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
              <rect width="56" height="56" rx="28" fill="currentColor"></rect>
              <path d="M37 32H19M37 24H19" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
    </div>
  </div>
  <div :class="{'block': mobileNavOpen, 'hidden': !mobileNavOpen}" class="hidden fixed top-0 left-0 bottom-0 w-4/6 sm:max-w-xs z-50">
    <div x-on:click="mobileNavOpen = !mobileNavOpen" class="fixed inset-0 bg-gray-800 opacity-80"></div>
    <nav class="relative z-10 px-9 py-8 bg-white h-full">
      <div class="flex flex-wrap justify-between h-full">
        <div class="w-full">
          <div class="flex items-center justify-between -m-2">
            <div class="w-auto p-2"><a class="inline-block" href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
            <div class="w-auto p-2">
              <button x-on:click="mobileNavOpen = !mobileNavOpen">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M6 18L18 6M6 6L18 18" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </button>
            </div>
          </div>
        </div>
        <div class="flex flex-col items-center text-center justify-center py-8 w-full">
          <ul>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Features</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Solutions</a></li>
            <li class="mb-12"><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Resources</a></li>
            <li><a class="font-heading font-medium text-lg text-gray-900 hover:text-gray-700" href="#" >Pricing</a></li>
          </ul>
        </div>
        <div class="flex flex-col justify-end w-full">
          <div class="flex flex-wrap">
            <div class="w-full mb-3">
              <button class="p-0.5 font-heading block w-full text-lg text-gray-900 font-medium rounded-10">
                <div class="py-2 px-5 rounded-10">
                  <p >Login</p>
                </div>
              </button>
            </div>
            <div class="w-full">
              <button class="group relative p-0.5 font-heading block w-full text-lg text-gray-900 font-medium bg-gradient-cyan overflow-hidden rounded-10">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-gradient-cyan transition ease-in-out duration-500"></div>
                <div class="py-2 px-5 bg-white rounded-lg">
                  <p class="relative z-10" >Start Free Trial</p>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </nav>
  </div>
</section>

Tailwind Component #44

<section class="py-36 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="flex w-full md:w-1/2 p-6"><img class="mx-auto" src="gradia-assets/images/applications/phone.png" alt=""></div>
      <div class="relative w-full md:w-1/2 p-6"><img class="absolute top-0 left-0" src="gradia-assets/elements/applications/radial.svg" alt="">
        <div class="relative z-10 max-w-2xl text-center">
          <h2 class="mb-6 font-heading font-bold text-6xl sm:text-8xl xl:text-10xl text-gray-900" >Download. Use. Grow</h2>
          <p class="mb-16 text-gray-600 text-lg" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
          <div class="flex flex-wrap justify-center -m-2.5 mb-7">
            <div class="w-auto p-2.5"><a href="#"><img src="gradia-assets/logos/brands/app-store-rounded2.png" alt=""></a></div>
            <div class="w-auto p-2.5"><a href="#"><img src="gradia-assets/logos/brands/play-store-rounded2.png" alt=""></a></div>
          </div>
          <p class="text-gray-600" >46k+ users are using Gradia app</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #45

<section class="pt-16 pb-44 overflow-hidden">
  <div class="container mx-auto px-4"><img class="mx-auto mb-36" src="gradia-assets/logos/gradia-name-black.svg" alt="">
    <div class="max-w-4xl text-center mx-auto mb-36">
      <h2 class="font-heading font-bold text-15xl xl:text-200 text-transparent bg-clip-text bg-gradient-green" >404</h2>
      <p class="relative xl:left-10 font-heading font-semibold text-lg text-gray-900 uppercase tracking-widest xl:tracking-70" >Error</p>
    </div>
    <div class="md:max-w-xl text-center mx-auto">
      <h2 class="mb-5 font-heading font-bold text-6xl sm:text-8xl xl:text-10xl text-gray-900" >Page not found</h2>
      <p class="mb-10 text-gray-600 text-lg" >Try something different or go back to the homepage.</p>
      <div class="p-px md:max-w-max mx-auto bg-gradient-cyan rounded-full">
        <button class="group relative font-heading py-5 px-6 block w-full text-xs text-gray-900 font-semibold uppercase tracking-px bg-white overflow-hidden rounded-full">
          <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full transition ease-in-out duration-500 bg-gradient-cyan"></div>
          <p class="relative z-10" >Go back to Homepage</p>
        </button>
      </div>
    </div>
  </div>
</section>

Tailwind Component #46

<section class="relative pt-24 pb-32 bg-black overflow-hidden"><img class="absolute left-1/2 transform -translate-x-1/2 bottom-0" src="gradia-assets/elements/faq/radial.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <h2 class="mb-16 font-heading font-semibold text-6xl sm:text-7xl text-white" >Frequently Asked Question</h2>
    <div class="py-9 border-t border-white border-opacity-10">
      <div class="flex flex-wrap -m-6">
        <div class="w-full md:w-1/2 p-6">
          <h3 class="font-heading font-medium text-xl text-white" >Is it really unlimited downloads?</h3>
        </div>
        <div class="w-full md:w-1/2 p-6">
          <div class="md:max-w-xl">
            <p class="text-base text-gray-200" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="py-9 border-t border-white border-opacity-10">
      <div class="flex flex-wrap -m-6">
        <div class="w-full md:w-1/2 p-6">
          <h3 class="font-heading font-medium text-xl text-white" >What kind of file do you offer with the packages?</h3>
        </div>
        <div class="w-full md:w-1/2 p-6">
          <div class="md:max-w-xl">
            <p class="text-base text-gray-200" >Consectetur adipiscing elit. Sagittis euismod ornare aenean ut justo elit amet. Gravida pulvinar ac elementum praesent vel quis.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="py-9 border-t border-b border-white border-opacity-10">
      <div class="flex flex-wrap -m-6">
        <div class="w-full md:w-1/2 p-6">
          <h3 class="font-heading font-medium text-xl text-white" >Do you offer discounts on annual plans?</h3>
        </div>
        <div class="w-full md:w-1/2 p-6">
          <div class="md:max-w-xl">
            <p class="text-base text-gray-200" >Ipsum dolor sit amet, consectetur adipiscing elit. Gravida pulvinar ac elementum praesent vel quis accumsan, proin rhoncus.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #47

<section class="py-44 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap items-center -m-4">
          <div class="w-auto p-4">
            <div class="bg-gradient-cyan rounded-full overflow-hidden"><img src="gradia-assets/images/numbers/avatar-bg.png" alt=""></div>
          </div>
          <div class="w-auto xl:flex-1 p-4">
            <p class="mb-6 text-gray-300 text-xl" >“You made it so simple. My new team is so much faster and easier to work with than my old site. I just choose the page, make the change.”</p>
            <h3 class="font-heading font-medium text-white text-xl" >Denny Jones, founder of Growthio</h3>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="p-7 md:max-w-sm mx-auto text-center bg-gradient-cyan2 rounded-3xl">
          <h2 class="mb-6 font-heading font-bold text-14xl sm:text-15xl tracking-tighter" >58:1</h2>
          <p class="text-lg text-gray-900" >Average Ad ROI when we do marketing for eCommerce</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #48

<section class="py-32 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="max-w-lg">
          <h2 class="mb-5 font-heading font-bold text-6xl sm:text-7xl text-white" >Try Gradia for Free</h2>
          <p class="mb-11 text-gray-400 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
          <ul>
            <li class="flex items-center mb-5 text-base text-white">
              <svg class="mr-2.5" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="9" cy="9" r="8.5" stroke="white"></circle>
                <path d="M5.5 9.5L7.5 11.5L12.5 6.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >100GB Cloud Storage</p>
            </li>
            <li class="flex items-center mb-5 text-base text-white">
              <svg class="mr-2.5" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="9" cy="9" r="8.5" stroke="white"></circle>
                <path d="M5.5 9.5L7.5 11.5L12.5 6.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >1 Website</p>
            </li>
            <li class="flex items-center mb-5 text-base text-white">
              <svg class="mr-2.5" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="9" cy="9" r="8.5" stroke="white"></circle>
                <path d="M5.5 9.5L7.5 11.5L12.5 6.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >Real-time Analytics</p>
            </li>
            <li class="flex items-center mb-5 text-base text-white">
              <svg class="mr-2.5" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <circle cx="9" cy="9" r="8.5" stroke="white"></circle>
                <path d="M5.5 9.5L7.5 11.5L12.5 6.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              </svg>
              <p >Premium Support</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-lg ml-auto"><a href="#">
            <div class="mb-5 p-px bg-gradient-cyan rounded-md">
              <div class="p-4 bg-gray-900 rounded-md">
                <div class="flex flex-wrap justify-between -m-3">
                  <div class="w-auto p-3">
                    <div class="flex flex-wrap items-center -m-3">
                      <div class="w-auto p-3"><img src="gradia-assets/elements/pricing/checkbox-white.svg" alt=""></div>
                      <div class="w-auto p-3">
                        <h3 class="mb-1 font-heading font-medium text-white text-xl" >Annual - 2 months free</h3>
                        <p class="text-gray-400 text-base" >$99/year, that’s $8.49/month only</p>
                      </div>
                    </div>
                  </div>
                  <div class="w-auto p-3">
                    <p class="font-heading px-3 py-1.5 font-semibold text-xs text-gray-300 bg-gray-800 tracking-px uppercase rounded-full" >Best value</p>
                  </div>
                </div>
              </div>
            </div></a><a href="#">
            <div class="mb-5 p-4 bg-black border border-gray-800 rounded-md">
              <div class="flex flex-wrap justify-between -m-3">
                <div class="w-auto p-3">
                  <div class="flex flex-wrap items-center -m-3">
                    <div class="w-auto p-3"><img src="gradia-assets/elements/pricing/checkbox-black.svg" alt=""></div>
                    <div class="w-auto p-3">
                      <h3 class="mb-1 font-heading font-medium text-white text-xl" >Monthly - 1st week free</h3>
                      <p class="text-gray-400 text-base" >$12/month only</p>
                    </div>
                  </div>
                </div>
              </div>
            </div></a>
          <div class="group relative">
            <div class="absolute top-0 left-0 w-full h-full bg-gradient-green opacity-0 group-hover:opacity-50 rounded-lg transition ease-out duration-300"></div>
            <button class="p-1 w-full font-heading font-semibold text-xs text-gray-900 uppercase tracking-px overflow-hidden rounded-md">
              <div class="relative px-9 py-5 bg-gradient-green overflow-hidden rounded-md">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
                <p class="relative z-10" >Try for free</p>
              </div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #49

<section class="pt-24 pb-32 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-lg mx-auto text-center mb-14">
      <h2 class="mb-5 font-heading font-semibold text-6xl sm:text-7xl text-white" >Get in touch</h2>
      <p class="text-gray-400 text-lg" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <div class="flex flex-wrap max-w-xl mx-auto -m-2.5">
      <div class="w-full p-2.5">
        <input class="w-full px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 rounded" type="text" placeholder="Your full name">
      </div>
      <div class="w-full p-2.5">
        <input class="w-full px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 rounded" type="text" placeholder="Your email address">
      </div>
      <div class="w-full p-2.5">
        <textarea class="w-full h-40 px-5 py-4 text-gray-500 text-base bg-transparent border border-gray-800 outline-none focus:ring-4 focus:ring-indigo-500 placeholder-gray-500 resize-none rounded" type="text" placeholder="Write message"></textarea>
      </div>
      <div class="w-full p-2.5">
        <div class="group relative">
          <div class="absolute top-0 left-0 w-full h-full bg-gradient-green opacity-0 group-hover:opacity-50 rounded-lg transition ease-out duration-300"></div>
          <button class="p-1 w-full font-heading font-semibold text-xs text-gray-900 uppercase tracking-px overflow-hidden rounded-md">
            <div class="relative p-5 px-11 bg-gradient-green overflow-hidden rounded-md">
              <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
              <p class="relative z-10" >Send message</p>
            </div>
          </button>
        </div>
      </div>
      <div class="w-full p-2.5">
        <p class="text-sm text-gray-500 text-center"><span >By clicking the send button, you agree with our </span><a class="pb-1 hover:text-gray-400 border-b border-gray-500" href="#" >Terms &amp; Conditions</a></p>
      </div>
    </div>
  </div>
</section>

Tailwind Component #50

<section class="pt-28 pb-32 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <p class="mb-16 font-heading font-semibold text-6xl sm:text-7xl text-white text-center" >Trusted by popular marketing brands</p>
    <div class="flex flex-wrap justify-center items-center -m-10 pb-10 border-b border-gray-800">
      <div class="w-auto p-10"><img src="gradia-assets/logos/brands/brand-light4.png" alt=""></div>
      <div class="w-auto p-10"><img src="gradia-assets/logos/brands/brand-light1.png" alt=""></div>
      <div class="w-auto p-10"><img src="gradia-assets/logos/brands/brand-light2.png" alt=""></div>
      <div class="w-auto p-10"><img src="gradia-assets/logos/brands/brand-light3.png" alt=""></div>
    </div>
    <div class="mt-24 max-w-2xl mx-auto text-center">
      <div class="flex items-center justify-center -m-1 mb-10"><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""><img class="p-1" src="gradia-assets/elements/logos/star.svg" alt=""></div>
      <p class="mb-5 text-xl text-gray-300" >“You made it so simple. My new team is so much faster and easier to work with than my old site. I just choose the page, make the change.”</p>
      <p class="font-heading text-xl text-white" >Denny Jones, founder of Growthio</p>
    </div>
  </div>
</section>

Tailwind Component #51

<section class="pt-20 pb-32 bg-black overflow-hidden">
  <div class="container mx-auto px-4"><img class="mx-auto mb-28" src="gradia-assets/logos/gradia-name-white.svg" alt="">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="bg-gradient-cyan2 p-1 mx-auto max-w-max overflow-hidden rounded-full"><img class="object-cover rounded-full" src="gradia-assets/images/sign-in/woman.jpeg" alt=""></div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-md">
          <h2 class="mb-3 font-heading font-bold text-white text-6xl sm:text-7xl" >Welcome to Gradia</h2>
          <p class="mb-16 text-lg text-gray-500" >Lorem ipsum dolor sit amet, consectetur adipis.</p>
          <div class="flex flex-wrap -m-2 mb-6">
            <div class="w-full p-2">
              <p class="mb-2.5 font-medium text-base text-white" >Email address</p>
              <div class="p-px bg-gradient-cyan rounded-lg">
                <input class="w-full px-6 py-4 placeholder-gray-500 text-base text-gray-500 bg-black outline-none focus:ring-4 focus:ring-indigo-500 rounded-lg" type="text" placeholder="i.e. john@example.com" name="email">
              </div>
            </div>
            <div class="w-full p-2">
              <p class="mb-2.5 font-medium text-base text-white" >Password</p>
              <div class="p-px bg-gradient-cyan rounded-lg">
                <input class="w-full px-6 py-4 placeholder-gray-500 text-base text-gray-500 bg-black outline-none focus:ring-4 focus:ring-indigo-500 rounded-lg" type="text" placeholder="********" name="password">
              </div>
            </div>
          </div>
          <div class="flex flex-wrap -m-1.5 mb-5">
            <div class="w-auto p-1.5">
              <input class="w-4 h-4" type="checkbox">
            </div>
            <div class="flex-1 p-1.5">
              <p class="text-gray-500 text-sm" >Remember me</p>
            </div>
          </div>
          <div class="group relative md:max-w-max mb-5">
            <div class="absolute top-0 left-0 w-full h-full bg-gradient-blue opacity-0 group-hover:opacity-50 rounded-full transition ease-out duration-300"></div>
            <button class="p-1 w-full font-heading font-semibold text-xs text-white uppercase tracking-px overflow-hidden rounded-full">
              <div class="relative py-5 px-14 bg-gradient-blue overflow-hidden rounded-full">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
                <p class="relative z-10 group-hover:text-gray-900" >Login</p>
              </div>
            </button>
          </div>
          <p class="text-gray-500 text-sm"><span >Don’t have an account? </span><a class="text-white hover:text-gray-200" href="#" >Create free account</a></p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #52

<section class="pt-20 pb-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="md:max-w-lg mb-24">
      <h2 class="mb-4 font-heading font-semibold text-gray-900 text-6xl sm:text-7xl" >From our blog</h2>
      <p class="text-lg text-gray-500" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <div class="flex flex-wrap -m-11">
      <div class="w-full md:w-1/2 p-11"><a class="group" href="#">
          <div class="flex flex-wrap items-center -m-4">
            <div class="w-auto p-4">
              <div class="overflow-hidden rounded-xl"><img class="transform hover:scale-110 transition ease-out duration-500" src="gradia-assets/images/blog/blog-avatar.png" alt=""></div>
            </div>
            <div class="flex-1 p-4">
              <p class="mb-4 font-heading font-medium text-xl text-gray-900 group-hover:underline" >You will never believe these bizarre truth of travel. </p>
              <h2 class="font-heading font-medium text-xs uppercase text-gray-500 tracking-px" >Technology  .  4 min read</h2>
            </div>
          </div></a></div>
      <div class="w-full md:w-1/2 p-11"><a class="group" href="#">
          <div class="flex flex-wrap items-center -m-4">
            <div class="w-auto p-4">
              <div class="overflow-hidden rounded-xl"><img class="transform hover:scale-110 transition ease-out duration-500" src="gradia-assets/images/blog/blog-avatar2.png" alt=""></div>
            </div>
            <div class="flex-1 p-4">
              <p class="mb-4 font-heading font-medium text-xl text-gray-900 group-hover:underline" >You will never believe these bizarre truth of travel. </p>
              <h2 class="font-heading font-medium text-xs uppercase text-gray-500 tracking-px" >Technology  .  4 min read</h2>
            </div>
          </div></a></div>
    </div>
  </div>
</section>

Tailwind Component #53

<section class="relative py-36 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="p-16 bg-gradient-cyan2 rounded-10">
      <div class="flex flex-wrap items-center justify-between -m-6">
        <div class="w-full md:w-1/2 p-6">
          <div class="md:max-w-md">
            <p class="mb-5 font-heading font-medium text-xl text-gray-900 text-opacity-60" >Start with a free account</p>
            <h2 class="font-heading font-bold text-5xl sm:text-6xl text-gray-900" >Ready to grow your online business?</h2>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-6">
          <div class="flex flex-wrap justify-end -m-2">
            <div class="w-full xl:w-auto p-2">
              <button class="font-heading py-5 px-10 block w-full uppercase text-xs tracking-px text-gray-900 font-bold bg-white hover:bg-gray-50 rounded-md" >Sign up now</button>
            </div>
            <div class="w-full xl:w-auto p-2">
              <button class="font-heading py-4 px-8 block w-full uppercase text-xs tracking-px text-white font-bold bg-transparent border hover:border-gray-200 border-white rounded-md">
                <div class="flex items-center justify-center py-0.5">
                  <svg class="mr-2.5" width="19" height="18" viewBox="0 0 19 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M8.18003 13.4261C6.8586 14.3918 5 13.448 5 11.8113V5.43865C5 3.80198 6.8586 2.85821 8.18003 3.82387L12.5403 7.01022C13.6336 7.80916 13.6336 9.44084 12.5403 10.2398L8.18003 13.4261Z" stroke="#F9FAFB" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
                  </svg>
                  <p >How it works</p>
                </div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #54

<section class="pt-20 pb-32 bg-black overflow-hidden">
  <div class="container mx-auto px-4"><img class="mx-auto mb-28" src="gradia-assets/logos/gradia-name-white.svg" alt="">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="bg-gradient-cyan2 p-1 mx-auto max-w-max overflow-hidden rounded-full"><img class="object-cover rounded-full" src="gradia-assets/images/sign-up/woman.jpeg" alt=""></div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-md">
          <h2 class="mb-3 font-heading font-bold text-white text-6xl sm:text-7xl" >Sign up for free</h2>
          <p class="mb-16 text-lg text-gray-500" >Lorem ipsum dolor sit amet, consectetur adipis.</p>
          <div class="flex flex-wrap -m-2 mb-6">
            <div class="w-full p-2">
              <p class="mb-2.5 font-medium text-base text-white" >Full name</p>
              <div class="p-px bg-gradient-cyan focus-within:ring-4 focus-within:ring-indigo-500 rounded-lg">
                <input class="w-full px-6 py-4 placeholder-gray-500 text-base text-gray-500 bg-black outline-none rounded-lg" type="text" placeholder="i.e. John Doe" name="name">
              </div>
            </div>
            <div class="w-full p-2">
              <p class="mb-2.5 font-medium text-base text-white" >Email address</p>
              <div class="p-px bg-gradient-cyan focus-within:ring-4 focus-within:ring-indigo-500 rounded-lg">
                <input class="w-full px-6 py-4 placeholder-gray-500 text-base text-gray-500 bg-black outline-none rounded-lg" type="text" placeholder="Email address" name="email">
              </div>
            </div>
            <div class="w-full p-2">
              <p class="mb-2.5 font-medium text-base text-white" >Password</p>
              <div class="p-px bg-gradient-cyan focus-within:ring-4 focus-within:ring-indigo-500 rounded-lg">
                <input class="w-full px-6 py-4 placeholder-gray-500 text-base text-gray-500 bg-black outline-none rounded-lg" type="text" placeholder="********" name="password">
              </div>
            </div>
          </div>
          <div class="flex flex-wrap -m-1.5 mb-5">
            <div class="w-auto p-1.5">
              <input class="w-4 h-4" type="checkbox">
            </div>
            <div class="flex-1 p-1.5">
              <p class="text-gray-500 text-sm"><span >I agree to the </span><a class="text-white hover:text-gray-200" href="#" >Terms &amp; Conditions</a><span > of Gradia</span></p>
            </div>
          </div>
          <div class="group relative md:max-w-max mb-5">
            <div class="absolute top-0 left-0 w-full h-full bg-gradient-blue opacity-0 group-hover:opacity-50 rounded-full transition ease-out duration-300"></div>
            <button class="p-1 w-full font-heading font-semibold text-xs text-white uppercase tracking-px overflow-hidden rounded-full">
              <div class="relative py-5 px-14 bg-gradient-blue overflow-hidden rounded-full">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
                <p class="relative z-10 group-hover:text-gray-900" >Sign Up</p>
              </div>
            </button>
          </div>
          <p class="text-gray-500 text-sm"><span >Already have an account? </span><a class="text-white hover:text-gray-200" href="#" >Login now</a></p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #55

<section class="pt-24 bg-gradient-gray2 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 lg:w-3/12 p-6">
        <div class="h-full">
          <h3 class="mb-9 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >Company</h3>
          <ul>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Features</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Pricing</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Affiliate Program</a></li>
            <li><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Press Kit</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-3/12 p-6">
        <div class="h-full">
          <h3 class="mb-9 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >Support</h3>
          <ul>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Account</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Help</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Contact Us</a></li>
            <li><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Customer Support</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-3/12 p-6">
        <div class="h-full">
          <h3 class="mb-9 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >Products</h3>
          <ul>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Flex</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Zospace</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Artemis</a></li>
            <li><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Gradia</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-3/12 p-6">
        <div class="h-full">
          <h3 class="mb-9 font-heading font-semibold text-xs text-gray-500 uppercase tracking-px" >Legals</h3>
          <ul>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Terms &amp; Conditions</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Privacy Policy</a></li>
            <li><a class="font-heading font-medium text-base text-gray-900 hover:text-gray-700" href="#" >Licensing</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div class="pt-20 pb-8">
      <div class="border-b border-gray-200"></div>
    </div>
    <div class="flex flex-wrap items-center justify-between pb-8 -m-6">
      <div class="w-auto p-6">
        <p class="text-sm text-gray-900" >© Copyright 2022. All Rights Reserved by Gradia.</p>
      </div>
      <div class="w-auto p-6">
        <div class="flex flex-wrap items-center -m-1.5">
          <div class="w-auto p-1.5">
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.5 6.66667L9.0755 11.0503C9.63533 11.4236 10.3647 11.4236 10.9245 11.0503L17.5 6.66667M4.16667 15.8333H15.8333C16.7538 15.8333 17.5 15.0871 17.5 14.1667V5.83334C17.5 4.91286 16.7538 4.16667 15.8333 4.16667H4.16667C3.24619 4.16667 2.5 4.91286 2.5 5.83334V14.1667C2.5 15.0871 3.24619 15.8333 4.16667 15.8333Z" stroke="#18181B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </div>
          <div class="w-auto p-1.5">
            <h3 class="font-heading font-medium text-base text-gray-900" >info@gradia.com</h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #56

<section class="relative py-28 md:py-64 bg-black overflow-hidden"><img class="absolute top-0 left-1/2 transform -translate-x-1/2" src="gradia-assets/elements/testimonials/radial.svg" alt="">
  <div class="relative z-50 container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="h-full md:max-w-lg">
          <div class="flex flex-wrap h-full -m-6">
            <div class="w-full p-6">
              <h2 class="mb-6 font-heading font-bold text-6xl sm:text-7xl text-white" >Trusted by 14,000+ designers, developers &amp; marketers.</h2>
              <p class="text-lg text-gray-400" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="px-4 mt-12 md:mt-0 md:w-1/2 md:absolute md:right-0 md:top-1/2 md:transform md:-translate-y-1/2">
    <div class="flex flex-nowrap -m-4">
      <div class="flex-shrink-0 p-4">
        <div class="max-w-xl bg-white py-16 px-20 rounded-10"><img src="gradia-assets/elements/testimonials/quote.svg" alt="">
          <p class="my-16 font-heading font-medium text-2xl text-gray-900" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nisi, lorem massa bibendum vulputate. Quam suspendisse elit, mi lectus sem. Erat lacus, vehicula dictumst blandit eleifend sapien adipiscing. Cras massa eu faucibus.</p>
          <p class="font-heading font-bold text-lg text-gray-900" >Brooklyn Simmons</p>
          <p class="text-sm text-gray-600" >Senior Software Developer</p>
        </div>
      </div>
      <div class="flex-shrink-0 p-4">
        <div class="max-w-xl bg-white py-16 px-20 rounded-10"><img src="gradia-assets/elements/testimonials/quote.svg" alt="">
          <p class="my-16 font-heading font-medium text-2xl text-gray-900" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nisi, lorem massa bibendum vulputate. Quam suspendisse elit, mi lectus sem. Erat lacus, vehicula dictumst blandit eleifend sapien adipiscing. Cras massa eu faucibus.</p>
          <p class="font-heading font-bold text-lg text-gray-900" >Brooklyn Simmons</p>
          <p class="text-sm text-gray-600" >Senior Software Developer</p>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #57

<section class="relative pt-28 pb-36 bg-black overflow-hidden">
  <div class="container mx-auto px-4">
    <p class="mb-6 max-w-max mx-auto text-center text-transparent bg-clip-text bg-gradient-cyan2 font-heading text-xs uppercase font-semibold tracking-px" >The team that made us successful</p>
    <h2 class="mb-20 font-heading font-semibold text-center text-6xl sm:text-7xl text-white" >Expert Team Members</h2>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="flex flex-col justify-end h-full relative bg-gradient-cyan overflow-hidden rounded-10"><img class="mx-auto w-full" src="gradia-assets/images/teams/avatar-xl.png" alt="">
          <div class="absolute bottom-0 left-0 w-full p-2.5">
            <div class="p-5 w-full bg-white rounded-md">
              <h2 class="font-heading font-bold text-lg text-gray-900" >Cody Fisher</h2>
              <p class="text-sm text-gray-600" >Co-Founder, CEO</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="flex flex-col justify-end h-full relative bg-gradient-cyan overflow-hidden rounded-10"><img class="mx-auto w-full" src="gradia-assets/images/teams/avatar-xl2.png" alt="">
          <div class="absolute bottom-0 left-0 w-full p-2.5">
            <div class="p-5 w-full bg-white rounded-md">
              <h2 class="font-heading font-bold text-lg text-gray-900" >Eleanor Pena</h2>
              <p class="text-sm text-gray-600" >Co-Founder, CTO</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="flex flex-col justify-end h-full relative bg-gradient-cyan overflow-hidden rounded-10"><img class="mx-auto w-full" src="gradia-assets/images/teams/avatar-xl3.png" alt="">
          <div class="absolute bottom-0 left-0 w-full p-2.5">
            <div class="p-5 w-full bg-white rounded-md">
              <h2 class="font-heading font-bold text-lg text-gray-900" >Devon Lane</h2>
              <p class="text-sm text-gray-600" >Chief Marketing Officer</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="flex flex-col justify-end h-full relative bg-gradient-cyan overflow-hidden rounded-10"><img class="mx-auto w-full" src="gradia-assets/images/teams/avatar-xl4.png" alt="">
          <div class="absolute bottom-0 left-0 w-full p-2.5">
            <div class="p-5 w-full bg-white rounded-md">
              <h2 class="font-heading font-bold text-lg text-gray-900" >Robert Fox</h2>
              <p class="text-sm text-gray-600" >Senior Software Developer</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #58

<section class="relative pt-28 pb-32 bg-black overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }"><img class="h-full absolute top-0 left-1/2 transform -translate-x-1/2" src="gradia-assets/elements/how-it-works/radial.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="mb-16 max-w-xl">
      <h2 class="mb-6 font-heading font-semibold text-white text-6xl sm:text-7xl" >Three steps to get started</h2>
      <p class="text-gray-400 text-lg" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
    </div>
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex -m-3 mb-11 transition-transform duration-500 ease-in-out">
      <div x-ref="slide1" class="flex-shrink-0 max-w-md w-full p-3">
        <div class="bg-gray-900 py-11 px-9 rounded-10">
          <div class="mb-11 flex justify-center items-center font-heading text-xl bg-gradient-green w-12 h-12 text-gray-900 rounded-full" >1</div>
          <p class="text-white text-xl" >Subscribe to a plan that suits you better and place orders as many as you want.</p>
        </div>
      </div>
      <div x-ref="slide2" class="flex-shrink-0 max-w-md w-full p-3">
        <div class="max-w-md bg-gray-900 py-11 px-9 rounded-10">
          <div class="mb-11 flex justify-center items-center font-heading text-xl bg-gradient-green w-12 h-12 text-gray-900 rounded-full" >2</div>
          <p class="text-white text-xl" >Subscribe to a plan that suits you better and place orders as many as you want.</p>
        </div>
      </div>
      <div x-ref="slide3" class="flex-shrink-0 max-w-md w-full p-3">
        <div class="max-w-md bg-gray-900 py-11 px-9 rounded-10">
          <div class="mb-11 flex justify-center items-center font-heading text-xl bg-gradient-green w-12 h-12 text-gray-900 rounded-full" >3</div>
          <p class="text-white text-xl" >Subscribe to a plan that suits you better and place orders as many as you want.</p>
        </div>
      </div>
      <div x-ref="slide4" class="flex-shrink-0 max-w-md w-full p-3">
        <div class="max-w-md bg-gray-900 py-11 px-9 rounded-10">
          <div class="mb-11 flex justify-center items-center font-heading text-xl bg-gradient-green w-12 h-12 text-gray-900 rounded-full" >4</div>
          <p class="text-white text-xl" >Subscribe to a plan that suits you better and place orders as many as you want.</p>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap wrap justify-center md:justify-end -m-2">
      <div class="w-auto p-2"><a x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 19L3 12M3 12L10 5M3 12L21 12" stroke="#3F3F46" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
      <div class="w-auto p-2"><a x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" href="#">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 5L21 12M21 12L14 19M21 12L3 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg></a></div>
    </div>
  </div>
</section>

Tailwind Component #59

<section class="relative py-32 bg-black overflow-hidden"><img class="absolute top-0 left-0 h-full" src="gradia-assets/elements/newsletter/radial.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="flex flex-wrap items-center -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="max-w-md">
          <h2 class="mb-2.5 font-heading font-semibold text-5xl text-white" >Get latest updates</h2>
          <p class="mb-12 text-gray-300 text-base" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vehicula massa in enim luctus. Rutrum arcu.</p>
        </div>
        <div class="flex max-w-md mb-4 focus-within:ring-4 focus-within:ring-indigo-500 rounded-full">
          <div class="flex-1">
            <input class="w-full py-4 px-6 text-sm text-gray-600 placeholder-gray-600 outline-none rounded-tl-full rounded-bl-full" type="text" placeholder="Email address">
          </div>
          <div class="w-auto">
            <div class="group relative h-full overflow-hidden rounded-tr-full rounded-br-full">
              <button class="h-full px-11 font-heading font-medium text-gray-900 text-base bg-gradient-green rounded-tr-full overflow-hidden rounded-br-full">
                <div class="absolute top-0 left-0 transform -translate-y-full group-hover:-translate-y-0 h-full w-full bg-white transition ease-in-out duration-500"></div>
                <p class="relative z-10" >Join Now</p>
              </button>
            </div>
          </div>
        </div>
        <p class="text-sm text-gray-400" >Get the latest content in your inbox every week. We don’t spam.</p>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap -m-4">
          <div class="w-full md:w-1/2 p-4">
            <div class="px-6 py-5 bg-black bg-opacity-20 rounded-10">
              <h2 class="mb-1.5 font-heading font-bold text-5xl sm:text-7xl xl:text-9xl text-white" >47k+</h2>
              <p class="mb-9 text-gray-300 text-base" >Designer, Developers &amp; Marketers</p>
              <p class="text-gray-500" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
            </div>
          </div>
          <div class="w-full md:w-1/2 p-4">
            <div class="px-6 py-5 bg-black bg-opacity-20 rounded-10">
              <h2 class="mb-1.5 font-heading font-bold text-5xl sm:text-7xl xl:text-9xl text-white" >12</h2>
              <p class="mb-9 text-gray-300 text-base" >Hand-made Reports Every Week </p>
              <p class="text-gray-500" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Tailwind Component #60

<section class="relative pt-24 pb-48 overflow-hidden bg-black"><img class="absolute top-0 right-0" src="gradia-assets/elements/features/radial1.svg" alt=""><img class="absolute bottom-0 left-0" src="gradia-assets/elements/features/radial2.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="md:max-w-3xl md:mx-auto">
      <h2 class="mb-20 max-w-xl font-heading font-bold text-6xl sm:text-7xl text-white" >Recommended by world-class companies.</h2>
      <div class="flex flex-wrap -m-5">
        <div class="w-full md:w-1/2 md:relative md:top-12 p-5">
          <div class="h-full p-9 transform hover:-translate-y-3 bg-gradient-orange2 rounded-2xl transition ease-out duration-1000">
            <p class="mb-4 font-heading text-base text-white text-opacity-70" >Advance reports</p>
            <h3 class="mb-20 font-heading font-bold text-white text-3xl" >Daily analytics help you to understand business growth.</h3>
            <div>
              <div class="pr-7">
                <div class="relative z-10 p-5 text-center bg-white rounded-10 shadow-3xl">
                  <p class="mb-3 text-3xl font-bold text-black" >162.9k</p>
                  <p class="mb-3 text-xs font-bold text-black" >Last 7 Days Website Visits</p>
                  <p class="text-xs text-gray-500" >10% Increase from Last Week</p>
                </div>
              </div>
              <div class="-mt-14 pl-7">
                <div class="p-5 text-center bg-white opacity-30 rounded-10 shadow-3xl">
                  <p class="mb-3 text-3xl font-bold text-black" >162.9k</p>
                  <p class="mb-3 text-xs font-bold text-black" >Last 7 Days Website Visits</p>
                  <p class="text-xs text-gray-500" >10% Increase from Last Week</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-5">
          <div class="flex flex-col justify-between h-full transform hover:-translate-y-3 overflow-hidden bg-gradient-blue rounded-2xl transition ease-out duration-1000">
            <div class="p-9 pb-0">
              <p class="mb-4 font-heading text-base text-white text-opacity-70" >Unlimited entertainment</p>
              <h3 class="mb-5 font-heading font-bold text-white text-3xl" >Give a break. Make employee happy in the office.</h3>
            </div><img class="mx-auto w-full" src="gradia-assets/images/features/headphones.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 md:relative md:top-12 p-5">
          <div class="h-full p-9 transform hover:-translate-y-3 bg-gradient-purple rounded-2xl transition ease-out duration-1000">
            <p class="mb-4 font-heading text-base text-white text-opacity-70" >Fastest growth</p>
            <h3 class="mb-20 font-heading font-bold text-white text-3xl" >Track results. Share with anyone without taking the hassle.</h3><img class="mx-auto" src="gradia-assets/images/features/card.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 p-5">
          <div class="h-full p-9 pb-0 bg-gradient-violet2 transform hover:-translate-y-3 rounded-2xl transition ease-out duration-1000">
            <p class="mb-4 font-heading text-base text-white text-opacity-70" >Customer review</p>
            <h3 class="mb-20 font-heading font-bold text-white text-3xl" >20k+ experts love our products &amp; support.</h3><img class="mx-auto" src="gradia-assets/images/features/comments.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

1
2
3
4
5
6
...
11

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.