Tailwind CSS Components

Framework

UI Library

7-Day Pass

Full Shuffle Editor access for just $10

Great for quick projects and for testing everything Shuffle can do. One-time payment, not a subscription.

New to Shuffle? Try our tools:

Multi-AI Designer Kick off several design directions at once, then build on your favorite. Visual Editor Build from UI components and templates, then customize every detail.

Components

Tailwind Component #421

Tailwind CSS

Gradia

<section class="pt-28 bg-gradient-orange overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="mb-6 font-heading font-bold text-8xl sm:text-9xl md:text-10xl text-white" >Book free meetings with our experts.</h2>
          <p class="mb-8 text-base text-white" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
          <button class="mb-8 font-heading py-4 px-6 block w-full md:w-auto text-lg text-gray-900 font-bold bg-white hover:bg-gray-50 rounded-md" >Buy for $49.99 </button>
          <div class="flex flex-wrap -m-1.5">
            <p class="p-1.5 text-white" >Compatible with</p><img class="p-1.5" src="gradia-assets/elements/cta/apple.svg" alt=""><img class="p-1.5" src="gradia-assets/elements/cta/microsoft.svg" alt=""><img class="p-1.5" src="gradia-assets/elements/cta/android.svg" alt="">
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6 pb-0"><img class="mx-auto" src="gradia-assets/images/cta/mobile.png" alt=""></div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Call to action Component Generator

Tailwind Component #422

Tailwind CSS

Gradia

<section class="py-36 overflow-hidden" x-data="{ tab: 1 }">
  <div class="container mx-auto px-4">
    <div class="max-w-3xl mx-auto">
      <div class="flex flex-wrap justify-center md:justify-between -m-6 mb-20">
        <div class="w-auto p-6">
          <a x-on:click.prevent="tab = 1" class="font-heading font-semibold text-lg text-gray-900 hover:text-gray-800" href="#">
            <p class="mb-2 px-7" >Create Free Account</p>
            <div :class="{ 'bg-gradient-cyan': tab == 1, 'bg-gray-200': tab != 1 }" class="h-0.5 bg-gradient-cyan"></div>
          </a>
        </div>
        <div class="w-auto p-6">
          <a x-on:click.prevent="tab = 2" class="font-heading font-semibold text-lg text-gray-900 hover:text-gray-800" href="#">
            <p class="mb-2 px-7" >Build A Team</p>
            <div :class="{ 'bg-gradient-cyan': tab == 2, 'bg-gray-200': tab != 2 }" class="h-0.5 bg-gray-200"></div>
          </a>
        </div>
        <div class="w-auto p-6">
          <a x-on:click.prevent="tab = 3" class="font-heading font-semibold text-lg text-gray-900 hover:text-gray-800" href="#">
            <p class="mb-2 px-7" >Start Your Project</p>
            <div :class="{ 'bg-gradient-cyan': tab == 3, 'bg-gray-200': tab != 3 }" class="h-0.5 bg-gray-200"></div></a>
          </div>
      </div>
      <div class="flex flex-wrap -m-11">
        <div class="w-full md:w-1/2 p-11"><img class="mx-auto" src="gradia-assets/images/how-it-works/illustration.png" alt=""></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI How it works Component Generator

Tailwind Component #423

Tailwind CSS

Gradia

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="px-8 py-5 lg:py-8 bg-white">
    <div class="container 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 href="#"><img src="gradia-assets/logos/gradia-name-black.svg" alt=""></a></div>
          </div>
        </div>
        <div class="w-auto">
          <div class="flex flex-wrap items-center">
            <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 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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Navigation (horizontal) Component Generator

Tailwind Component #424

Tailwind CSS

Gradia

