Tailwind Components in Uinel library

Framework

UI Library

Components

Tailwind Component #101

Tailwind CSS

Uinel

<section class="py-24 2xl:pt-40 2xl:pb-52 bg-white" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 2 }">
  <div class="container px-6 mx-auto">
    <div class="mb-20 2xl:mb-36 text-center">
      <span class="block mb-9 text-xs leading-4 font-medium uppercase tracking-widest text-gray-300">How it works</span>
      <h2 class="text-9xl md:text-10xl xl:text-11xl leading-none font-heading font-medium">Easy to use</h2>
    </div>
    <div class="flex flex-wrap md:flex-nowrap items-center justify-center -mx-4 mb-20 md:mb-32 2xl:mb-56">
      <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="w-auto px-4 order-last md:order-first">
        <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.59662 10.8128 7.59662 11.3841 7.21015 11.7349C6.82369 12.0871 6.19929 12.0897 5.81282 11.7349L0.289847 6.63794C-0.096617 6.28579 -0.096617 5.71584 0.289847 5.36108L5.81282 0.264109C6.19785 -0.0880364 6.82369 -0.0880363 7.21015 0.264109C7.59662 0.617558 7.59662 1.18882 7.21015 1.53966L2.68073 6.00147L7.21015 10.4594Z" fill="black"></path>
        </svg>
      </button>
      <div class="w-full md:w-11/12 px-4 mb-12 md:mb-0">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <div class="flex flex-wrap">
                      <div class="w-full md:w-1/2 xl:w-1/3 px-4">
                        <div class="relative max-w-sm mx-auto mb-8">
                          <div class="relative pt-16 pb-20 px-8 md:px-16 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 lg:text-8xl leading-tight font-medium font-heading">Choose application</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

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

How It Works three-step card carousel

A marketing section with a small eyebrow label, a large heading 'Easy to use', and a horizontal row of three numbered step cards with left and right arrow controls and a progress indicator below. The center card is offset slightly lower and stacked cards suggest a carousel of steps.

Tailwind Component #102

Tailwind CSS

Uinel

<section class="relative py-20 xl:py-24 bg-darkBlueGray-500 overflow-hidden">
  <img class="absolute right-0 -bottom-28 sm:-bottom-56 lg:-bottom-96 transform lg:translate-y-56 lg:translate-x-80 w-1/2 lg:w-auto" src="uinel-assets/elements/ecommerce-logo-clouds/shape.svg" alt="">
  <img class="absolute left-1/2 transform -translate-x-1/2 bottom-0 hidden lg:block" src="uinel-assets/elements/ecommerce-logo-clouds/lines.png" alt="">
  <div class="relative z-10 container px-4 mx-auto">
    <div class="text-center">
      <span class="inline-block mb-14 xl:mb-28 text-xs text-gray-300 font-medium uppercase tracking-widest">Trusted by brands all over the world</span>
      <div class="flex flex-wrap max-w-6xl mx-auto">
        <div class="p-4 w-1/2 sm:w-1/5">
          <div class="flex p-4 w-16 h-16 mb-5 xl:mb-11 mx-auto justify-center items-center text-center bg-white rounded-5xl">
            <img class="mx-auto w-full" src="uinel-assets/brands/spotify.png" alt="">
          </div>
          <h3 class="text-xl text-white font-heading font-medium">Spotify</h3>
        </div>
        <div class="p-4 w-1/2 sm:w-1/5">
          <div class="flex w-16 h-16 p-4 mb-5 xl:mb-11 mx-auto justify-center items-center text-center bg-white rounded-5xl">
            <img class="mx-auto w-full" src="uinel-assets/brands/dropbox.png" alt="">
          </div>
          <h3 class="text-xl text-white font-heading font-medium">Dropbox</h3>
        </div>
        <div class="p-4 w-1/2 sm:w-1/5">
          <div class="flex w-16 h-16 p-4 mb-5 xl:mb-11 mx-auto justify-center items-center text-center bg-white rounded-5xl">
            <img class="mx-auto w-full" src="uinel-assets/brands/miro.svg" alt="">
          </div>
          <h3 class="text-xl text-white font-heading font-medium">Miro</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

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

Tailwind Component #103

Tailwind CSS

Uinel

