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

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

AI Portfolio Component Generator

Tailwind Component #4002

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

AI Sign in / Sign up Component Generator

Tailwind Component #4003

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

AI E-commerce (products) Component Generator

Tailwind Component #4004

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

AI Stats Component Generator

Tailwind Component #4005

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

AI Graphs Component Generator

Tailwind Component #4006

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

AI Features Component Generator

Tailwind Component #4007

Tailwind CSS

Uinel

<section class="overflow-hidden">
  <div class="px-6 lg:px-12 py-6 bg-blueGray-50">
    <nav class="flex justify-between">
      <div class="flex w-full items-center">
        <div class="hidden md:flex pb-3 pr-10 mr-auto items-center border-b border-darkBlueGray-100 text-darkBlueGray-300">
          <svg class="mr-8" width="17" height="18" viewBox="0 0 17 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.22603 16.1331L5.22266 11.6871" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
            <path d="M9.82614 12.5306C13.0093 12.5306 15.5898 9.94935 15.5898 6.76528C15.5898 3.5812 13.0093 1 9.82614 1C6.64297 1 4.0625 3.5812 4.0625 6.76528C4.0625 9.94935 6.64297 12.5306 9.82614 12.5306Z" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
          <input class="outline-none bg-transparent border-0 font-medium placeholder-darkBlueGray-300" type="search" placeholder="Type to search">
        </div>
        <div class="hidden xl:flex items-center">
          <a class="relative inline-block text-darkBlueGray-300 hover:text-darkBlueGray-400" href="#">
            <div class="absolute bottom-0 right-0 flex items-center justify-center -mr-2 -mb-1 w-4 h-4 text-xs text-white bg-red-500 rounded-full">1</div>
            <svg class="h-5" 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>
            </svg>
          </a>
          <div class="flex-shrink-0 w-px h-10 bg-gray-100 ml-8 mr-8"></div>
          <a class="flex mr-10 items-center text-darkBlueGray-400 hover:text-darkBlueGray-500" href="#">
            <span class="inline-block mr-5 font-heading font-medium leading-tight">Sona</span>
            <img class="mr-4" src="uinel-assets/elements/navigations/avatar-online.png" alt="">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Navbar Component Generator

Tailwind Component #4008

Tailwind CSS

Uinel

<section class="font-medium bg-blueGray-100 rounded-b-10xl py-24 2xl:pt-52 2xl:pb-40">
  <div class="container px-4 mx-auto">
    <span class="uppercase tracking-widest text-xs leading-4 mb-9 block text-center text-gray-300">New-in</span>
    <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight mb-28 2xl:mb-24 text-center">Features</h2>
    <div class="mb-24 grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-2">
      <div class="py-20 px-10 bg-white text-center md:text-left rounded-3xl">
        <img class="w-12 h-12 mb-6 mx-auto md:ml-0" src="uinel-assets/elements/features/helpdesk-small.svg" alt="">
        <h3 class="mb-2 font-heading text-3xl leading-loose">Helpdesk</h3>
        <p class="font-normal leading-loose text-darkBlueGray-400">Donec laoreet sem sollicitudin</p>
      </div>
      <div class="py-20 px-10 bg-white text-center md:text-left rounded-3xl">
        <img class="w-12 h-12 mb-6 mx-auto md:ml-0" src="uinel-assets/elements/features/devices-small.svg" alt="">
        <h3 class="mb-2 font-heading text-3xl leading-loose">3+ devices</h3>
        <p class="font-normal leading-loose text-darkBlueGray-400">The nulla come commodo</p>
      </div>
      <div class="py-20 px-10 bg-white text-center md:text-left rounded-3xl">
        <img class="mb-6 mx-auto md:ml-0" src="uinel-assets/elements/features/plugin-small.svg" alt="">
        <h3 class="mb-2 font-heading text-3xl leading-loose">Voice plugin</h3>
        <p class="font-normal leading-loose text-darkBlueGray-400">Nam ipsum augue eleifend</p>
      </div>
      <div class="py-20 px-10 bg-white text-center md:text-left rounded-3xl">
        <img class="w-12 h-12 mb-6 mx-auto md:ml-0" src="uinel-assets/elements/features/messages-small.svg" alt="">
        <h3 class="mb-2 font-heading text-3xl leading-loose">D.Messages</h3>
        <p class="font-normal leading-loose text-darkBlueGray-400">Vestibulum non odio non dui</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 Features Component Generator