<section class="relative pt-24 pb-32 bg-gray-50 overflow-hidden">
  <div class="container mx-auto px-4">
    <h2 class="mb-5 max-w-2xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >Team Members</h2>
    <p class="mb-16 text-base max-w-md mx-auto text-center text-gray-600" >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 max-w-6xl mx-auto -m-7">
      <div class="w-full md:w-1/2 xl:w-1/3 p-7">
        <div class="text-center p-16 bg-white transform hover:-translate-y-3 rounded-10 shadow-7xl transition ease-out duration-1000"><img class="mb-11 mx-auto" src="gradia-assets/images/teams/avatar-md.png" alt="">
          <h3 class="mb-1 font-heading font-bold text-gray-900 text-lg" >Darlene Robertson</h3>
          <p class="text-sm text-gray-500" >Co-Founder, CEO </p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-7">
        <div class="xl:relative xl:top-16 text-center p-16 bg-white transform hover:-translate-y-3 rounded-10 shadow-7xl transition ease-out duration-1000"><img class="mb-11 mx-auto" src="gradia-assets/images/teams/avatar-md2.png" alt="">
          <h3 class="mb-1 font-heading font-bold text-gray-900 text-lg" >Albert Flores</h3>
          <p class="text-sm text-gray-500" >Co-Founder, CEO </p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-7">
        <div class="text-center p-16 bg-white transform hover:-translate-y-3 rounded-10 shadow-7xl transition ease-out duration-1000"><img class="mb-11 mx-auto" src="gradia-assets/images/teams/avatar-md3.png" alt="">
          <h3 class="mb-1 font-heading font-bold text-gray-900 text-lg" >Leslie Alexander</h3>
          <p class="text-sm text-gray-500" >Chief Marketing Officer</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/3 p-7">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Team Component Generator

Tailwind Component #425

Tailwind CSS

Gradia

<section class="relative pt-16 pb-64 bg-black overflow-hidden"><img class="absolute top-0 left-1/2 transform -translate-x-1/2 h-full" src="gradia-assets/elements/http-codes/radial2.svg" alt="">
  <div class="relative z-10 container mx-auto px-4"><img class="mx-auto mb-64" src="gradia-assets/logos/gradia-name-white.svg" alt="">
    <div class="md:max-w-lg mx-auto"><img class="mx-auto" src="gradia-assets/elements/http-codes/404.png" alt="">
      <div class="flex flex-wrap items-end justify-center -m-6">
        <div class="w-full md:w-1/2 p-6">
          <div class="md:max-w-xs">
            <h2 class="font-heading font-semibold text-white text-5xl" >Something went wrong!</h2>
          </div>
        </div>
        <div class="w-full md:w-1/2 p-6"><a class="flex items-center max-w-max font-heading font-semibold text-xs text-white hover:text-gray-200 tracking-px uppercase" href="#">
            <div class="flex items-center -m-1">
              <div class="w-auto p-1">
                <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M8 14.75L2.75 9.5M2.75 9.5L8 4.25M2.75 9.5L16.25 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
              <div class="w-auto p-1">
                <p >Go back to Homepage</p>
              </div>
            </div></a></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI HTTP codes Component Generator

Tailwind Component #426

Tailwind CSS

Gradia

<section class="relative py-36 bg-gray-100 overflow-hidden"><img class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2" src="gradia-assets/elements/testimonials/radial2.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 p-6">
        <h2 class="mb-16 md:max-w-md md:ml-auto font-heading font-semibold text-5xl sm:text-6xl text-gray-900" >5,920+ people think Gradia is the best</h2>
        <div class="p-12 bg-white rounded-10">
          <h3 class="mb-5 font-heading font-medium text-xl text-black" >“Easy to use”</h3>
          <p class="mb-7 text-lg text-black" >“Amet minim mollit non deserunt ullam co est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.”</p>
          <div class="flex flex-wrap -m-1.5">
            <div class="w-auto p-1.5"><img src="gradia-assets/images/testimonials/avatar7.png" alt=""></div>
            <div class="w-auto p-1.5">
              <h3 class="font-heading font-semibold text-gray-900 text-lg" >Marvin McKinney</h3>
              <p class="text-sm text-gray-600" >Co-founder at Parkon</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap justify-center -m-6">
          <div class="w-full lg:w-auto p-6">
            <div class="p-12 bg-white rounded-10">
              <h3 class="mb-5 font-heading font-medium text-xl text-black" >“Very fast video output”</h3>
              <p class="mb-7 text-lg text-black" >“Amet minim mollit non deserunt ullam co est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat.”</p>
              <div class="flex flex-wrap -m-1.5">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Testimonials Component Generator

Tailwind Component #427

Tailwind CSS

Gradia

