Tailwind CSS Components

Framework

UI Library

Lifetime Access

Full Shuffle access forever for $249

Pay once, ship unlimited projects. No subscription, no renewals, all future updates included.

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

Tailwind CSS

Uinel

<section class="relative py-24 2xl:py-44 text-white bg-darkBlueGray-500 overflow-hidden rounded-t-10xl">
  <div class="container px-4 mx-auto">
    <div class="md:grid md:grid-cols-2 md:items-center md:gap-16">
      <div class="relative mb-10 md:mb-0 text-center md:text-left z-10">
        <span class="inline-block py-3 px-7 mb-10 text-lg font-medium font-heading leading-5 text-indigo-500 border border-indigo-500 rounded-6xl" href="#">Join us today</span>
        <h2 class="mb-20 xl:mb-24 font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight">Get inspired from the all designers</h2>
        <a class="inline-block py-5 px-10 text-xl leading-6 text-white font-medium tracking-tighter font-heading bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Join now</a>
      </div>
      <img src="uinel-assets/images/call-to-action/widget.png" alt="">
    </div>
  </div>
  <img class="absolute right-0 top-0" src="uinel-assets/images/call-to-action/elipse.png" alt="">
</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

Dark Navy Hero with Heading, CTA, and App Mockup Cards

A dark navy promotional hero section with a large two-line heading, a pill-shaped eyebrow label, and a blue Join now call-to-action on the left. On the right, overlapping illustrative UI cards show a profile card with Open/Resolved tabs and a Your Team card, presented as product preview content.

AI Call to action Component Generator

Tailwind Component #3922

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="relative p-10 xl:py-12 xl:px-20 bg-indigo-600 overflow-hidden rounded-3xl">
      <img class="absolute right-0 top-0 sm:top-1/2 transform -translate-y-1/2 w-1/2 sm:w-2/3 lg:w-auto mt-12 sm:mt-0" src="uinel-assets/images/dashboard-banners/header.png" alt="">
      <div class="relative z-10 sm:max-w-sm">
        <h2 class="mb-8 text-6xl md:text-7xl text-white font-heading font-semibold">Introducing. How to start the game?</h2>
        <div class="sm:max-w-max"><a class="block py-5 px-7 w-full text-lg leading-3 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Discover</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

Purple Promotional Banner with Heading and Discover Button

A wide purple promotional banner with a bold white heading "Introducing. How to start the game?" and a blue Discover button on the left, with decorative 3D orange and pink ribbon graphics on the right. It introduces a product or offer in a compact horizontal layout.

AI Banners Component Generator

Tailwind Component #3923

Tailwind CSS

Uinel

<section class="pb-24 xl:pb-0 bg-darkBlueGray-500">
  <div class="py-8 mx-10 mb-20 xl:mb-52 bg-white"></div>
  <div class="container px-4 mx-auto">
    <div class="relative xl:pb-52 text-center overflow-hidden">
      <img class="absolute top-0 bottom-0 left-1/2 mt-32 transform -translate-x-1/2 object-contain" src="uinel-assets/images/sign-up/half-circle.svg" alt="">
      <div class="relative">
        <span class="inline-block py-3 px-7 mb-10 text-lg font-medium font-heading leading-5 text-indigo-500 border border-indigo-500 rounded-6xl">Create account</span>
        <div class="max-w-2xl mx-auto mb-14 xl:mb-28">
          <h2 class="text-9xl md:text-10xl xl:text-11xl text-white leading-tight font-heading font-medium">Start creating a&nbsp;design</h2>
        </div>
        <div class="max-w-md lg:max-w-7xl mx-auto mb-20">
          <div class="flex flex-wrap justify-center -mx-2">
            <div class="w-full lg:w-3/12 px-2 mb-5 lg:mb-0">
              <input class="w-full py-5 px-12 text-xl border-2 border-blue-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" type="email" placeholder="Your Email">
            </div>
            <div class="w-full lg:w-3/12 px-2 mb-5 lg:mb-0">
              <input class="w-full py-5 px-12 text-xl border-2 border-blue-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" type="password" placeholder="Password">
            </div>
            <div class="w-full lg:w-3/12 px-2 mb-5 lg:mb-0">
              <input class="w-full py-5 px-12 text-xl border-2 border-blue-500 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" type="password" placeholder="Confirm password">
            </div>
            <div class="w-full lg:w-auto px-2"><a class="block py-5 px-10 h-full w-full xl:w-auto text-xl text-white font-medium tracking-tighter font-heading bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Register now</a></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

Dark Navy Account Registration Hero with Inline Sign-Up Form

