Tailwind Components in Gradia library

Framework

UI Library

Components

Tailwind Component #41

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Gradia Top Navigation Bar with Start Free Trial CTA

A horizontal top navigation bar on a light background with the Gradia logo on the left, four centered text links (Features, Solutions, Resources, Pricing), and a gradient-outlined Start Free Trial button on the right. It is a minimal, single-row header for a marketing website.

Tailwind Component #42

Tailwind CSS

Gradia

<section class="relative pt-16 pb-36 bg-gradient-gray2 overflow-hidden"><img class="absolute top-0 transform left-1/2 -translate-x-1/2" src="gradia-assets/elements/sign-up/radial2.svg" alt="">
  <div class="relative z-10 container mx-auto px-4"><img class="mx-auto mb-40" src="gradia-assets/logos/gradia-name-black.svg" alt="">
    <div class="flex flex-wrap -m-6">
      <div class="w-full p-6">
        <div class="md:max-w-xl text-center mx-auto">
          <h2 class="mb-4 font-heading font-bold text-gray-900 text-6xl sm:text-7xl" >Ready to get started?</h2>
          <p class="mb-11 text-lg text-gray-500" >Lorem ipsum dolor sit amet, consectetur adipis.</p>
          <div class="flex flex-wrap max-w-md mx-auto -m-2 mb-5">
            <div class="w-full p-2">
              <input class="w-full px-5 py-3.5 text-gray-500 placeholder-gray-500 bg-white outline-none focus:ring-4 focus:ring-indigo-500 border border-gray-200 rounded-lg" type="text" placeholder="Full name" name="full-name">
            </div>
            <div class="w-full p-2">
              <input class="w-full px-5 py-3.5 text-gray-500 placeholder-gray-500 bg-white outline-none focus:ring-4 focus:ring-indigo-500 border border-gray-200 rounded-lg" type="text" placeholder="Email address" name="email">
            </div>
            <div class="w-full p-2">
              <input class="w-full px-5 py-3.5 text-gray-500 placeholder-gray-500 bg-white outline-none focus:ring-4 focus:ring-indigo-500 border border-gray-200 rounded-lg" type="password" placeholder="Password" name="password">
            </div>
            <div class="w-full p-2">
              <div class="group relative">
                <div class="absolute top-0 left-0 w-full h-full bg-gradient-blue opacity-0 group-hover:opacity-50 rounded-lg transition ease-out duration-300"></div>
                <button class="p-1 w-full font-heading font-medium text-base text-white overflow-hidden rounded-md">
                  <div class="relative py-4 px-9 bg-gradient-blue 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-gray-900 transition ease-in-out duration-500"></div>
                    <p class="relative z-10" >Sign Up</p>

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #43

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Expert Teachers Feature Section with Three Benefit Points

A light-themed feature section with a large centered bold heading above a left-aligned column of three benefit items, each with a gradient pink-to-purple subheading and body text. The right half is empty, suggesting an intended but missing image or illustration.

Tailwind Component #44

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #45

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #46

Tailwind CSS

Gradia

<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">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #47

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #48

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #49

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #50

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #51

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #52

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #53

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #54

Tailwind CSS

Gradia

<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">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #55

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #56

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #57

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #58

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #59

Tailwind CSS

Gradia

<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">

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

Tailwind Component #60

Tailwind CSS

Gradia

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

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

Components are just the start. See how a project goes from prompt to production‑ready code with Shuffle.

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

Tailwind CSS Components – Gradia Library

Framework

UI Library

Components

Tailwind Component #41

Get the code for 13,400+ components

Gradia Top Navigation Bar with Start Free Trial CTA

Tailwind Component #42

Get the code for 13,400+ components

Tailwind Component #43

Get the code for 13,400+ components

Expert Teachers Feature Section with Three Benefit Points

Tailwind Component #44

Get the code for 13,400+ components

Tailwind Component #45

Get the code for 13,400+ components

Tailwind Component #46

Get the code for 13,400+ components

Tailwind Component #47

Get the code for 13,400+ components

Tailwind Component #48

Get the code for 13,400+ components

Tailwind Component #49

Get the code for 13,400+ components

Tailwind Component #50

Get the code for 13,400+ components

Tailwind Component #51

Get the code for 13,400+ components

Tailwind Component #52

Get the code for 13,400+ components

Tailwind Component #53

Get the code for 13,400+ components

Tailwind Component #54

Get the code for 13,400+ components

Tailwind Component #55

Get the code for 13,400+ components

Tailwind Component #56

Get the code for 13,400+ components

Tailwind Component #57

Get the code for 13,400+ components

Tailwind Component #58

Get the code for 13,400+ components

Tailwind Component #59

Get the code for 13,400+ components

Tailwind Component #60

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

Create an account

From idea to beautiful design in minutes.

From one prompt to production‑ready code

Products

Extensions

UI Components

Company

Support