<section class="py-24 overflow-hidden">
  <div class="container mx-auto px-4">
    <p class="mb-12 text-lg text-gray-900" >Join 2400+ other companies who shifted to Shuffle</p>
    <div class="flex flex-wrap -m-6 divide-x divide-gray-200">
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap -m-8">
          <div class="w-auto p-8"><img src="gradia-assets/logos/brands/brand-small4.png" alt=""></div>
          <div class="w-auto p-8"><img src="gradia-assets/logos/brands/brand-small3.png" alt=""></div>
          <div class="w-auto p-8"><img src="gradia-assets/logos/brands/brand-small1.png" alt=""></div>
          <div class="w-auto p-8"><img src="gradia-assets/logos/brands/brand-small5.png" alt=""></div>
          <div class="w-auto p-8"><img src="gradia-assets/logos/brands/brand-small2.png" alt=""></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="max-w-max md:mx-auto"><img class="mb-5" src="gradia-assets/logos/brands/capterra-logo.png" alt="">
          <p class="mb-2.5 font-heading font-semibold text-lg text-gray-900" >Trusted by 1M+ customers</p>
          <div class="flex flex-wrap items-center -m-1">
            <div class="w-auto p-1">
              <div class="flex items-center -m-1"><img class="p-1" src="gradia-assets/elements/logos/star2.svg" alt=""><img class="p-1" src="gradia-assets/elements/logos/star2.svg" alt=""><img class="p-1" src="gradia-assets/elements/logos/star2.svg" alt=""><img class="p-1" src="gradia-assets/elements/logos/star2.svg" alt=""><img class="p-1" src="gradia-assets/elements/logos/star2.svg" alt=""></div>
            </div>
            <div class="w-auto p-1">
              <p class="font-heading font-medium text-base text-gray-900"><span >4.2/5 </span><span class="font-heading font-medium text-base text-gray-500" >(45k Reviews)</span></p>
            </div>
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Logo clouds Component Generator

Tailwind Component #428

Tailwind CSS

Gradia

<section class="py-28 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-md">
          <div class="flex flex-wrap -m-3">
            <div class="w-auto p-3">
              <div class="flex items-center justify-center w-12 h-12 bg-gradient-green rounded-full">
                <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M3.25 20.5833V10.9095C3.25 10.1851 3.61205 9.50861 4.21482 9.10676L11.7982 4.05121C12.5259 3.56602 13.4741 3.56602 14.2019 4.05121L21.7852 9.10676C22.3879 9.50861 22.75 10.1851 22.75 10.9095V20.5833M3.25 20.5833C3.25 21.7799 4.22005 22.75 5.41667 22.75H20.5833C21.78 22.75 22.75 21.7799 22.75 20.5833M3.25 20.5833L10.5625 15.7083M22.75 20.5833L15.4375 15.7083M3.25 10.8333L10.5625 15.7083M22.75 10.8333L15.4375 15.7083M15.4375 15.7083L14.2019 16.5321C13.4741 17.0173 12.5259 17.0173 11.7982 16.5321L10.5625 15.7083" stroke="#18181B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                </svg>
              </div>
            </div>
            <div class="flex-1 p-3">
              <h2 class="mb-3.5 font-heading font-semibold text-4xl text-gray-900" >Join our newsletter</h2>
              <p class="text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <div class="mb-5 p-1 flex flex-col md:flex-row bg-white overflow-hidden focus-within:ring-4 focus-within:ring-indigo-500 border border-gray-200 rounded-10">
            <input class="w-full flex-1 px-5 py-3.5 text-base text-gray-500 bg-transparent outline-none placeholder-gray-500 rounded-tl-md rounded-bl-md" type="text" placeholder="Your email address">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Newsletter Component Generator

Tailwind Component #429

Tailwind CSS

Gradia