A dark navy centered registration section with a pill badge, large two-line heading, and an inline row of email, password, and confirm password fields with a blue Register now button. A terms agreement checkbox line appears below the form.

AI Sign in / Sign up Component Generator

Tailwind Component #3924

Tailwind CSS

Uinel

<section class="py-24 2xl:pt-40 2xl:pb-44 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-2/5 px-4 mb-20 lg:mb-0">
        <span class="block mb-9 text-xs font-medium uppercase leading-4 text-gray-300 tracking-widest">How it works</span>
        <h2 class="mb-12 text-9xl md:text-10xl xl:text-11xl font-medium font-heading leading-none">Easy to use. Really</h2>
        <p class="mb-16 lg:mb-20 text-xl lg:text-2xl leading-relaxed font-heading font-medium">Phasellus eget pretium mi, vestibulum lobortis neque. Nulla bibendum tempor velit, at hendrerit massa fringilla.</p>
        <div class="mb-12 font-heading">
          <button class="py-5 px-10 mb-4 md:mb-0 mr-0 md:mr-5 w-full md:w-auto text-xl leading-none font-medium tracking-tighter font-heading bg-gray-50 hover:bg-gray-100 focus:ring-2 focus:ring-gray-50 focus:ring-opacity-50 rounded-xl" type="button">More</button>
          <button class="py-5 px-10 w-full md:w-auto text-xl leading-none text-white font-medium tracking-tighter font-heading bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="button">Get started</button>
        </div>
        <p class="text-lg leading-6 text-darkBlueGray-400 font-normal">Explore the plaftorm right here.</p>
      </div>
      <div class="w-full lg:w-3/5 px-4">
        <div class="flex flex-wrap -mx-4 items-start">
          <div class="w-full md:w-1/2 px-4 mb-12 md:mb-0 md:mt-40 relative">
            <div class="relative pt-16 pb-20 px-8 md:px-12 2xl:px-16 -mx-1 bg-white border border-black border-opacity-10 z-10 rounded-3xl">
              <div class="relative inline-flex items-center justify-center mb-8 w-12 h-12 leading-6 text-white bg-blue-500 rounded-full">
                <span class="text-2xl font-bold">1</span>
              </div>
              <h2 class="mb-14 text-7xl 2xl:text-8xl leading-tight font-medium font-heading">Choose application</h2>
              <p class="text-lg text-darkBlueGray-400">The nulla commodo, commodo eros a, tristique lectus.</p>
            </div>
            <div class="absolute left-1/2 -bottom-3 transform -translate-x-1/2 w-11/12 h-24 border border-black border-opacity-10 rounded-3xl"></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

How It Works Split Layout with Heading and Numbered Step Cards

A light-background feature section pairing a large heading, body copy, and two CTA buttons on the left with two overlapping numbered step cards on the right. It explains a simple process using numbered blue badges, headings, and short descriptions.

AI How it works Component Generator

Tailwind Component #3925

Tailwind CSS

Uinel

<section>
  <div class="pt-12 pb-24 bg-blueGray-100">
    <div class="container px-4 mx-auto">
      <ul class="flex flex-wrap items-center mb-10 xl:mb-0">
        <li class="mr-6">
          <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
            <span>Home</span>
            <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
            </svg>
          </a>
        </li>
        <li class="mr-6">
          <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
            <span>Store</span>
            <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
            </svg>
          </a>
        </li>
        <li><a class="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#">Your cart</a></li>
      </ul>
      <div class="pb-9 mb-7 text-center border-b border-black border-opacity-5">
        <h2 class="text-9xl xl:text-10xl leading-normal font-heading font-medium text-center">Your order</h2>

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

Order confirmation page with payment success and order summary

A checkout confirmation page showing a green success message, the list of ordered products with images and details, a price summary panel with subtotal, shipping, and total, and a Back to shop button. Content is arranged in a two-column layout with the order card on the left and details on the right.

AI E-commerce (orders) Component Generator