Tailwind Component #4009

Tailwind CSS

Uinel

<div class="fixed right-0 bottom-5 px-5 w-full" :class="{'hidden': !open}" x-data="{ open: true }">
  <div class="relative flex flex-wrap p-10 xl:px-24 xl:pb-20 xl:pt-16 w-full bg-darkBlueGray-500 rounded-3xl">
    <a x-on:click.prevent="open=false" class="absolute right-7 top-7" href="#">
      <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="13.495" y1="0.494975" x2="1.49498" y2="12.495" stroke="#326BFF" stroke-width="1.4"></line><line x1="12.505" y1="12.495" x2="0.505026" y2="0.494976" stroke="#326BFF" stroke-width="1.4"></line></svg>
    </a>
    <div class="mb-6 lg:mb-0 w-full sm:w-3/12 lg:w-2/12">
      <img src="uinel-assets/elements/ecommerce-cookies/logo-uinel.svg" alt="">
    </div>
    <div class="relative z-10 mb-10 lg:mb-0 w-full sm:w-9/12 lg:w-5/12 xl:w-6/12">
      <h2 class="mb-6 xl:mb-9 text-3xl md:text-8xl text-white font-heading font-medium">Accept or manage</h2>
      <div class="flex flex-wrap -mx-2">
        <div class="w-full sm:w-1/2 lg:w-1/2 xl:w-1/3 px-2 mb-6 xl:mb-0">
          <p class="text-gray-300">By clicking “Accept”, you agree to the storing of cookies on your device to enhance (...)</p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/2 xl:w-1/3 px-2 mb-6 xl:mb-0">
          <p class="text-gray-300">Mauris tempus, risus id condimentum pretium, lectus nisl auctor risus, eget eleifend leo sapien</p>
        </div>
        <div class="w-full sm:w-1/2 lg:w-full xl:w-1/3 px-2">
          <p class="text-gray-300">Praesent vel posuere mauris. Proin varius, turpis quis volutpat facilisis, leo magna pulvinar nunc</p>
        </div>
        <div class="w-full px-2 mt-6">
          <a class="flex items-center pb-1 text-xl text-green-500 hover:text-green-600 font-bold tracking-tight max-w-max border-b border-green-600 hover:border-green-700" href="#">
            <span class="mr-5">Learn more</span>
            <svg width="14" height="17" viewBox="0 0 14 17" 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 Cookies Component Generator

Tailwind Component #4010

Tailwind CSS

Uinel

<section class="relative" x-data="{ open: true }" x-show="open">
  <div class="navbar-backdrop fixed inset-0 bg-blueGray-800 opacity-25"></div>
  <div class="fixed top-0 right-0 bottom-0 w-full md:max-w-xl pt-10 mt-6 mx-6 mb-6 bg-white bg-opacity-95 rounded-3xl z-40">
    <div class="absolute top-0 right-0 mt-8 mr-8">
      <button x-on:click="open = false">
        <svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="13.495" y1="0.494975" x2="1.49498" y2="12.495" stroke="#326BFF" stroke-width="1.4"></line><line x1="12.505" y1="12.495" x2="0.505026" y2="0.494976" stroke="#326BFF" stroke-width="1.4"></line></svg>
      </button>
    </div>
    <div class="h-full w-full px-8 md:px-24 pb-24 overflow-y-auto">
      <span class="inline-block mb-16 text-darkBlueGray-300 font-medium">3 products</span>
      <div class="relative flex flex-wrap items-center -mx-4 mb-8 pb-8 border-b border-gray-200 border-opacity-40">
        <button class="absolute top-0 right-0 text-gray-200 hover:text-gray-300">
          <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.5" y="0.5" width="27" height="27" rx="13.5" stroke="currentColor"></rect><line x1="20.495" y1="8.49497" x2="8.49498" y2="20.495" stroke="currentColor" stroke-width="1.4"></line><line x1="19.505" y1="20.495" x2="7.50503" y2="8.49498" stroke="currentColor" stroke-width="1.4"></line></svg>
        </button>
        <div class="relative w-full md:w-auto px-4 mb-6 md:mb-10 lg:mb-0">
          <a href="#">
            <img class="w-24" src="uinel-assets/images/ecommerce-product-info/phone01.png" alt="">
          </a>
        </div>
        <div class="w-full md:w-auto px-4 mb-6 lg:mb-0">
          <a class="block mb-4 text-xl font-heading font-medium hover:underline" href="#">Apple iPhone 12 Pro (128GB)</a>
          <div class="flex flex-wrap mb-6">
            <p class="mr-4 text-sm font-medium">
              <span class="font-heading">Color:</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 (orders) Component Generator

