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

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

AI Pricing Component Generator

Tailwind Component #402

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

AI Contact Component Generator

Tailwind Component #403

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

AI Logo clouds Component Generator

Tailwind Component #404

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

AI Sign in / Sign up Component Generator

Tailwind Component #405

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

AI Blog Component Generator

Tailwind Component #406

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

AI Call to action Component Generator

Tailwind Component #407

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

AI Sign in / Sign up Component Generator

Tailwind Component #408

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

AI Footers Component Generator

Tailwind Component #409

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

AI Testimonials Component Generator

Tailwind Component #410

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

AI Team Component Generator

Tailwind Component #411

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

AI How it works Component Generator

Tailwind Component #412

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

AI Newsletter Component Generator

Tailwind Component #413

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

AI Features Component Generator

Tailwind Component #414

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 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>
    </div>
    <div class="w-auto">
      <div class="flex flex-wrap items-center">
        <div class="w-auto hidden lg:block">
          <div class="flex flex-wrap">
            <div class="w-auto">
              <button class="font-heading block py-2 px-5 mr-5 text-lg text-gray-900 rounded-10" >Login</button>
            </div>
            <div class="w-auto">
              <button class="group relative p-0.5 font-heading block w-full md:w-auto text-lg text-gray-900 font-medium bg-gray-300 overflow-hidden rounded-10">

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

Tailwind CSS

Gradia

<section class="py-32 bg-black 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-lg">
          <h2 class="mb-5 font-heading font-bold text-6xl sm:text-7xl text-white" >Open positions</h2>
          <p class="text-gray-400 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 md:w-1/2 p-6">
        <div class="flex flex-wrap border border-gray-800 divide-y divide-y divide-gray-800">
          <div class="w-full">
            <div class="p-6">
              <div class="flex flex-wrap items-end justify-between -m-2">
                <div class="w-full p-2 sm:flex-1">
                  <p class="mb-5 max-w-max px-2.5 py-1 text-gray-300 text-xs font-heading font-semibold uppercase bg-gray-900 tracking-px rounded-full" >Full Time</p>
                  <h3 class="mb-1 font-heading font-bold text-lg text-white" >Team Leader</h3>
                  <p class="text-gray-500 text-base" >Toledo, USA</p>
                </div>
                <div class="w-full sm:w-auto p-2">
                  <button class="group relative font-heading py-2 px-3.5 font-medium text-base text-gray-50 border border-gray-50 hover:border-gray-400 overflow-hidden rounded">
                    <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-white"></div>
                    <p class="relative z-10 group-hover:text-black" >Apply Now</p>
                  </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 Careers Component Generator

Tailwind Component #416

Tailwind CSS

Gradia

<section class="relative py-24 bg-black overflow-hidden"><img class="absolute bottom-0 left-0" src="gradia-assets/elements/footers/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 lg:w-5/12 p-6">
        <div class="flex flex-col justify-between h-full max-w-sm">
          <div class="mb-11"><img src="gradia-assets/logos/gradia-name-white.svg" alt=""></div>
          <div>
            <p class="mb-14 text-gray-200 text-sm" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pretium dui convallis sagittis tempus mi viverra eget. Quisque justo, blandit orci.</p>
            <p class="text-gray-400 text-sm" >© Copyright 2022. All Rights Reserved by Gradia.</p>
          </div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-2/12 p-6">
        <div class="h-full">
          <h3 class="mb-7 font-heading font-medium text-base text-gray-500 tracking-px" >Company</h3>
          <ul>
            <li class="mb-4"><a class="font-heading font-medium text-base text-white hover:text-gray-200" href="#" >Features</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-white hover:text-gray-200" href="#" >Pricing</a></li>
            <li class="mb-4"><a class="font-heading font-medium text-base text-white hover:text-gray-200" href="#" >Affiliate Program</a></li>
            <li><a class="font-heading font-medium text-base text-white hover:text-gray-200" href="#" >Press Kit</a></li>
          </ul>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-2/12 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

AI Footers Component Generator

Tailwind Component #417

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 mx-auto">
      <h2 class="mb-9 font-heading font-bold text-center text-6xl sm:text-7xl text-gray-900" >Everything you need to launch a website</h2>
      <div class="flex flex-wrap justify-center -m-5 mb-20">
        <div class="w-auto p-5">
          <div class="flex items-center font-heading font-medium text-gray-600 text-base">
            <input x-on:click="toggle = false" class="w-5 h-5 mr-2" id="radio1" type="radio" name="radio" value="radio" checked="">
            <label x-on:click="toggle = false" for="radio1"><span >Annually </span><span class="text-blue-600" >(Save up to 25%)</span></label>
          </div>
        </div>
        <div class="w-auto p-5">
          <div class="flex items-center font-heading font-medium text-gray-600 text-base">
            <input x-on:click="toggle = true" class="w-5 h-5 mr-2" id="radio2" type="radio" name="radio" value="radio">
            <label x-on:click="toggle = true" for="radio2" >Monthly</label>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -m-3">
      <div class="w-full md:w-1/2 xl:w-1/4 p-3">
        <div class="p-10 bg-white border border-gray-200 rounded-10">
          <h3 class="mb-9 font-heading font-medium text-base text-black" >Free Plan</h3>
          <div class="mb-9 pb-9 flex border-b border-gray-200"><span class="font-heading font-bold text-6xl sm:text-7xl text-gray-900" >$0</span><span class="text-sm text-gray-700 self-end" >/ Per Month</span></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 Pricing Component Generator