Tailwind Component #3926

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-50 overflow-hidden">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 xl:-mx-7">
      <div class="w-full md:w-1/2 xl:w-1/4 px-4 xl:px-7 mb-8 xl:mb-0">
        <div class="h-full pt-10 px-5 pb-6 text-center bg-white rounded-3xl">
          <h3 class="mb-6 text-sm text-darkBlueGray-300 font-heading font-medium">Engaged Users</h3>
          <div class="flex items-center justify-center mb-6">
            <span class="inline-block mr-2 text-6xl font-heading font-medium">448</span>
            <div class="px-3 text-center bg-green-200 bg-opacity-70 rounded-full">
              <span class="text-xxs font-bold text-green-500 leading-7">+9%</span>
            </div>
          </div>
          <div class="chart" data-type="area-small-blue"></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 xl:w-1/4 px-4 xl:px-7 mb-8 xl:mb-0">
        <div class="h-full pt-10 px-5 pb-6 text-center bg-white rounded-3xl">
          <h3 class="mb-6 text-sm text-darkBlueGray-300 font-heading font-medium">Total Profit</h3>
          <div class="flex items-center justify-center mb-6">
            <span class="inline-block mr-2 text-6xl font-heading font-medium">$3,640</span>
            <div class="px-3 text-center bg-green-200 bg-opacity-70 rounded-full">
              <span class="text-xxs font-bold text-green-500 leading-7">+5%</span>
            </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

Four-Up Stats Cards With Sparkline Charts

A row of four white stat cards, each showing a metric label, a large value, a green or red percentage change badge, and a colored sparkline chart beneath. The layout is a horizontal row with evenly spaced cards on a light gray background, suited to dashboard KPI summaries.

AI Graphs Component Generator

Tailwind Component #3927

Tailwind CSS

Uinel

<div>
  <section class="p-4 md:p-8 font-medium bg-blueGray-100">
    <div class="relative pt-24 pb-8 lg:pb-24 2xl:pt-52 2xl:pb-60 bg-white rounded-t-10xl z-10">
      <div class="container px-4 mx-auto">
        <div class="grid lg:grid-cols-2 items-center gap-20">
          <div>
            <img class="mb-20" src="uinel-assets/elements/portfolio/portfolio1-write-icon.svg" alt="">
            <span class="block mb-9 font-heading text-sm uppercase tracking-widest text-gray-300">Portfolio</span>
            <div class="relative flex items-center max-w-max mb-14 xl:mb-16">
              <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight">SchoolTrip</h2>
              <div class="absolute bottom-20 right-16 md:-right-24 md:bottom-2 xl:bottom-12">
                <h3 class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 font-heading text-6xl z-10">APP</h3>
                <img src="uinel-assets/elements/portfolio/elipse1.svg" alt="">
                <img class="absolute top-0 left-0" src="uinel-assets/elements/portfolio/elipse2.svg" alt="">
              </div>
            </div>
            <h3 class="mb-10 text-5xl xl:text-8xl leading-tighter lg:max-w-lg">A spatial system is a set of rules for how you measure and size your UI elements.</h3>
            <p class="mb-14 xl:mb-16 font-normal text-lg leading-6 text-gray-700">The nulla commodo, commodo eros a, tristique lectus.</p>
            <a class="inline-flex items-center pb-1 text-green-600 hover:text-green-700 border-b border-green-600 hover:border-green-700" href="#">
              <span class="font-bold tracking-tight text-xl">Discover weekly</span>
              <svg class="ml-4" width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.8 1L15 7H1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
                <path d="M11 12L15 7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
              </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

SchoolTrip App Portfolio Hero with Photo and Finance Card

A portfolio-style hero section introducing the SchoolTrip app with a large headline, short intro text, a green text link, and a photo of a smiling child beside an overlapping app card showing balance and action buttons. The layout is a split composition with text on the left and imagery on the right.

AI Portfolio Component Generator

Tailwind Component #3928

Tailwind CSS

Uinel

<section class="relative overflow-hidden">
  <img class="absolute bottom-0 md:top-0 right-0 h-96 md:h-auto" src="uinel-assets/elements/ecommerce-banners/line-circle.svg" alt="">
  <div class="md:absolute top-0 left-0 md:w-1/3 lg:w-2/5 h-full">
    <img class="h-32 md:h-full w-full md:w-auto" src="uinel-assets/images/ecommerce-banners/frame-color.png" alt="">
    <img class="md:absolute bottom-0 left-0 md:ml-12 lg:ml-32 h-40 md:h-5/6 w-full md:w-auto object-cover object-left" src="uinel-assets/images/ecommerce-banners/phone-placeholder.png" alt="">
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="w-full md:w-1/2 lg:w-2/5 ml-auto py-24 md:py-40">
      <h1 class="mb-10 text-9xl md:text-10xl xl:text-12xl leading-tight font-heading font-medium">New generation.</h1>
      <p class="mb-14 md:mb-32 text-darkBlueGray-400">Or something has gone wrong.</p>
      <a class="inline-block py-4 px-10 text-xl leading-8 text-white font-heading font-medium tracking-tighter text-center bg-blue-500 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 hover:bg-blue-600 rounded-xl" href="#">Shop now</a>
    </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