<section class="relative pt-24 pb-32 overflow-hidden">
  <div class="container mx-auto px-4 mb-12">
    <h2 class="mb-6 max-w-xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >A simple &amp; smart way to grow your marketing team</h2>
    <p class="mb-16 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. Exercitation veniam consequat.</p>
    <div class="flex flex-wrap -m-8">
      <div class="w-full md:w-1/3 p-8"><a class="group" href="#">
          <div class="mb-9 overflow-hidden rounded-2xl"><img class="transform hover:scale-110 w-full transition ease-out duration-500" src="gradia-assets/images/features/experts.png" alt=""></div>
          <h3 class="mb-4 font-heading font-bold text-gray-900 text-xl group-hover:underline" >2100+ marketing experts</h3>
          <p class="mb-5 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p></a><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
            <p class="mb-1" >Learn more</p>
            <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-0.5 bg-gradient-cyan transition ease-in-out duration-500"></div></a></div>
      <div class="w-full md:w-1/3 p-8"><a class="group" href="#">
          <div class="mb-9 overflow-hidden rounded-2xl"><img class="transform hover:scale-110 w-full transition ease-out duration-500" src="gradia-assets/images/features/insights.png" alt=""></div>
          <h3 class="mb-4 font-heading font-bold text-gray-900 text-xl group-hover:underline" >Live analytics &amp; insights</h3>
          <p class="mb-5 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p></a><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
            <p class="mb-1" >Learn more</p>
            <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-0.5 bg-gradient-cyan transition ease-in-out duration-500"></div></a></div>
      <div class="w-full md:w-1/3 p-8"><a class="group" href="#">
          <div class="mb-9 overflow-hidden rounded-2xl"><img class="transform hover:scale-110 w-full transition ease-out duration-500" src="gradia-assets/images/features/results.png" alt=""></div>
          <h3 class="mb-4 font-heading font-bold text-gray-900 text-xl group-hover:underline" >Proven results</h3>
          <p class="mb-5 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p></a><a class="group inline-block font-heading font-medium text-gray-900 hover:text-gray-800 text-base overflow-hidden" href="#">
            <p class="mb-1" >Learn more</p>
            <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-0.5 bg-gradient-cyan transition ease-in-out duration-500"></div></a></div>
    </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Features Component Generator

Tailwind Component #430

Tailwind CSS

Gradia

<section class="pt-24 pb-32 bg-gradient-gray2 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-md mx-auto mb-20">
      <h2 class="mb-4 font-heading font-semibold text-center text-6xl sm:text-7xl text-gray-900" >Got questions?</h2>
      <p class="text-lg text-gray-600 text-center" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
    </div>
    <div class="flex flex-wrap -m-6 mb-24">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="mb-4 font-heading font-medium text-2xl text-gray-900" >Is it really unlimited downloads?</h2>
          <p class="text-base text-black" >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 class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="mb-4 font-heading font-medium text-2xl text-gray-900" >Is it really unlimited downloads?</h2>
          <p class="text-base text-black" >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 class="w-full md:w-1/2 p-6">
        <div class="md:max-w-xl">
          <h2 class="mb-4 font-heading font-medium text-2xl text-gray-900" >Do you offer discounts on annual plans?</h2>
          <p class="text-base text-black" >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>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI FAQ Component Generator

Tailwind Component #431

Tailwind CSS

Gradia

<section class="py-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-8">
      <div class="w-full p-8">
        <div class="md:max-w-lg">
          <h2 class="mb-5 font-heading font-bold text-6xl sm:text-7xl text-gray-900" >Open positions</h2>
          <p class="text-gray-600 text-lg" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar id fames nunc. Turpis leo turpis non, id ut nunc.</p>
        </div>
      </div>
      <div class="w-full p-8">
        <div>
          <div class="h-0.5 bg-gradient-cyan"></div>
          <div class="flex flex-wrap items-center py-7 -m-2">
            <div class="w-full md:w-1/2 p-2">
              <h3 class="font-heading font-bold text-xl text-gray-900" >Full-Stack Developer</h3>
            </div>
            <div class="w-full md:w-1/2 p-2">
              <div class="flex flex-wrap items-center justify-between">
                <div class="w-auto p-2">
                  <p class="text-lg text-gray-900" >Remote Only</p>
                </div>
                <div class="w-auto p-2">
                  <button class="group relative font-heading py-2 px-4 block w-full md:w-auto text-base text-white font-medium bg-gray-900 overflow-hidden rounded-lg">
                    <div class="absolute top-0 left-0 transform -translate-x-full group-hover:-translate-x-0 h-full w-full bg-gray-800 transition ease-in-out duration-500"></div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Careers Component Generator

Tailwind Component #432

Tailwind CSS

Gradia