Tailwind Component #4011

Tailwind CSS

Uinel

<section class="relative bg-blueGray-100 pt-24 md:pb-24 2xl:pt-44 lg:pb-64 overflow-hidden rounded-b-10xl">
  <img class="hidden md:block absolute bottom-0 left-0 md:-ml-24 xl:-ml-96 transform -translate-x-36" src="uinel-assets/images/applications/frame3.png" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="ml-auto w-full md:w-1/2">
      <span class="text-sm text-gray-300 uppercase">Our application</span>
      <h2 class="mt-8 mb-8 text-9xl md:text-10xl xl:text-11xl font-heading font-medium leading-tight">Download app</h2>
      <p class="mb-10 text-lg text-gray-300">Sed porttitor turpis sit amet malesuada porta lorem ut posuere.</p>
      <div class="flex flex-wrap mb-20">
        <div class="w-full md:w-auto mb-4 lg:mb-0 md:mr-4">
          <div class="inline-flex items-center py-2 px-6 bg-white rounded-full">
            <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.45337 11.2668L0 5.81348L0.720216 5.09326L5.45337 9.82641L15.2798 0L16 0.720215L5.45337 11.2668Z" fill="#5E6B7B"></path>
            </svg>
            <p class="ml-4 text-gray-500">Online collaboration</p>
          </div>
        </div>
        <div class="w-full md:w-auto">
          <div class="inline-flex items-center py-2 px-6 bg-white rounded-full">
            <svg width="16" height="12" viewBox="0 0 16 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M5.45337 11.2668L0 5.81348L0.720216 5.09326L5.45337 9.82641L15.2798 0L16 0.720215L5.45337 11.2668Z" fill="#5E6B7B"></path>
            </svg>
            <p class="ml-4 text-gray-500">100 team members</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 Application Component Generator

Tailwind Component #4012

Tailwind CSS

Uinel

<section class="font-medium bg-white">
  <div class="md:grid md:grid-cols-2 md:items-center">
    <div class="container mx-auto max-w-xl px-4 lg:pr-0 py-24 md:py-0">
      <span class="inline-block mb-10 uppercase tracking-widest text-xs text-gray-300 leading-4">Newsletter</span>
      <h2 class="mb-11 font-heading text-9xl xl:text-10xl leading-tight">Subscribe to our newsletter</h2>
      <h3 class="mb-14 xl:mb-16 max-w-lg font-heading text-xl xl:text-2xl leading-10">Phasellus eget pretium mi, vestibulum lobortis neque.</h3>
      <ul>
        <li class="flex leading-6 font-normal text-darkBlueGray-400 mb-3">
          <img class="mr-6" src="uinel-assets/elements/newsletter/checked.svg" alt="">
          <span>Complete tools</span>
        </li>
        <li class="flex leading-6 font-normal text-darkBlueGray-400 mb-3">
          <img class="mr-6" src="uinel-assets/elements/newsletter/checked.svg" alt="">
          <span>100GB cloud storage</span>
        </li>
        <li class="flex leading-6 font-normal text-darkBlueGray-400">
          <img class="mr-6" src="uinel-assets/elements/newsletter/checked.svg" alt="">
          <span>Unlimited anonymous board editors</span>
        </li>
      </ul>
    </div>
    <div class="relative pt-24 pb-12 md:pb-24 px-6 2xl:pt-44 2xl:pb-52 bg-blueGray-100 rounded-b-10xl">
      <div class="relative max-w-lg mx-auto">
        <img class="absolute top-1/2 transform -translate-y-1/2" src="uinel-assets/elements/newsletter/bg-form.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