Split-screen hero with phone photo and 'New generation.' heading

A promotional hero section with a large two-line heading, short supporting text, and a blue 'Shop now' call-to-action button on the right, paired with a photo of a smartphone on the left over colorful gradient background shapes.

AI Banners Component Generator

Tailwind Component #3929

Tailwind CSS

Uinel

<section class="py-24 2xl:py-44 font-medium text-white bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap mx-auto max-w-5xl text-center">
      <div class="px-3 mb-5 lg:mb-0 w-full md:w-1/2 lg:w-1/4">
        <div class="py-24 bg-indigo-700 rounded-9xl">
          <h2 class="mb-3 font-bold text-9xl">10+</h2>
          <h3 class="font-heading text-lg leading-6">Years together</h3>
        </div>
      </div>
      <div class="px-3 mb-5 lg:mb-0 w-full md:w-1/2 lg:w-1/4">
        <div class="lg:relative lg:top-14 py-24 bg-indigo-700 rounded-9xl">
          <h2 class="mb-3 font-bold text-9xl">4.1K</h2>
          <h3 class="font-heading text-lg leading-6">UI/UX Designers</h3>
        </div>
      </div>
      <div class="px-3 mb-5 md:mb-0 lg:mb-0 w-full md:w-1/2 lg:w-1/4">
        <div class="lg:relative lg:top-14 py-24 bg-indigo-700 rounded-9xl">
          <h2 class="mb-3 font-bold text-9xl">80</h2>
          <h3 class="font-heading text-lg leading-6">Countries</h3>
        </div>
      </div>
      <div class="px-3 w-full md:w-1/2 lg:w-1/4">
        <div class="py-24 bg-indigo-700 rounded-9xl">
          <h2 class="mb-3 font-bold text-9xl">1m</h2>

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

Tailwind CSS

Uinel

<section class="font-medium bg-blueGray-100 py-24 2xl:py-44">
  <div class="container px-4 mx-auto">
    <div class="mb-20 text-center">
      <span class="inline-block mb-9 uppercase text-xs tracking-widest leading-4 text-gray-300">Newsletter</span>
      <h2 class="mb-14 xl:mb-16 font-heading text-9xl md:text-10xl xl:text-12xl leading-tight">Stay updated</h2>
      <h3 class="max-w-lg mx-auto font-heading text-xl xl:text-2xl text-center leading-10">Phasellus eget pretium mi, vestibulum lobortis neque.</h3>
    </div>
    <div class="md:flex md:items-center md:justify-center">
      <p class="md:mr-9 mb-3 md:mb-0 font-normal text-lg text-darkBlueGray-400">Drop your email:</p>
      <input class="h-16 md:max-w-xs lg:max-w-lg w-full px-8 md:mr-9 mb-3 md:mb-0 bg-blueGray-50 text-xl rounded-2xl text-darkBlueGray-400 border border-blue-500 outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50" type="text">
      <a class="block py-5 px-10 w-full md:w-auto text-xl leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Get started</a>
    </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

Newsletter signup hero with email input and Get started button

A centered newsletter signup section with a small uppercase eyebrow label, large 'Stay updated' heading, body paragraph, and a horizontal row containing an email input labeled 'Drop your email:' and a blue Get started button. The light blue-gray background and simple stacked layout give it a minimal promotional form appearance.

AI Newsletter Component Generator