Tailwind Component #418

Tailwind CSS

Gradia

<section class="relative py-36 bg-gray-100 overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -m-5">
      <div class="w-full md:w-1/2 xl:w-1/4 p-5">
        <div class="p-7 bg-white rounded-10">
          <h2 class="mb-4 font-heading font-bold text-8xl sm:text-9xl text-gray-900" >43%</h2>
          <p class="mb-10 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p><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" >Read case study</p>
            <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-px bg-gradient-cyan transition ease-in-out duration-500"></div></a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-5">
        <div class="p-7 bg-white rounded-10">
          <h2 class="mb-4 font-heading font-bold text-8xl sm:text-9xl text-gray-900" >79%</h2>
          <p class="mb-10 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p><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" >Read case study</p>
            <div class="w-full transform -translate-x-0 group-hover:translate-x-full h-px bg-gradient-cyan transition ease-in-out duration-500"></div></a>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 p-5">
        <div class="p-7 bg-white rounded-10">
          <h2 class="mb-4 font-heading font-bold text-8xl sm:text-9xl text-gray-900" >16%</h2>
          <p class="mb-10 text-gray-600 text-base" >Amet minim mollit non deserunt ullamco est sit aliqua dolor</p><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" >Read case study</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

AI Stats Component Generator

Tailwind Component #419

Tailwind CSS

Gradia

<section class="relative pt-28 bg-gradient-gray2 overflow-hidden"><img class="absolute left-0 top-0 h-full" src="gradia-assets/elements/contact/radial.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="md:max-w-lg">
      <h2 class="mb-5 font-heading font-semibold text-6xl sm:text-7xl text-gray-900" >We’ve got your back!</h2>
      <p class="text-gray-600 text-lg" >Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis.</p>
    </div>
    <div class="flex flex-wrap -m-6 pb-24 md:pb-0">
      <div class="flex w-full md:w-1/2 p-6 md:pb-0"><img class="self-end" src="gradia-assets/images/contact/woman.png" alt=""></div>
      <div class="flex w-full md:w-1/2 p-6">
        <div class="self-end flex flex-wrap -m-4 md:pb-24">
          <div class="w-full p-4">
            <div class="md:max-w-lg px-8 py-7 bg-white rounded-10">
              <div class="max-w-xs">
                <h3 class="mb-3 font-heading font-bold text-xl text-gray-900" >Get Started from Tutorials</h3>
                <p class="mb-8 text-gray-600 text-lg" >Contact us anytime, from anywhere. Get in touch.</p><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" >Check All Our Tutorials</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>
          </div>
          <div class="w-full p-4">
            <div class="md:max-w-lg px-8 py-7 bg-white rounded-10">
              <div class="max-w-xs">
                <h3 class="mb-3 font-heading font-bold text-xl text-gray-900" >24/7 Customer Support</h3>

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

Tailwind CSS

Gradia

<section class="relative pt-28 bg-black overflow-hidden"><img class="absolute left-0 bottom-0 w-full" src="gradia-assets/elements/applications/radial2.svg" alt="">
  <div class="relative z-10 container mx-auto px-4">
    <div class="max-w-xl mx-auto text-center">
      <h2 class="mb-6 font-heading font-bold text-6xl sm:text-8xl xl:text-10xl text-white" >Try Gradia App Free</h2>
      <p class="mb-11 text-gray-400 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 mb-32">
        <div class="w-auto p-2"><a href="#"><img src="gradia-assets/logos/brands/app-store-gradient-green.png" alt=""></a></div>
        <div class="w-auto p-2"><a href="#"><img src="gradia-assets/logos/brands/play-store-gradient-green.png" alt=""></a></div>
      </div><img class="mx-auto" src="gradia-assets/images/applications/phone-half.png" alt="">
    </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

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

Get the code for 13,400+ components

Tailwind Component #402

Get the code for 13,400+ components

Tailwind Component #403

Get the code for 13,400+ components

Tailwind Component #404

Get the code for 13,400+ components

Tailwind Component #405

Get the code for 13,400+ components

Tailwind Component #406

Get the code for 13,400+ components

Tailwind Component #407

Get the code for 13,400+ components

Tailwind Component #408

Get the code for 13,400+ components

Tailwind Component #409

Get the code for 13,400+ components

Tailwind Component #410

Get the code for 13,400+ components

Tailwind Component #411

Get the code for 13,400+ components

Tailwind Component #412

Get the code for 13,400+ components

Tailwind Component #413

Get the code for 13,400+ components

Tailwind Component #414

Get the code for 13,400+ components

Tailwind Component #415

Get the code for 13,400+ components

Tailwind Component #416

Get the code for 13,400+ components

Tailwind Component #417

Get the code for 13,400+ components

Tailwind Component #418

Get the code for 13,400+ components

Tailwind Component #419

Get the code for 13,400+ components

Tailwind Component #420

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