AI Newsletter Component Generator

Tailwind Component #4013

Tailwind CSS

Uinel

<section class="font-medium bg-white py-24 2xl:pt-44 2xl:pb-52 overflow-hidden">
  <div class="container px-4 mx-auto">
    <span class="uppercase tracking-widest text-xs text-gray-300 leading-4 mb-9 block text-center">The most popular</span>
    <h2 class="font-heading text-9xl md:text-10xl xl:text-11xl leading-tight mb-20 xl:mb-36 text-center">FAQ's</h2>
    <div class="grid lg:grid-cols-2 gap-20">
      <div class="grid gap-4">
        <div x-data="{ accordion: false }">
            <div :class="{'hidden': !accordion }" class="hidden mx-auto w-3/4 md:w-80 md:ml-16 bg-purple-500" style="height:3px;"></div>
            <button x-on:click="accordion = !accordion" class="w-full border border-black border-opacity-10 rounded-3xl py-9 px-6 md:px-16">
                <div class="flex items-start justify-between">
                    <h3 class="font-heading text-left text-4xl leading-tighter leading-10 mr-16">How should i develop my workflow over time?</h3>
                    <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                        <img class="mt-4" src="uinel-assets/elements/faqs/arrow-down-black.svg" alt="">
                    </span>
                </div>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <p class="text-lg text-left font-normal leading-6 mt-5">The nulla commodo, commodo eros a, tristique lectus.</p>
                </div>
            </button>
        </div>
        <div x-data="{ accordion: false }">
            <div :class="{'hidden': !accordion }" class="hidden mx-auto w-3/4 md:w-80 md:ml-16 bg-purple-500" style="height:3px;"></div>
            <button x-on:click="accordion = !accordion" class="w-full border border-black border-opacity-10 rounded-3xl py-9 px-6 md:px-16">
                <div class="flex items-start justify-between">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI FAQ Component Generator

Tailwind Component #4014

Tailwind CSS

Uinel

<section class="relative py-24 2xl:py-44 font-heading font-medium text-white bg-indigo-700 overflow-hidden rounded-t-10xl">
  <div class="relative container px-4 mx-auto z-10 text-center">
    <span class="inline-block mb-10 py-3 px-7 font-medium text-lg leading-5 border border-white 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">Join over 1 mln designers</h2>
    <p class="mb-14 xl:mb-16 font-sans font-normal text-base leading-6">A short message that will bring your customers into the world.</p>
    <a class="inline-block py-5 px-10 text-xl leading-6 font-medium tracking-tighter font-heading bg-white hover:bg-gray-50 text-body focus:ring-2 focus:ring-white focus:ring-opacity-50 rounded-xl" href="#">Join now</a>
  </div>
  <img class="absolute top-0 left-1/2 transform -translate-x-1/2 md:px-6 h-full" src="uinel-assets/elements/call-to-action/elipse-bg-blue.svg" 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

AI Call to action Component Generator

Tailwind Component #4015

Tailwind CSS

Uinel

<section class="lg:flex lg:items-center pt-24 lg:pt-0 bg-white">
  <div class="container px-4 mx-auto lg:w-1/2">
    <div class="lg:flex justify-between">
      <div class="mb-20 lg:mb-0 mx-auto lg:max-w-xl">
        <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="2xl:pr-36 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>
  </div>
  <div class="px-6 lg:px-20 py-24 lg:py-24 lg:w-1/2 bg-blueGray-100 lg:rounded-b-10xl">
    <div class="flex flex-col lg:flex-row py-10 px-8 xl:px-14 mb-2 bg-white rounded-3xl">
      <div>
        <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>
      </div>
      <div class="lg:ml-4 xl:ml-12">
        <h2 class="mb-6 font-heading font-medium text-7xl xl:text-8xl leading-tight">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