Tailwind Component #3931

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="px-8 md:px-12 lg:px-20 pt-14 pb-12 sm:pb-16 bg-white rounded-3xl">
      <div class="flex mb-6 sm:mb-10 flex-wrap items-center justify-between">
        <h3 class="mb-8 sm:mb-0 text-xl font-heading font-medium leading-8">Sales Monitoring</h3>
        <div class="w-full sm:w-auto">
          <div class="relative inline-block mr-1 text-xxs border-2 border-gray-200 border-opacity-50 rounded-full tracking-wide hover:border-gray-300">
            <svg class="absolute top-1/2 right-0 mr-3 -mt-px" width="5" height="3" viewBox="0 0 5 3" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.35807 0.115939C4.50534 -0.0386464 4.74336 -0.0386464 4.88955 0.115939C5.03627 0.270525 5.03736 0.520284 4.88955 0.67487L2.76581 2.88406C2.61908 3.03865 2.3816 3.03865 2.23378 2.88406L0.110045 0.67487C-0.0366818 0.520861 -0.0366818 0.270525 0.110045 0.115939C0.257316 -0.0386464 0.49534 -0.0386464 0.641524 0.115939L2.50061 1.92771L4.35807 0.115939Z" fill="#1D1C1D"></path>
            </svg>
            <select class="py-1 pl-3 pr-6 font-bold tracking-wide bg-transparent outline-none appearance-none cursor-pointer" name="" id="">
              <option value="1">NOVEMBER</option>
              <option value="2">DECEMBER</option>
              <option value="3">JANUARY</option>
            </select>
          </div>
          <div class="relative inline-block text-xxs border-2 border-gray-200 border-opacity-50 rounded-full tracking-wide hover:border-gray-300">
            <svg class="absolute top-1/2 right-0 mr-3 -mt-px" width="5" height="3" viewBox="0 0 5 3" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.35807 0.115939C4.50534 -0.0386464 4.74336 -0.0386464 4.88955 0.115939C5.03627 0.270525 5.03736 0.520284 4.88955 0.67487L2.76581 2.88406C2.61908 3.03865 2.3816 3.03865 2.23378 2.88406L0.110045 0.67487C-0.0366818 0.520861 -0.0366818 0.270525 0.110045 0.115939C0.257316 -0.0386464 0.49534 -0.0386464 0.641524 0.115939L2.50061 1.92771L4.35807 0.115939Z" fill="#1D1C1D"></path>
            </svg>
            <select class="py-1 pl-3 pr-6 font-bold tracking-wide bg-transparent outline-none appearance-none cursor-pointer" name="" id="">
              <option value="1">2021</option>
              <option value="2">2022</option>
              <option value="3">2023</option>

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

Tailwind CSS

Uinel

<section class="pt-24 pb-10 md:pb-24 2xl:py-52 font-medium bg-blueGray-100 overflow-hidden rounded-b-10xl" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="relative container px-4 mx-auto">
    <span class="block mb-9 uppercase tracking-widest text-xs leading-4 text-gray-300">Discover out blog</span>
    <h2 class="mb-16 font-heading text-9xl md:text-10xl xl:text-11xl leading-tight">Latest blog</h2>
    <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex items-start w-full transition-transform duration-500 ease-in-out">
      <div x-ref="slide1" class="flex-shrink-0 w-full md:w-1/2 xl:w-1/3 lg:mt-52 mr-32">
        <div class="relative">
          <a class="block" href="#">
            <img class="w-full" src="uinel-assets/images/blog/blog1-learning.png" alt="">
          </a>
          <div class="absolute left-1/2 transform -translate-x-1/2 bottom-12 px-2 w-full">
            <div class="py-12 px-6 md:px-14 bg-white rounded-5xl shadow-md">
              <div class="flex items-center mb-4">
                <a class="inline-block font-heading text-lg text-purple-500 hover:text-purple-600 leading-5" href="#">New in Uinel</a>
                <div class="w-px mx-4 h-6 bg-gray-50"></div>
                <p class="uppercase tracking-widest text-xs text-gray-300">2 june</p>
              </div>
              <a class="inline-block hover:underline" href="#">
                <h3 class="font-heading text-3xl xl:text-7xl leading-normal">Get inspired from the all designers</h3>
              </a>
            </div>
          </div>
          <div class="h-44 bg-gray-50 rounded-b-9xl"></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

Latest blog horizontal card carousel

A blog section with an eyebrow label and large "Latest blog" heading above a horizontal row of staggered image cards, each with a category tag, date, and headline. A circular right-arrow button sits at the bottom right to advance the carousel.

AI Blog Component Generator

Tailwind Component #3933

Tailwind CSS

Uinel

<section class="py-32">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="grid md:grid-cols-2 lg:grid-cols-5 gap-4 justify-items-center items-center">
        <img class="mb-10 lg:mb-0 h-10" src="uinel-assets/brands/docusign.png" alt="">
        <img class="mb-10 lg:mb-0 h-10" src="uinel-assets/brands/british-business-bank.png" alt="">
        <img class="mb-10 lg:mb-0 h-10" src="uinel-assets/brands/fedex.png" alt="">
        <img class="mb-10 lg:mb-0 h-10" src="uinel-assets/brands/starling-bank.png" alt="">
        <img class="h-10" src="uinel-assets/brands/zendesk.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

Customer logo strip with DocuSign, British Business Bank, FedEx, Starling Bank, and Zendesk

A horizontal row of five company logos on a plain white background, presented without headings or controls. It functions as a social proof strip showing recognizable business customers or partners.

AI Logo clouds Component Generator

Tailwind Component #3934

Tailwind CSS

Uinel