<section class="py-24 2xl:pt-44 2xl:pb-52 font-medium bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap justify-center mx-auto max-w-7xl text-center">
      <div class="w-full md:w-1/3 lg:w-1/5 px-3 mb-6 lg:mb-0">
        <div class="p-5 pb-14 bg-gray-50 rounded-9xl">
          <div class="py-12 mb-7 bg-white rounded-5xl shadow-md">
            <h2 class="font-bold text-9xl leading-6">10+</h2>
          </div>
          <h3 class="font-heading text-lg">Years together</h3>
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/5 px-3 mb-6 lg:mb-0">
        <div class="p-5 pb-14 lg:relative lg:top-14 bg-gray-50 rounded-9xl">
          <div class="py-12 mb-7 bg-white rounded-5xl shadow-md">
            <h2 class="font-bold text-9xl leading-6">4.1K</h2>
          </div>
          <h3 class="font-heading text-lg">UI/UX Designers</h3>
        </div>
      </div>
      <div class="w-full md:w-1/3 lg:w-1/5 px-3 mb-6 lg:mb-0">
        <div class="lg:relative lg:top-14 p-5 pb-14 bg-gray-50 rounded-9xl">
          <div class="py-12 mb-7 bg-white rounded-5xl shadow-md">
            <h2 class="font-bold text-9xl leading-6">80</h2>
          </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 #104

Tailwind CSS

Uinel

<section class="py-24 2xl:py-44 font-medium bg-darkBlueGray-500 text-white rounded-t-10xl">
  <div class="container px-4 mx-auto">
    <div class="max-w-5xl mx-auto text-center">
      <span class="inline-block py-3 px-7 mb-10 font-medium text-xl leading-5 text-indigo-500 border border-indigo-500 rounded-6xl">Join us today</span>
      <h2 class="mb-14 xl:mb-16 font-heading text-9xl md:text-10xl xl:text-11xl leading-tight">Get inspired from the all designers</h2>
      <p class="mb-14 xl:mb-16 font-normal text-base text-gray-300 leading-6">A short message that will bring your customers into the world.</p>
      <a href="#" 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">Join 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

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

Dark Navy Centered Hero with Pill Badge and Blue CTA

A full-width dark navy promotional hero section with a rounded top edge, featuring an outlined pill badge, a large two-line white heading, a short muted subtitle, and a solid blue call-to-action button, all centered in a vertical stack.

Tailwind Component #105

Tailwind CSS

Uinel

<section class="py-9 bg-gray-50 overflow-hidden">
  <div class="relative container px-4 mx-auto">
    <img class="absolute left-24 -top-16 z-10" src="uinel-assets/images/http-codes/elipse-purple.svg" alt="">
    <img class="absolute -left-16 -bottom-48" src="uinel-assets/images/http-codes/elipse-yellow.svg" alt="">
    <div class="relative text-center py-12 md:py-24 px-4 2xl:pt-44 2xl:pb-64 bg-white rounded-7xl z-20">
      <div class="relative z-40">
        <span class="block mb-12 uppercase tracking-widest text-xs text-gray-300">WOOOOPS</span>
        <h2 class="max-w-5xl mb-12 mx-auto font-medium font-heading text-9xl md:text-10xl xl:text-11xl leading-tight">
          <p>Wooops.</p>
          <p>We can’t find that page</p>
        </h2>
        <p class="max-w-md mb-14 xl:mb-16 mx-auto font-heading font-medium text-2xl leading-10">or something has gone wrong</p>
        <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="#">Back home</a>
      </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.

404 Error Page with Centered Message and Back Home Button

A centered error state card displaying a small 'WOOOOPS' label, a large two-line heading 'Wooops. We can't find that page', a supporting line, and a blue 'Back home' call-to-action button. Decorative yellow and purple gradient shapes frame the white card on a light gray background.

Tailwind Component #106

Tailwind CSS

Uinel