AI How it works Component Generator

Tailwind Component #4016

Tailwind CSS

Uinel

<section class="relative py-8 bg-darkBlueGray-500 overflow-hidden">
  <img class="absolute -right-8 -bottom-8" src="uinel-assets/images/http-codes/half-elipse-yellow.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <img class="absolute left-16 bottom-52 z-30" src="uinel-assets/images/http-codes/cursor-orange.svg" alt="">
    <img class="absolute right-16 top-96 z-30" src="uinel-assets/images/http-codes/cursor-blue.svg" alt="">
    <img class="absolute left-48 -top-16 z-10" src="uinel-assets/images/http-codes/elipse-purple.svg" alt="">
    <div class="relative text-center py-12 md:py-24 px-8 2xl:pt-44 2xl:pb-80 bg-white rounded-7xl z-30">
      <div class="relative z-40">
        <span class="block mb-9 uppercase tracking-widest text-xs text-gray-300">Can't find</span>
        <h2 class="mb-6 font-medium font-heading text-9xl md:text-10xl xl:text-smxl leading-tight">404</h2>
        <p class="max-w-md mb-20 xl:mb-24 mx-auto font-heading font-medium text-3xl leading-10">Wooops. We can’t find that page or something has gone wrong.</p>
        <a class="inline-flex items-center pb-2 font-bold tracking-tight text-xl leading-6 text-green-600 hover:text-green-700 border-b border-green-600 hover:border-green-700" href="#">
          <span class="mr-3">Back to home</span>
          <svg 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>
        </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

AI HTTP codes Component Generator

Tailwind Component #4017

Tailwind CSS

Uinel

<section class="py-24 2xl:py-44 font-medium bg-blueGray-100 overflow-hidden rounded-b-10xl">
  <div class="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-20 xl:mb-32 text-9xl md:text-10xl xl:text-11xl leading-tight">Latest blog</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8 xl:gap-24">
      <div class="relative mx-auto max-w-max">
        <img class="h-64 object-cover rounded-t-9xl" src="uinel-assets/images/blog/blog3-learning.png" alt="">
        <div class="absolute left-1/2 transform -translate-x-1/2 bottom-5 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 leading-5 text-purple-500 hover:text-purple-600" href="#">New in Uinel</a>
              <div class="mx-4 w-px h-6 bg-gray-50"></div>
              <p class="relative top-px uppercase tracking-widest text-xs text-gray-300">2 june</p>
            </div>
            <a class="inline-block hover:underline" href="#">
              <h3 class="font-heading leading-normal text-3xl xl:text-7xl">Get inspired from the all designers</h3>
            </a>
          </div>
        </div>
        <div class="h-44 bg-gray-50 rounded-b-9xl"></div>
      </div>
      <div class="relative mx-auto max-w-max">
        <img class="h-64 object-cover rounded-t-9xl" src="uinel-assets/images/blog/blog3-travel.png" alt="">
        <div class="absolute left-1/2 transform -translate-x-1/2 bottom-5 px-2 w-full">

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

Tailwind CSS

Uinel