<section class="relative bg-blueGray-100 pt-24 2xl:pt-44 md:pb-24 lg:pb-64 overflow-hidden">
  <img class="hidden md:block absolute bottom-0 right-0 w-1/2 md:w-full" src="uinel-assets/images/applications/frame.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="w-full md:w-1/2">
      <img class="block mb-16" src="uinel-assets/images/applications/icon.svg" alt="">
      <span class="text-sm text-gray-300 uppercase">Download application</span>
      <h2 class="mt-8 mb-16 text-9xl md:text-10xl xl:text-11xl font-heading font-medium leading-tight">
        <span>Download</span>
        <span class="relative">
          <span class="relative z-10">app</span>
          <img class="absolute top-1/2 left-0 xl:-left-5 transform -translate-y-1/2 xl:mt-2 xl:max-w-max" src="uinel-assets/images/applications/line-circle.svg" alt="">
        </span>
        <span>wherever you are.</span>
      </h2>
      <a class="inline-block py-5 px-10 w-full md:w-auto text-xl leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Download now</a>
      <img class="md:hidden" src="uinel-assets/images/applications/frame2.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

App download hero with phone mockup and CTA

A light-background hero section promoting an app with a bold headline "Download app wherever you are." and a blue "Download now" button on the left, while a pair of hands holds a phone mockup showing a profile screen with floating feature chips on the right.

AI Application Component Generator

Tailwind Component #3935

Tailwind CSS

Uinel

<section class="text-gray-700 font-heading font-medium relative bg-gray-50 bg-opacity-50" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between px-6 lg:px-12 py-8">
    <div class="flex w-full items-center">
      <a href="#">
        <img class="h-12" src="uinel-assets/logos/uinel-gray-black.svg" alt="">
      </a>
      <ul class="hidden xl:flex px-4 ml-32">
        <li class="mr-16"><a class="text-gray-400 hover:text-gray-500" href="#">New tools</a></li>
        <li class="mr-16">
          <a class="flex items-center text-gray-400 hover:text-gray-500" href="#">
            <span class="mr-4">Products</span>
            <svg width="8" height="5" viewBox="0 0 8 5" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.97291 0.193232C7.20854 -0.0644107 7.58938 -0.0644107 7.82328 0.193232C8.05804 0.450875 8.05978 0.867141 7.82328 1.12478L4.42529 4.80677C4.19053 5.06441 3.81056 5.06441 3.57406 4.80677L0.176073 1.12478C-0.0586909 0.868102 -0.0586909 0.450875 0.176073 0.193232C0.411706 -0.0644107 0.792544 -0.0644107 1.02644 0.193232L4.00098 3.21284L6.97291 0.193232Z" fill="currentColor"></path>
            </svg>
          </a>
        </li>
        <li><a class="text-gray-400 hover:text-gray-500" href="#">Pricing</a></li>
      </ul>
      <div class="hidden xl:flex items-center ml-auto">
        <a class="text-gray-400 hover:text-gray-500" href="#">
          <svg width="20" height="23" viewBox="0 0 20 23" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.5219 18.016H2.70312V8.5933C2.70313 6.719 3.48375 4.92147 4.87328 3.59614C6.2628 2.27081 8.1474 1.52625 10.1125 1.52625C12.0776 1.52625 13.9622 2.27081 15.3517 3.59614C16.7412 4.92147 17.5219 6.719 17.5219 8.5933V18.016Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M1 18.0121H19" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M8.87891 22H10.8789" stroke="currentColor" stroke-width="2" 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 #3936

Tailwind CSS

Uinel

<section class="py-24 2xl:py-44 bg-white">
  <div class="container px-4 mx-auto">
    <div class="mb-14 xl:mb-24 text-center">
      <span class="inline-block py-3 px-7 mb-7 text-lg font-medium font-heading leading-5 text-indigo-500 bg-blueGray-100 border border-indigo-500 rounded-6xl">New products</span>
      <h2 class="mb-8 xl:mb-12 text-9xl md:text-10xl xl:text-12xl font-heading font-medium">Don’t look back</h2>
      <p class="text-xl text-darkBlueGray-400">Sed porttitor turpis sit amet malesuada porta vivamus lobortis.</p>
    </div>
    <div class="flex items-stretch flex-wrap -mx-3">
      <div class="w-full xl:w-1/2 px-3">
        <div class="sm:flex xl:flex-col -mx-3">
          <div class="w-full sm:w-1/2 xl:w-full px-3 mb-6">
            <div class="relative h-full">
              <img class="absolute w-full h-full object-cover rounded-7xl" src="uinel-assets/images/ecommerce-newest-products/smartphone.jpg" alt="">
              <div class="relative z-10 p-10 xl:px-24 xl:pb-14 xl:pt-24">
                <div class="inline-block py-1 px-3 mb-2 text-xs text-blue-500 font-heading font-semibold bg-white border border-blue-500 rounded-3xl">-10%</div>
                <a class="block mb-5 text-6xl font-heading font-medium hover:underline" href="#">Oppo Reno 5</a>
                <p class="mb-6 xl:mb-14 flex items-center text-xl text-blue-500 font-heading font-medium tracking-tighter">
                  <span class="mr-2 text-xs">$</span>
                  <span>544.90</span>
                </p>
                <div class="sm:max-w-max"><a class="block py-5 px-10 w-full text-xl leading-6 text-white font-medium tracking-tighter font-heading text-center bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" href="#">Buy</a></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