<section class="pt-20 pb-24 xl:pb-32 bg-darkBlueGray-500">
  <div class="container px-4 mx-auto">
    <span class="mb-9 block font-medium uppercase tracking-widest text-center text-xs leading-4 text-gray-300">Clouds</span>
    <h2 class="mb-16 font-heading font-medium text-center text-6xl text-white leading-relaxed">Trusted by brands all over the world</h2>
    <div class="flex flex-wrap -mx-2">
      <div class="w-full md:w-1/2 lg:w-1/4 xl:w-1/5 px-2 mb-6 xl:mb-0">
        <div class="flex items-center py-4 px-5 bg-darkBlueGray-300 bg-opacity-20 rounded-9xl">
          <div class="flex items-center justify-center bg-white w-16 h-16 rounded-5xl shadow-sm">
            <img class="h-8" src="uinel-assets/brands/spotify.png" alt="">
          </div>
          <p class="ml-6 text-xl font-heading font-medium text-white">Spotify</p>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/4 xl:w-1/5 px-2 mb-6 xl:mb-0">
        <div class="flex items-center py-4 px-5 lg:mt-16 bg-darkBlueGray-300 bg-opacity-20 rounded-9xl">
          <div class="flex items-center justify-center w-16 h-16 bg-white rounded-5xl shadow-sm">
            <img class="h-8" src="uinel-assets/brands/slack.png" alt="">
          </div>
          <p class="ml-6 text-xl font-heading font-medium text-white">Slack</p>
        </div>
      </div>
      <div class="hidden xl:block xl:w-1/5 px-2 mb-6 xl:mb-0">
        <div class="flex items-center py-4 px-5 lg:mt-16 bg-darkBlueGray-300 bg-opacity-20 rounded-9xl">
          <div class="flex items-center justify-center w-16 h-16 bg-white rounded-5xl shadow-sm">

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

Tailwind CSS

Uinel

<section class="py-24 2xl:pt-44 2xl:pb-52 bg-white overflow-hidden">
  <div class="container mx-auto px-4">
    <div class="mb-20 xl:mb-24 text-center">
      <span class="mb-9 block font-medium uppercase tracking-widest text-xs leading-4 text-gray-300">Discover special tools</span>
      <h2 class="mb-14 xl:mb-16 font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight max-w-4xl mx-auto">Your best website starts here</h2>
      <div class="flex items-center justify-center">
        <div class="flex items-center justify-center mr-9 w-20 h-20 bg-white rounded-5xl shadow-sm">
          <img src="uinel-assets/elements/content/avatar-content2.png" alt="">
        </div>
        <div class="text-left">
          <h3 class="font-heading font-medium text-xl leading-loose">Timothy Bowen</h3>
          <span class="font-bold uppercase tracking-wider text-xs leading-4 text-gray-300">February 21, 9 am</span>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-wrap mb-10 md:mb-32 w-full">
    <div class="w-full md:w-1/2 xl:w-8/12 flex items-center px-10 py-20 md:p-0 bg-darkBlueGray-500 md:rounded-bl-50">
      <img class="relative md:-right-10 lg:-right-20 w-full" src="uinel-assets/images/content/table2.png" alt="">
    </div>
    <div class="w-full md:w-1/2 xl:w-4/12 h-128">
      <img class="w-full h-2/3 md:h-full rounded-b-50 md:rounded-bl-none object-cover object-top" src="uinel-assets/images/content/man2.png" alt="">
    </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 #108

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 px-3 mb-6">
        <div class="h-full px-8 py-10 bg-white rounded-3xl">
          <div class="flex items-center mb-4">
            <img class="mr-4 xl:mr-3" src="uinel-assets/elements/dashboard-stats-tiles/icon-small4.svg">
            <h3 class="mr-auto pr-1 text-sm text-darkBlueGray-300 font-heading font-medium">Responces</h3>
            <div class="px-3 py-1 text-center bg-blue-200 bg-opacity-70 rounded-full">
              <span class="text-sm font-bold text-blue-500 leading-6">30 days</span>
            </div>
          </div>
          <div class="flex items-center mb-5">
            <span class="inline-block mr-2 text-6xl font-heading font-medium">248.53</span>
            <div class="inline-flex items-center px-2 py-1 text-center bg-green-200 bg-opacity-70 rounded-full">
              <span class="text-xxs font-bold text-green-500 leading-4">+9%</span>
            </div>
          </div>
          <div class="flex items-center">
            <img class="mr-3" src="uinel-assets/elements/dashboard-stats-tiles/arrow2.svg" alt="">
            <span class="text-sm text-darkBlueGray-300 font-medium leading-10">7.8% more</span>
          </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 #109

Tailwind CSS

Uinel