<section class="text-gray-50 font-heading font-medium relative bg-indigo-700" x-data="{ mobileNavOpen: false }">
  <nav class="flex justify-between px-6 lg:px-12 py-8">
    <div class="flex w-full items-center justify-between">
      <div class="flex items-center">
        <button x-on:click="mobileNavOpen = !mobileNavOpen" class="hidden lg:block focus:outline-none">
          <svg width="25" height="16" viewBox="0 0 25 16" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="25" height="2" fill="white"></rect><rect y="14" width="25" height="2" fill="white"></rect></svg>
        </button>
        <div class="hidden lg:block w-px h-8 bg-white mx-8 md:ml-14 md:mr-12 bg-opacity-10"></div>
        <a href="#">
          <img class="h-12" src="uinel-assets/logos/uinel-gray-white.svg" alt="">
        </a>
      </div>
      <div class="hidden xl:flex items-center">
        <a class="flex items-center text-white" href="#">
          <span>Sona</span>
          <img class="ml-6" src="uinel-assets/elements/navigations/avatar-online.png" alt="">
          <img class="ml-6" src="uinel-assets/elements/navigations/arrow-down-white.svg" alt="">
        </a>
        <div class="w-px h-8 bg-white mx-9 bg-opacity-20"></div>
        <button class="uppercase text-white text-sm font-body font-bold border-2 border-white border-opacity-30 rounded-full py-3 px-5 tracking-wide hover:border-white">
          <span class="block mt-px">New project</span>
        </button>
      </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 Navigation (horizontal) Component Generator

Tailwind Component #4019

Tailwind CSS

Uinel

<section class="font-medium bg-white">
  <div class="md:grid md:grid-cols-2 md:items-center">
    <div class="container mx-auto max-w-xl px-4 lg:pr-0 py-24 md:py-0">
      <span class="uppercase tracking-widest text-xs text-gray-300 leading-4 mb-10 block">Newsletter</span>
      <h2 class="font-heading text-9xl xl:text-10xl leading-tight mb-11">Subscribe to our newsletter</h2>
      <h3 class="font-heading text-xl xl:text-2xl leading-10 mb-14 xl:mb-16 max-w-lg">Phasellus eget pretium mi, vestibulum lobortis neque.</h3>
      <ul>
        <li class="flex leading-6 font-normal text-darkBlueGray-400 mb-3">
          <img class="mr-6" src="uinel-assets/elements/newsletter/checked.svg" alt="">
          <span>Complete tools</span>
        </li>
        <li class="flex leading-6 font-normal text-darkBlueGray-400 mb-3">
          <img class="mr-6" src="uinel-assets/elements/newsletter/checked.svg" alt="">
          <span>100GB cloud storage</span>
        </li>
        <li class="flex leading-6 font-normal text-darkBlueGray-400">
          <img class="mr-6" src="uinel-assets/elements/newsletter/checked.svg" alt="">
          <span>Unlimited anonymous board editors</span>
        </li>
      </ul>
    </div>
    <div class="relative pt-24 pb-12 md:pb-24 px-6 2xl:pt-44 2xl:pb-52 bg-blueGray-100 rounded-b-10xl">
      <div class="relative max-w-lg mx-auto">
        <img class="absolute top-1/2 transform -translate-y-1/2" src="uinel-assets/elements/newsletter/bg-form.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

AI Newsletter Component Generator

Tailwind Component #4020

Tailwind CSS

Uinel

<section class="py-8 bg-blueGray-50">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-2">
      <div class="w-full md:w-1/2 px-2 mb-6">
        <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 px-2 mb-6">
        <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

AI Graphs 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 #4001

Get the code for 13,400+ components

Tailwind Component #4002

Get the code for 13,400+ components

Tailwind Component #4003

Get the code for 13,400+ components

Tailwind Component #4004

Get the code for 13,400+ components

Tailwind Component #4005

Get the code for 13,400+ components

Tailwind Component #4006

Get the code for 13,400+ components

Tailwind Component #4007

Get the code for 13,400+ components

Tailwind Component #4008

Get the code for 13,400+ components

Tailwind Component #4009

Get the code for 13,400+ components

Tailwind Component #4010

Get the code for 13,400+ components

Tailwind Component #4011

Get the code for 13,400+ components

Tailwind Component #4012

Get the code for 13,400+ components

Tailwind Component #4013

Get the code for 13,400+ components

Tailwind Component #4014

Get the code for 13,400+ components

Tailwind Component #4015

Get the code for 13,400+ components

Tailwind Component #4016

Get the code for 13,400+ components

Tailwind Component #4017

Get the code for 13,400+ components

Tailwind Component #4018

Get the code for 13,400+ components

Tailwind Component #4019

Get the code for 13,400+ components

Tailwind Component #4020

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

Support