AI E-commerce (products) Component Generator

Tailwind Component #3937

Tailwind CSS

Uinel

<section class="pt-12 pb-24 bg-blueGray-100 rounded-b-10xl overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4, color: 1 }">
  <ul class="flex flex-wrap px-4 md:mx-16 mb-12 md:mb-16 items-center">
    <li class="mr-6">
      <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
        <span>Home</span>
        <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
        </svg>
      </a>
    </li>
    <li class="mr-6">
      <a class="flex items-center text-sm font-medium text-gray-400 hover:text-gray-500" href="#">
        <span>Store</span>
        <svg class="ml-6" width="4" height="7" viewBox="0 0 4 7" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.150291 0.898704C-0.0500975 0.692525 -0.0500975 0.359292 0.150291 0.154634C0.35068 -0.0507836 0.674443 -0.0523053 0.874831 0.154634L3.7386 3.12787C3.93899 3.33329 3.93899 3.66576 3.7386 3.8727L0.874832 6.84594C0.675191 7.05135 0.35068 7.05135 0.150292 6.84594C-0.0500972 6.63976 -0.0500972 6.30652 0.150292 6.10187L2.49888 3.49914L0.150291 0.898704Z" fill="currentColor"></path>
        </svg>
      </a>
    </li>
    <li><a class="text-sm font-medium text-indigo-500 hover:text-indigo-600" href="#">Apple iPhone 12 PRO</a></li>
  </ul>
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4 xl:pr-20">
        <div class="max-w-md mb-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 E-commerce (products) Component Generator

Tailwind Component #3938

Tailwind CSS

Uinel

<section class="py-24 2xl:py-44 bg-darkBlueGray-500">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-4 mb-14 lg:mb-24">
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10 lg:mb-0">
        <h3 class="mb-10 font-heading font-medium tracking-tighter text-xl text-white">About Uinel</h3>
        <ul>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">About us</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Stories</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Our people</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Founders</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Why Uinel</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">How we compare</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Website</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Idea</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Mission</a></li>
          <li><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Newsroom</a></li>
        </ul>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-4 mb-10 lg:mb-0">
        <h3 class="mb-10 font-heading font-medium tracking-tighter text-xl text-white">Product &amp; Tools</h3>
        <ul>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Download Uinel</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Sign up free</a></li>
          <li class="mb-5"><a class="text-darkBlueGray-200 hover:text-darkBlueGray-100" href="#">Pricing</a></li>

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

Tailwind CSS

Uinel

<section class="py-24 2xl:py-44 bg-blueGray-100" x-data="{ activeSlide: 1, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <h2 class="mb-14 xl:mb-24 text-9xl xl:text-10xl font-heading font-medium text-center">Products</h2>
    <div class="flex items-center">
      <button x-on:click="activeSlide = activeSlide > 1 ? activeSlide - 1 : slideCount" class="hidden md:block pr-6 hover:text-darkBlueGray-400">
        <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M7.21015 10.4594C7.59661 10.8128 7.59661 11.3841 7.21015 11.7349C6.82369 12.0871 6.19929 12.0897 5.81282 11.7349L0.289847 6.63794C-0.0966174 6.28579 -0.0966173 5.71584 0.289847 5.36108L5.81282 0.264109C6.19785 -0.0880364 6.82369 -0.0880364 7.21015 0.264109C7.59662 0.617558 7.59662 1.18882 7.21015 1.53966L2.68073 6.00147L7.21015 10.4594Z" fill="currentColor"></path>
        </svg>
      </button>
      <div class="overflow-hidden">
        <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="whitespace-nowrap transition-transform duration-500 ease-in-out">
            <div class="inline-block w-full whitespace-normal">
                <div class="flex flex-wrap -mx-3">
                  <div class="w-full sm:w-1/2 xl:w-1/4 px-3 mb-6 xl:mb-0">
                    <div class="p-10 xl:px-9 xl:pt-24 xl:pb-12 h-full bg-white rounded-3xl">
                      <a class="block mx-auto mb-8 xl:mb-20 max-w-max" href="#">
                        <img class="h-40 object-cover" src="uinel-assets/images/ecommerce-product-list/iphone-12-pro.png" alt="">
                      </a>
                      <a href="#">
                        <p class="mb-4 text-xl leading-8 font-heading font-medium hover:underline">Apple iPhone 12 Pro (128GB) Silver</p>
                      </a>
                      <p class="flex items-center text-xl text-blue-500 font-heading font-medium tracking-tighter">
                        <span class="mr-2 text-xs">$</span>
                        <span>544.90</span>

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 E-commerce (products) Component Generator