<section class="py-24 2xl:py-40 bg-darkBlueGray-500 rounded-b-10xl">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="relative w-full lg:w-1/2 px-4 lg:pr-10 xl:pr-20 mb-20 lg:mb-0">
        <img src="uinel-assets/images/contacts/widget3.png" alt="">
      </div>
      <div class="w-full lg:w-1/2 px-4">
        <h2 class="text-9xl md:text-10xl xl:text-11xl text-white font-medium font-heading mb-6">Contact</h2>
        <p class="text-lg text-gray-300 mb-14">Lorem ipsum commodo, tristique lectus.</p>
        <div class="flex flex-wrap mb-14 xl:mb-20">
          <div class="w-full xl:w-1/2 flex items-center mb-6">
            <img class="mr-6 h-14" src="uinel-assets/images/contacts/icon1.svg" alt="">
            <a class="text-3xl text-white font-medium" href="#">+ 44 1447881709</a>
          </div>
          <div class="w-full xl:w-1/2 flex items-center mb-6">
            <img class="mr-6 h-14" src="uinel-assets/images/contacts/icon2.svg" alt="">
            <a class="text-3xl text-white font-medium" href="#">uinelchat</a>
          </div>
          <div class="w-full xl:w-1/2 flex items-center">
            <img class="mr-6 h-14" src="uinel-assets/images/contacts/icon3.svg" alt="">
            <a class="text-3xl text-white font-medium" href="#">help@uinel</a>
          </div>
        </div>
        <div class="flex flex-wrap"><a class="inline-block py-5 px-10 mr-6 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="#">Call</a><a class="inline-block py-5 px-10 text-xl leading-6 font-medium tracking-tighter font-heading bg-white hover:bg-gray-50 focus:ring-2 focus:ring-gray-50 focus:ring-opacity-50 rounded-xl" href="#">More</a></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 #110

Tailwind CSS

Uinel

<section class="px-4 lg:px-16">
  <div class="relative py-24 xl:py-52">
    <img class="absolute top-0 left-0 w-full h-full rounded-9xl object-cover" src="uinel-assets/images/ecommerce-banners/background-placeholder.png" alt="">
    <div class="relative container px-4 mx-auto">
      <div class="px-4 md:pl-20 lg:pl-40">
        <p class="mb-1 text-xl font-heading font-medium text-white">Brighter - stronger.</p>
        <h1 class="mb-8 text-9xl md:text-10xl xl:text-12xl font-heading font-medium text-white">Series 9</h1>
        <p class="mb-14 md:mb-32 max-w-sm text-darkBlueGray-100 md:w-56">From $29.12/mo. for 24 mo. or $699 before trade‑in1.</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>
  </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 #111

Tailwind CSS

Uinel

<section class="pt-12 pb-24 bg-white overflow-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4, color: 1, memoryStorage: '', tab: '' }" x-init="memoryStorage = $refs.memoryStorage1.textContent, tab = $refs.tab1.textContent">
  <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="relative container px-4 mx-auto">
    <div class="hidden md:flex md:absolute left-0 top-0 mt-20 min-w-max px-4 text-center md:flex-col items-center justify-center">
      <a class="inline-block sm:mb-12 mr-4 sm:mr-0 transform -rotate-90 sm:transform-none hover:text-darkBlueGray-400" href="#">
        <svg width="12" height="8" viewBox="0 0 12 8" 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 #112

Tailwind CSS

Uinel

<div x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <section class="p-8 pb-0 font-medium bg-blueGray-100">
    <div class="relative pt-24 2xl:pt-36 lg:pb-24 2xl:pb-44 text-white bg-darkBlueGray-500 z-10 overflow-hidden rounded-t-10xl">
      <div class="container lg:relative px-4 mx-auto">
        <div class="flex flex-wrap items-center justify-center mb-20 mx-auto">
          <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block order-last md:order-first mr-4 md:mr-0">
            <img src="uinel-assets/elements/portfolio/arrow-left-white.svg" alt="">
          </button>
          <div class="max-w-2xl">
            <div class="inline-flex justify-center w-full">
                <div class="w-full md:w-auto flex flex-wrap mx-20 mb-6 md:mb-0">
                  <div class="w-full md:w-auto text-center">
                    <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight">SchoolTrip</h2>
                  </div>
                  <div class="relative mx-auto mb-2 md:mb-0 md:ml-2 w-20 h-16 order-first md:order-last">
                    <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 class="absolute top-0 left-0" src="uinel-assets/elements/portfolio/elipse1.svg" alt="">
                    <img class="absolute top-0 left-0 mt-1 ml-1" src="uinel-assets/elements/portfolio/elipse2.svg" alt="">
                  </div>
                </div>
            </div>
          </div>
          <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-block order-last">
            <img src="uinel-assets/elements/portfolio/arrow-right-white.svg" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #113