<section x-data="{ toggle: false }" class="pt-24 pb-32 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-xl text-center mx-auto">
      <h2 class="mb-5 font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >Start with the right plan</h2>
      <p class="mb-10 text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
      <div class="mb-20 w-64 mx-auto border border-gray-300 overflow-hidden rounded-full">
        <div x-on:click.prevent="toggle = !toggle" class="relative flex p-0.5">
          <div :class="{'left-1/2': toggle}" class="absolute top-0 left-0 bg-gradient-orange h-full w-1/2 rounded-full transition-all duration-500"></div>
          <div class="relative w-1/2 flex items-center justify-center">
            <a :class="{ 'hidden': toggle }" class="block py-3.5 font-heading text-xs text-white font-semibold uppercase tracking-px rounded-full" href="#" >Monthly</a>
            <a :class="{ 'hidden': !toggle }" class="hidden py-3.5 font-heading text-xs text-black font-semibold uppercase tracking-px rounded-full" href="#" >Monthly</a>
          </div>
          <div class="relative w-1/2 flex items-center justify-center">
            <a :class="{ 'hidden': toggle }" class="block py-3.5 font-heading text-xs text-black font-semibold uppercase tracking-px rounded-full" href="#" >Yearly</a>
            <a :class="{ 'hidden': !toggle }" class="hidden py-3.5 font-heading text-xs text-white font-semibold uppercase tracking-px rounded-full" href="#" >Yearly</a>
          </div>
        </div>
      </div>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full">
        <tbody><tr>
          <th></th>
          <th>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Pricing Component Generator

Tailwind Component #433

Tailwind CSS

Gradia

<section x-data="{ mobileNavOpen: false }" class="overflow-hidden">
  <div class="flex items-center justify-between px-8 py-5 bg-gray-900">
    <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-white.svg" alt=""></a></div>
      </div>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <ul class="flex items-center mr-10">
            <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Features</a></li>
            <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Solutions</a></li>
            <li class="font-heading mr-9 text-white hover:text-gray-200 text-lg"><a href="#" >Resources</a></li>
            <li class="font-heading text-white hover:text-gray-200 text-lg"><a href="#" >Pricing</a></li>
          </ul>
        </div>
        <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-white 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-gray-900 rounded-lg">
              <p class="relative z-10" >Start Free Trial</p>
            </div>
          </button>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Navigation (horizontal) Component Generator

Tailwind Component #434

Tailwind CSS

Gradia

<section class="relative py-36 bg-black overflow-hidden"><img class="absolute left-0 bottom-0" src="gradia-assets/elements/contact/radial2.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="flex flex-wrap -m-6">
      <div class="w-full md:w-1/2 p-6">
        <div class="md:max-w-lg mb-14">
          <h2 class="mb-7 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 -m-10">
          <div class="w-full p-10">
            <div class="md:max-w-xs">
              <h3 class="mb-4 font-heading font-medium text-xl text-white" >United States</h3>
              <p class="text-lg text-gray-400" >support.usa@gradia.co</p>
              <p class="text-lg text-gray-400" >+1 (495) 389 3995</p>
            </div>
          </div>
          <div class="w-full p-10">
            <div class="md:max-w-xs">
              <h3 class="mb-4 font-heading font-medium text-xl text-white" >Canada</h3>
              <p class="text-lg text-gray-400" >support.usa@gradia.co</p>
              <p class="text-lg text-gray-400" >+1 (495) 389 3995</p>
            </div>
          </div>
        </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Contact Component Generator

Tailwind Component #435

Tailwind CSS

Gradia

<section class="py-36 bg-gradient-gray2 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="md:max-w-lg">
          <p class="mb-9 font-heading max-w-max px-5 py-2.5 uppercase font-semibold text-xs tracking-wider text-white bg-gradient-green rounded-10" >Rated #1 on G2</p>
          <h2 class="mb-6 font-heading font-semibold text-6xl sm:text-7xl text-gray-900" >Learn marketing from the industry experts</h2>
          <p class="mb-9 text-xl text-gray-900" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.</p>
          <button class="group p-0.5 mb-8 font-heading block w-full md:w-auto text-base text-gray-900 font-bold bg-white hover:bg-gray-50 bg-gradient-cyan overflow-hidden rounded-md">
            <div class="relative py-4 px-9 bg-white rounded">
              <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>
              <p class="relative z-10" >Join the Event</p>
            </div>
          </button>
        </div>
      </div>
      <div class="w-full md:w-1/2 p-6">
        <div class="flex flex-wrap justify-center -m-6 xl:-m-14">
          <div class="w-full lg:w-auto p-6 xl:p-14">
            <div class="text-center max-w-max mx-auto"><img class="mb-4" src="gradia-assets/images/cta/avatar.png" alt="">
              <h3 class="mb-0.5 font-heading font-bold text-xl text-gray-900" >Albert Flores</h3>
              <p class="text-xs text-gray-600" >Digital Marketer @ Grower.io</p>
            </div>
          </div>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Call to action Component Generator