Tailwind Component #3940

Tailwind CSS

Uinel

<section class="font-normal bg-white py-24 2xl:pt-40 2xl:pb-52">
  <div class="container px-4 mx-auto">
    <div class="mb-28">
      <span class="font-medium uppercase tracking-widest text-xs text-darkBlueGray-400 leading-4 mb-9 block">More data</span>
      <h2 class="font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight">Workable</h2>
    </div>
    <div class="overflow-x-auto">
      <div class="inline-block min-w-full rounded-5xl overflow-hidden">
        <table class="table-auto w-full">
          <thead>
            <tr><th class="min-w-max pr-24 h-28 flex items-center text-left pl-16 lg:pl-32 text-lg font-semibold uppercase">Our plans and pricing</th><th class="h-20 text-lg font-semibold uppercase">Feature 1</th><th class="h-20 text-lg font-semibold uppercase">Feature 2</th><th class="h-20 text-lg font-semibold uppercase">Feature 3</th><th class="h-20 text-lg font-semibold uppercase">Feature 4</th><th class="pr-16 lg:pr-32 h-20 text-lg font-semibold uppercase">Feature 5</th></tr>
          </thead>
          <tbody>
            <tr>
              <td class="pl-16 lg:pl-32 font-medium text-lg h-20 bg-gray-50 rounded-tl-20 rounded-bl-20">
                <div class="flex items-center">
                  <input class="mr-9 form-checkbox h-5 w-5 border border-gray-300" type="checkbox">
                  <span>Number of Team Members</span>
                </div>
              </td>
              <td class="text-center px-5 py-5 text-lg text-darkBlueGray-400 h-20 bg-gray-50">
                <p>5</p>
              </td>
              <td class="text-center px-5 py-5 text-lg text-darkBlueGray-400 h-20 flex items-center justify-center bg-gray-50">

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 Tables 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 #3921

Get the code for 13,400+ components

Dark Navy Hero with Heading, CTA, and App Mockup Cards

Tailwind Component #3922

Get the code for 13,400+ components

Purple Promotional Banner with Heading and Discover Button

Tailwind Component #3923

Get the code for 13,400+ components

Dark Navy Account Registration Hero with Inline Sign-Up Form

Tailwind Component #3924

Get the code for 13,400+ components

How It Works Split Layout with Heading and Numbered Step Cards

Tailwind Component #3925

Get the code for 13,400+ components

Order confirmation page with payment success and order summary

Tailwind Component #3926

Get the code for 13,400+ components

Four-Up Stats Cards With Sparkline Charts

Tailwind Component #3927

Get the code for 13,400+ components

SchoolTrip App Portfolio Hero with Photo and Finance Card

Tailwind Component #3928

Get the code for 13,400+ components

Split-screen hero with phone photo and 'New generation.' heading

Tailwind Component #3929

Get the code for 13,400+ components

Tailwind Component #3930

Get the code for 13,400+ components

Newsletter signup hero with email input and Get started button

Tailwind Component #3931

Get the code for 13,400+ components

Tailwind Component #3932

Get the code for 13,400+ components

Latest blog horizontal card carousel

Tailwind Component #3933

Get the code for 13,400+ components

Customer logo strip with DocuSign, British Business Bank, FedEx, Starling Bank, and Zendesk

Tailwind Component #3934

Get the code for 13,400+ components

App download hero with phone mockup and CTA

Tailwind Component #3935

Get the code for 13,400+ components

Tailwind Component #3936

Get the code for 13,400+ components

Tailwind Component #3937

Get the code for 13,400+ components

Tailwind Component #3938

Get the code for 13,400+ components

Tailwind Component #3939

Get the code for 13,400+ components

Tailwind Component #3940

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.

Products

Extensions

UI Components

Company