Tailwind CSS

Uinel

<section class="pb-24">
  <div class="pt-24 pb-64 xl:pt-52 lg:pb-80 bg-blueGray-100 text-center rounded-b-10xl">
    <div class="container px-4 mx-auto">
      <span class="inline-block py-3 px-7 mb-8 text-lg font-medium font-heading leading-5 text-indigo-500 border border-indigo-500 rounded-6xl">Create account</span>
      <h2 class="mb-12 text-9xl md:text-10xl xl:text-11xl leading-tight font-heading font-medium">Start creating a design</h2>
      <p class="text-xl text-gray-400">Sed porttitor turpis sit amet malesuada porta vivamus lobortis.</p>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="-mt-52 max-w-4xl mx-auto py-10 px-8 bg-white rounded-4xl shadow-lg">
      <div class="flex flex-wrap justify-center -mb-4 -mx-4">
        <div class="w-full md:w-auto px-4 mb-4">
          <a class="flex items-center justify-center py-5 px-5 border-2 border-gray-50 hover:border-gray-100 rounded-xl" href="#">
            <img class="w-6 h-6 mr-4" src="uinel-assets/images/sign-up/google.svg" alt="">
            <p class="font-bold uppercase">Google</p>
          </a>
        </div>
        <div class="w-full md:w-auto px-4 mb-4">
          <a class="flex items-center justify-center py-5 px-5 border-2 border-gray-50 hover:border-gray-100 rounded-xl" href="#">
            <img class="w-6 h-6 mr-4" src="uinel-assets/images/sign-up/apple.svg" alt="">
            <p class="font-bold uppercase">Apple</p>
          </a>
        </div>
        <div class="w-full md:w-auto px-4 mb-4">

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

Tailwind CSS

Uinel

<div class="fixed bottom-0 right-0 z-50 p-6" :class="{'hidden': !open}" x-data="{ open: true }">
  <div class="relative max-w-2xl px-8 md:px-14 pt-6 pb-9 bg-white rounded-7xl shadow-3xl z-50">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
        <div class="flex items-center mb-4">
          <img class="mr-8" src="uinel-assets/images/cookies/cookies-image.svg" alt="">
          <h3 class="font-heading font-medium text-3xl leading-loose">Cookies</h3>
        </div>
        <p class="text-base leading-6">By clicking “Accept”, you agree to the storing of cookies on your device to enhance (...)</p>
      </div>
      <div class="w-full md:w-1/2 flex flex-col lg:flex-row lg:justify-end items-center px-4">
        <a class="inline-block py-1 mb-4 lg:mb-0 lg:mr-9 lg:mt-10 font-bold text-xl leading-7 border-b border-black" href="#">
          <span class="tracking-tight">More</span>
        </a>
        <a x-on:click.prevent="open = false" class="lg:max-w-max py-3 px-10 lg:mt-10 w-full text-xl leading-7 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="#">Accept</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

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

Tailwind Component #115

Tailwind CSS

Uinel

<section>
  <div class="py-20 bg-yellow-500">
    <div class="container px-4 mx-auto">
      <a class="relative block mb-12 mx-auto max-w-max" href="#">
        <img class="mx-auto h-12" src="uinel-assets/logos/ecommerce/uistore-gray-black.svg" alt="">
        <img class="absolute left-1/2 top-48 hidden lg:block" src="uinel-assets/elements/ecommerce-footers/blue-line.svg" alt="">
      </a>
      <div class="relative flex justify-between flex-wrap max-w-7xl mx-auto">
        <img class="hidden md:block lg:hidden absolute right-0 top-0 h-1/2 transform translate-y-1/2" src="uinel-assets/elements/ecommerce-footers/blue-line.svg" alt="">
        <div class="md:pr-4 mb-20 lg:mb-0 w-full lg:w-1/2 md:max-w-lg">
          <span class="block mb-7 text-xs leading-4 uppercase font-medium tracking-widest">Newsletter</span>
          <h2 class="mb-10 text-8xl leading-tighter font-heading font-medium">Get free 20% discount for your first order.</h2>
          <div class="lg:flex mb-4">
            <input class="py-3 px-6 xl:px-9 mb-2 lg:mb-0 xl:mb-0 xl:mr-2 w-full lg:w-auto bg-blueGray-50 placeholder-darkBlueGray-400 border-2 border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 rounded-xl" type="email" placeholder="Enter you Email">
            <a class="inline-block py-3 px-10 lg:ml-2 w-full lg:w-auto text-xl leading-7 text-white font-heading font-medium tracking-tighter text-center bg-purple-500 hover:bg-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 rounded-xl" href="#">Let's go</a>
          </div>
          <p class="xl:mb-24 text-xs text-darkBlueGray-400 leading-10">Fusce sodales vitae lorem vitae now tempus.</p>
        </div>
        <div class="md:pl-4 w-full lg:w-1/2 md:max-w-md">
          <span class="block mb-7 text-xs leading-4 uppercase font-medium tracking-widest">Contact</span>
          <h2 class="mb-6 xl:mb-14 text-8xl leading-tighter font-heading font-medium">Have any question?</h2>
          <div class="lg:flex lg:items-center lg:flex-wrap">
            <img class="mb-6 mx-auto xl:mx-0 xl:mr-10" src="uinel-assets/elements/ecommerce-footers/avatar.png" alt="">
            <div class="py-5 px-12 mb-6 xl:mb-3 bg-white rounded-2xl shadow-4xl">

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