Tailwind Component #436

Tailwind CSS

Gradia

<section class="pt-24 overflow-hidden">
  <div class="container mx-auto px-4"><img class="mx-auto mb-16" src="gradia-assets/logos/gradia-name-black.svg" alt="">
    <ul class="flex flex-wrap justify-center -m-5 pb-8">
      <li class="p-5"><a class="font-heading text-base text-gray-900 hover:text-gray-700" href="#" >Features</a></li>
      <li class="p-5"><a class="font-heading text-base text-gray-900 hover:text-gray-700" href="#" >Pricing</a></li>
      <li class="p-5"><a class="font-heading text-base text-gray-900 hover:text-gray-700" href="#" >Affiliate Program</a></li>
      <li class="p-5"><a class="font-heading text-base text-gray-900 hover:text-gray-700" href="#" >Press Kit</a></li>
    </ul>
    <div class="border-b border-gray-100"></div>
    <p class="text-gray-600 text-center py-8 text-sm" >© Copyright 2022. All Rights Reserved by Gradia.</p>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #437

Tailwind CSS

Gradia

<section class="py-32 bg-gray-100 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap items-center max-w-6xl mx-auto -m-9">
      <div class="w-full md:flex-1 p-9"><img class="mb-12" src="gradia-assets/elements/testimonials/quote.svg" alt="">
        <h2 class="mb-8 font-heading font-semibold text-5xl sm:text-6xl text-gray-900" >You made it so simple. Our new site is so much faster and easier to work with than my old site. I just choose the page, make the change.</h2>
        <p class="text-xl text-gray-600" >Daniel Jonas, Project Manager at Kramer.io</p>
      </div>
      <div class="w-full md:w-auto p-9">
        <div class="bg-gradient-cyan2 p-1 mx-auto max-w-max overflow-hidden rounded-150"><img class="object-cover rounded-150" src="gradia-assets/images/testimonials/man.jpg" alt=""></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Testimonials Component Generator

Tailwind Component #438

Tailwind CSS

Gradia

<section class="py-36 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="bg-gradient-cyan2 rounded-2xl shadow-9xl">
      <div class="flex flex-wrap">
        <div class="w-full lg:flex-1 px-12 py-14 lg:px-24 lg:py-28">
          <h2 class="mb-6 font-heading font-bold text-6xl sm:text-8xl xl:text-10xl text-gray-900" >Let’s make things easier</h2>
          <p class="mb-9 lg:max-w-lg text-gray-600 text-lg" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Malesuada tellus vestibulum, commodo pulvinar.</p>
          <button class="group relative font-heading py-4 px-6 block w-full md:w-auto text-base text-white font-medium bg-gray-900 overflow-hidden rounded-lg">
            <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-gray-800"></div>
            <p class="relative z-10" >Download Mobile Now</p>
          </button>
        </div>
        <div class="w-full lg:w-auto ml-auto"><img class="mx-auto lg:mr-0 lg:ml-auto h-full object-cover" src="gradia-assets/images/applications/phone-screen.png" alt=""></div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Application Component Generator

Tailwind Component #439

Tailwind CSS

Gradia