Tailwind CSS

Uinel

<section class="bg-white py-24 2xl:py-44" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <span class="text-sm text-gray-300 uppercase">THE BEST PEOPLE IN THE WORLD</span>
    <h2 class="mt-8 mb-24 text-9xl md:text-10xl xl:text-11xl font-heading font-medium">Team</h2>
    <div class="flex flex-wrap items-center justify-center -mx-4 mb-16">
      <div class="w-auto px-4 mb-4 xl:mb-0 text-center order-last sm:order-first">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-block">
          <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.59662 10.8128 7.59662 11.3841 7.21015 11.7349C6.82369 12.0871 6.19929 12.0897 5.81282 11.7349L0.289847 6.63794C-0.096617 6.28579 -0.096617 5.71584 0.289847 5.36108L5.81282 0.264109C6.19785 -0.0880364 6.82369 -0.0880363 7.21015 0.264109C7.59662 0.617558 7.59662 1.18882 7.21015 1.53966L2.68073 6.00147L7.21015 10.4594Z" fill="black"></path>
          </svg>
        </button>
      </div>
      <div class="w-full sm:w-4/5 px-4 mb-10 md:mb-0">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <div class="flex flex-wrap items-start -mx-4 pt-9">
                      <div class="w-full md:w-1/2 lg:w-1/4 px-4 mb-14 lg:mb-0">
                        <div class="relative h-full px-6 pt-16 pb-8 text-center bg-gray-100 rounded-7xl">
                          <img class="absolute top-0 left-1/2 transform -translate-y-1/2 -translate-x-1/2 w-20 h-20" src="uinel-assets/images/team/placeholder-photo.png" alt="">
                          <h4 class="mb-4 text-xl font-heading font-medium">Ainsley Stones</h4>
                          <span class="p-2 text-sm bg-white rounded-full uppercase font-bold text-gray-300">Founder</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

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

Tailwind Component #117

Tailwind CSS

Uinel

<section class="py-24 2xl:py-44 bg-blueGray-100">
  <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 sm:w-1/2 lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="h-full bg-white rounded-7xl">
          <img class="mb-6 xl:mb-10 w-full rounded-7xl" src="uinel-assets/images/ecommerce-newest-products/smartphone2.jpg" alt="">
          <div class="px-8 pb-8 xl:px-14 xl:pb-14">
            <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="flex items-center mb-6 xl:mb-10 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>
      <div class="w-full sm:w-1/2 lg:w-1/3 px-3 mb-6 lg:mb-0">
        <div class="h-full bg-white rounded-7xl">

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

Tailwind CSS

Uinel