<section class="relative pt-24 pb-28 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="max-w-md mx-auto mb-20">
      <h2 class="mb-5 font-heading font-semibold text-center text-5xl sm:text-6xl text-gray-900" >Grow fast, with us</h2>
      <p class="text-base text-center text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
    </div>
    <div class="max-w-3xl mx-auto">
      <div class="flex flex-wrap justify-center -m-6 md:-m-16 divide-y md:divide-y-0 md:divide-x divide-gray-200">
        <div class="w-full md:w-1/2 p-6 md:p-16">
          <h2 class="mb-3 font-heading font-bold text-12xl sm:text-13xl md:text-14xl xl:text-15xl text-center text-transparent bg-clip-text bg-gradient-blue" >98%</h2>
          <h3 class="mb-3 font-heading font-semibold text-center text-gray-900 text-lg" >Average Satisfaction Rate</h3>
          <p class="text-center text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
        </div>
        <div class="w-full md:w-1/2 p-6 md:p-16">
          <h2 class="mb-3 font-heading font-bold text-12xl sm:text-13xl md:text-14xl xl:text-15xl text-center text-transparent bg-clip-text bg-gradient-green" >117%</h2>
          <h3 class="mb-3 font-heading font-semibold text-center text-gray-900 text-lg" >Average ROI on Ads</h3>
          <p class="text-center text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p>
        </div>
      </div>
    </div>
  </div>
</section>

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Stats Component Generator

Tailwind Component #440

Tailwind CSS

Gradia

<section class="relative pt-28 pb-32 overflow-hidden">
  <div class="container mx-auto px-4 mb-12">
    <p class="mb-5 font-heading text-xs text-gray-600 font-semibold text-center uppercase tracking-px" >The features that made us special</p>
    <h2 class="mb-20 max-w-2xl mx-auto font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >Track every single moment of your customers</h2>
    <div class="flex flex-wrap -m-7">
      <div class="w-full md:w-1/3 p-7">
        <div class="h-full p-0.5 bg-gradient-cyan rounded-10 transform hover:-translate-y-3 transition ease-out duration-1000">
          <div class="h-full p-8 bg-white rounded-lg"><img class="relative -left-2 mb-12" src="gradia-assets/images/features/chart.png" alt="">
            <h3 class="mb-5 font-heading font-bold text-gray-900 text-xl" >Get live reports</h3>
            <p class="text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-7">
        <div class="h-full p-0.5 bg-gradient-cyan rounded-10 transform hover:-translate-y-3 transition ease-out duration-1000">
          <div class="h-full p-8 bg-white rounded-lg"><img class="relative -left-2 mb-12" src="gradia-assets/images/features/messages.png" alt="">
            <h3 class="mb-5 font-heading font-bold text-gray-900 text-xl" >Chat with customers</h3>
            <p class="text-gray-600" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/3 p-7">
        <div class="h-full p-0.5 bg-gradient-cyan rounded-10 transform hover:-translate-y-3 transition ease-out duration-1000">
          <div class="h-full p-8 bg-white rounded-lg"><img class="relative -left-2 mb-12" src="gradia-assets/images/features/warning.png" alt="">

Get the code for 13,400+ components

Create a free account to copy production-ready code from every component in the library.

Free account · No credit card · No password needed

Already have an account? Sign in

AI Features Component Generator

Redirecting to PayPal

Shuffle's Editors

Supporting tools

Plans

Shuffle’s design systems

Most popular ui libraries

Flex

Zanrly

Saturn

Flaro

Gradia

Basko

Artemis

Vendia

Framework

UI Library

Components

Tailwind Component #421

Get the code for 13,400+ components

Tailwind Component #422

Get the code for 13,400+ components

Tailwind Component #423

Get the code for 13,400+ components

Tailwind Component #424

Get the code for 13,400+ components

Tailwind Component #425

Get the code for 13,400+ components

Tailwind Component #426

Get the code for 13,400+ components

Tailwind Component #427

Get the code for 13,400+ components

Tailwind Component #428

Get the code for 13,400+ components

Tailwind Component #429

Get the code for 13,400+ components

Tailwind Component #430

Get the code for 13,400+ components

Tailwind Component #431

Get the code for 13,400+ components

Tailwind Component #432

Get the code for 13,400+ components

Tailwind Component #433

Get the code for 13,400+ components

Tailwind Component #434

Get the code for 13,400+ components

Tailwind Component #435

Get the code for 13,400+ components

Tailwind Component #436

Get the code for 13,400+ components

Tailwind Component #437

Get the code for 13,400+ components

Tailwind Component #438

Get the code for 13,400+ components

Tailwind Component #439

Get the code for 13,400+ components

Tailwind Component #440

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support