<section class="py-24 2xl:pt-44 2xl:pb-52 font-medium bg-white">
  <div class="container px-4 mx-auto">
    <div class="mb-20 xl:mb-28 text-center">
      <span class="mb-9 block font-medium uppercase tracking-widest text-xs leading-4 text-gray-300">Discover special tools</span>
      <h2 class="mb-12 font-heading font-medium text-9xl md:text-10xl xl:text-11xl leading-tight">Statistics show</h2>
      <p class="font-heading font-normal text-lg leading-8 text-darkBlueGray-400 max-w-xl mx-auto">Newest haretra neque non mi aliquam, finibus mollis is the nulla aliquet in molestie odio congue.</p>
    </div>
    <div class="grid md:grid md:grid-cols-2 xl:grid-cols-4 gap-14 xl:gap-20">
      <div class="flex">
        <div class="pr-8 xl:pr-16 w-full">
          <img class="-ml-6 xl:mb-9" src="uinel-assets/elements/stats/percent-46.svg" alt="">
          <h2 class="mb-10 font-heading text-7xl xl:text-8xl leading-tight">Years together</h2>
          <p class="font-normal text-lg text-darkBlueGray-400">The nulla commodo, commodo eros a, tristique lectus.</p>
        </div>
        <img class="h-48 my-auto" src="uinel-assets/elements/stats/line-top.svg" alt="">
      </div>
      <div class="flex">
        <div class="pr-8 xl:pr-16 w-full">
          <img class="-ml-6 xl:mb-9" src="uinel-assets/elements/stats/percent-61.svg" alt="">
          <h2 class="mb-10 font-heading text-7xl xl:text-8xl leading-tight">UI/UX Designers</h2>
          <p class="font-normal text-lg text-darkBlueGray-400">The nulla commodo, commodo eros a, tristique lectus.</p>
        </div>
        <img class="h-48 my-auto" src="uinel-assets/elements/stats/line-top.svg" alt="">
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #119

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-2/3 px-3 mb-6 lg:mb-0">
        <div class="px-8 md:px-12 xl:px-20 pt-14 pb-12 sm:pb-16 bg-white rounded-3xl">
          <div class="flex mb-6 sm:mb-12 flex-wrap items-center justify-between">
            <h3 class="mb-8 sm:mb-0 text-xl font-heading font-medium leading-8">Traffic Analysis</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>

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

Tailwind CSS

Uinel

<section class="py-24 xl:py-44 bg-blueGray-100 overflow-hidden">
  <div class="container px-4 mx-auto">
    <h2 class="mb-6 text-9xl md:text-10xl xl:text-12xl font-heading font-medium">Features</h2>
    <p class="mb-12 xl:mb-28 max-w-md text-xl font-heading font-medium">I am ante nulla, porttitor at turpis facilisis, dignissim rutrum durum.</p>
    <div class="flex items-center justify-center -mx-4">
      <div class="hidden md:block flex-shrink-0 w-auto px-4">
        <div class="px-6 pt-8 pb-10 bg-white rounded-3xl">
          <div class="flex flex-wrap items-center max-w-sm">
            <div class="w-full sm:w-1/3 mb-4 sm:mb-0">
              <img class="h-16" src="uinel-assets/elements/ecommerce-features/icon1.svg" alt="">
            </div>
            <div class="w-full sm:w-2/3">
              <h3 class="mb-2 text-lg font-heading font-medium">Superpower</h3>
              <p>Donec laoreet sem sollicitudin, mattis mi in, tristique.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="w-auto sm:w-1/12">
        <a class="inline-block hover:text-darkBlueGray-400" href="#">
          <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>
        </a>

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 – Uinel Library

Framework

UI Library

Components

Tailwind Component #101

Get the code for 13,400+ components

How It Works three-step card carousel

Tailwind Component #102

Get the code for 13,400+ components

Tailwind Component #103

Get the code for 13,400+ components

Tailwind Component #104

Get the code for 13,400+ components

Dark Navy Centered Hero with Pill Badge and Blue CTA

Tailwind Component #105

Get the code for 13,400+ components

404 Error Page with Centered Message and Back Home Button

Tailwind Component #106

Get the code for 13,400+ components

Tailwind Component #107

Get the code for 13,400+ components

Tailwind Component #108

Get the code for 13,400+ components

Tailwind Component #109

Get the code for 13,400+ components

Tailwind Component #110

Get the code for 13,400+ components

Tailwind Component #111

Get the code for 13,400+ components

Tailwind Component #112

Get the code for 13,400+ components

Tailwind Component #113

Get the code for 13,400+ components

Tailwind Component #114

Get the code for 13,400+ components

Tailwind Component #115

Get the code for 13,400+ components

Tailwind Component #116

Get the code for 13,400+ components

Tailwind Component #117

Get the code for 13,400+ components

Tailwind Component #118

Get the code for 13,400+ components

Tailwind Component #119

Get the code for 13,400+ components

Tailwind Component #120

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