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

Tailwind CSS

Yofte

<section class="py-20">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap -mx-3">
      <div class="w-full lg:w-1/2 px-3 mb-6 lg:mb-0">
        <div class="h-full bg-no-repeat bg-cover" style="background-image: url('yofte-assets/images/placeholder-portrait-sport.png');">
          <div class="pl-8 pr-8 lg:pr-0 lg:pl-24 pt-24 pb-52 max-w-md">
            <span class="mb-4 text-2xl">More inspirations</span>
            <h2 class="mt-6 mb-12 text-5xl font-bold font-heading">Featured styles. Check it now.</h2>
            <a class="inline-block bg-orange-300 hover:bg-orange-400 font-bold font-heading py-4 px-8 rounded-md text-white uppercase transition duration-200" href="#">More</a>
          </div>
        </div>
      </div>
      <div class="w-full lg:w-1/2 px-3">
        <div class="h-full bg-no-repeat bg-cover" style="background-image: url('yofte-assets/images/placeholder-shoes-sport.png');">
          <div class="pl-8 pr-8 lg:pr-0 lg:pl-24 pt-24 pb-52 max-w-md">
            <span class="mb-4 text-2xl">Newest product</span>
            <h2 class="mt-6 mb-12 text-5xl font-bold font-heading">Jackson ice skates. It's the future.</h2>
            <a class="inline-block bg-orange-300 hover:bg-orange-400 font-bold font-heading py-4 px-8 rounded-md text-white uppercase transition duration-200" href="#">More</a>
          </div>
        </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

AI Banners Component Generator

Tailwind Component #4222

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <div class="p-8 lg:p-20 bg-white">
      <h2 class="mb-8 text-4xl font-bold font-heading">Shopping Cart</h2>
      <p class="mb-10 md:mb-16 text-gray-500">Fusce pharetra lectus felis, eget temp.</p>
      <div class="flex mb-8 flex-wrap items-center justify-between">
        <div class="w-full lg:w-auto mb-8 lg:mb-0 flex flex-wrap items-center">
          <div class="flex items-center justify-center h-32 mb-4 lg:mb-0 bg-gray-100">
            <img class="h-full object-contain" src="yofte-assets/images/waterbottle.png" alt="">
          </div>
          <div class="w-full md:w-auto md:pl-4 md:pl-8">
            <h3 class="mb-2 text-xl font-bold font-heading">BRILE water filter carafe</h3>
            <p class="mb-8 text-gray-500">Maecenas 0.7 commodo sit</p>
            <p class="text-gray-500">In Stock</p>
          </div>
        </div>
        <div class="flex w-full lg:w-auto justify-between items-center lg:flex-col">
          <p class="lg:mb-12 text-right text-lg font-bold font-heading text-blue-300">$29.89</p>
          <div class="inline-flex items-center px-4 font-semibold font-heading text-gray-500 border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" x-data="{ quantity: 1 }">
            <button x-on:click="quantity > 1 ? quantity-- : quantity" class="py-2 hover:text-gray-700">
              <svg width="12" height="2" viewBox="0 0 12 2" fill="none" xmlns="http://www.w3.org/2000/svg"><g opacity="0.35"><rect x="12" width="2" height="12" transform="rotate(90 12 0)" fill="currentColor"></rect></g></svg>
            </button>
            <input class="w-12 m-0 px-2 py-4 text-center md:text-right border-0 focus:ring-transparent focus:outline-none rounded-md" type="number" x-model="quantity" placeholder="1">
            <button x-on:click="quantity++" class="py-2 hover:text-gray-700">

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

Tailwind CSS

Yofte

<section class="relative pt-20 md:pt-40 pb-20 bg-blue-800 overflow-x-hidden">
  <img class="absolute top-0 left-0 w-full max-h-32" src="yofte-assets/elements/line-content.svg" alt="">
  <div class="container mx-auto px-4">
    <div class="max-w-3xl mx-auto text-center">
      <h2 class="text-6xl md:text-7xl font-bold font-heading text-white">How to improve online store?</h2>
      <div class="inline-flex pt-14 mb-14 items-center">
        <img class="mr-8 w-20 lg:w-24 h-20 lg:h-24 rounded-full" src="yofte-assets/images/placeholder-portrait.png" alt="">
        <div class="text-left">
          <h4 class="mb-1 text-2xl font-bold font-heading text-white">Sarah Smith</h4>
          <p class="text-gray-500">14 June, 5:00 am</p>
        </div>
      </div>
    </div>
    <div class="relative h-96 -mx-6 mb-20">
      <div class="absolute top-1/2 transform -translate-y-1/2 left-0 right-0 h-80 w-full bg-blue-300"></div>
      <img class="relative w-full h-96 px-6 object-cover" src="yofte-assets/images/placeholder-banner.png" alt="">
    </div>
    <div class="max-w-3xl mx-auto">
      <h3 class="mb-12 text-3xl text-white">This morning, platea dictumst nec nunc. In hac habitasse, general, dignissim accumsan just. Suspendisse vitae ligula convallis, porta tortor et, finibus neque.</h3>
      <p class="mb-10 text-xl text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin consequat nisl quis justo egestas, nec eleifend erat egestas. Curabitur purus neque, tincidunt ac malesuada nec, ornare non odio. Nulla nec lorem sed purus semper porta vel sit amet sem. Nunc placerat non turpis eu molestie. Nam consectetur lacus ut lacus elementum dapibus. Etiam vehicula ipsum ac dolor tristique placerat. In hac habitasse platea dictumst.</p>
      <p class="text-xl text-gray-400">Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam venenatis est quis venenatis dignissim. Maecenas a sem eros. Quisque hendrerit vitae libero non porta. Maecenas quis sem et nulla pellentesque accumsan. Proin blandit bibendum orci, a aliquam augue sagittis sed. Quisque pharetra ut quam eget varius. Morbi nisi nunc, ultricies id ligula id, feugiat eleifend est. Etiam metus sem, ornare vitae porta vel, porta a mauris. Fusce dapibus egestas lorem eu tincidunt. Quisque lobortis placerat placerat. Donec eget lectus blandit ex pellentesque iaculis. Proin aliquam vulputate arcu et blandit. Duis sed lobortis mauris, vel porttitor lectus. Pellentesque vel ultrices odio.</p>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Content Component Generator

Tailwind Component #4224

Tailwind CSS

Yofte

<section class="py-20">
  <div class="container mx-auto px-4">
    <h2 class="mb-8 text-sm font-bold font-heading text-gray-400">TRUSTED BY BRANDS ALL OVER THE WORLD</h2>
    <div class="flex flex-wrap -mx-4 justify-between">
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-6 lg:mb-0">
        <div class="py-12 px-2 rounded-md shadow-2xl">
          <img class="mx-auto h-6" src="yofte-assets/brands/exxon.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-6 lg:mb-0">
        <div class="py-12 px-2 rounded-md shadow-2xl">
          <img class="mx-auto h-6" src="yofte-assets/brands/ea-sports.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-6 lg:mb-0">
        <div class="py-12 px-2 rounded-md shadow-2xl">
          <img class="mx-auto h-6" src="yofte-assets/brands/eurosport.svg" alt="">
        </div>
      </div>
      <div class="w-full sm:w-1/2 md:w-1/3 lg:w-1/6 px-4 mb-6 md:mb-0">
        <div class="py-12 px-2 rounded-md shadow-2xl">
          <img class="mx-auto h-6" src="yofte-assets/brands/nike.svg" 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

AI Logo clouds Component Generator

Tailwind Component #4225

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100 overflow-x-hidden">
  <div class="relative container px-4 mx-auto">
    <div class="absolute inset-0 bg-blue-200 my-24 -ml-4"></div>
    <div class="relative flex flex-wrap bg-white">
      <div class="w-full md:w-4/6 px-4">
        <div class="lg:max-w-3xl mx-auto py-20 px-4 md:px-10 lg:px-20">
          <a class="inline-block mb-14 text-3xl font-bold font-heading" href="#">
            <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
          </a>
          <h3 class="mb-8 text-4xl md:text-5xl font-bold font-heading">Signing up with social is super quick</h3>
          <p class="mb-10 font-semibold font-heading">Please, do not hesitate</p>
          <form class="flex flex-wrap -mx-4" action="">
            <div class="w-full md:w-1/2 px-4 mb-8 md:mb-12">
              <label for="">
                <h4 class="mb-5 text-gray-400 uppercase font-bold font-heading">Your Email</h4>
                <input class="p-5 w-full border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="email">
              </label>
            </div>
            <div class="w-full md:w-1/2 px-4 mb-12">
              <label for="">
                <h4 class="mb-5 text-gray-400 uppercase font-bold font-heading">Password</h4>
                <input class="p-5 w-full border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="password">
              </label>
            </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Sign in / Sign up Component Generator

Tailwind Component #4226

Tailwind CSS

Yofte

<section class="relative py-20 lg:py-40 bg-orange-300 overflow-x-hidden">
  <img class="absolute inset-0 w-full h-full" src="yofte-assets/elements/lines-white-3.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="text-center">
      <h2 class="mb-5 text-4xl md:text-5xl text-white font-bold font-heading">Join Our Newsletter</h2>
      <p class="mb-6 text-gray-100">Sign me up for Yofte newsletters to get exclusive perks.</p>
      <img class="mb-12 inline-block" src="yofte-assets/elements/quote.svg" alt="">
      <div class="relative max-w-xl mx-auto bg-white rounded-lg">
        <img class="absolute top-0 right-0 h-40 -mt-12 -mr-20" src="yofte-assets/elements/quote-light.png" alt="">
        <div class="relative lg:max-w-xl lg:mx-auto bg-white rounded-lg">
          <div class="relative flex flex-wrap items-center justify-between">
            <div class="relative flex-1">
              <span class="absolute top-0 left-0 ml-8 mt-4 font-semibold font-heading text-xs text-gray-400">Drop your e-mail</span>
              <input class="inline-block w-full pt-8 pb-4 px-8 placeholder-gray-900 border-0 focus:ring-transparent focus:outline-none rounded-md" type="text" placeholder="steven@example.dev">
            </div>
            <a class="inline-block w-auto bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-6 px-8 rounded-md uppercase text-center" href="#">Join</a>
          </div>
        </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

AI Newsletter Component Generator

Tailwind Component #4227

Tailwind CSS

Yofte

<div class="fixed bottom-0 right-0 z-50 p-8" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="relative flex flex-wrap items-end pl-12 pr-8 py-6 bg-orange-300">
    <div class="absolute top-0 -mt-2 w-6 h-6 bg-orange-300 transform rotate-45"></div>
    <div class="max-w-md pr-2">
      <h5 class="mb-2 text-xl text-white font-bold font-heading">Cookies settings</h5>
      <p class="text-gray-50">By clicking Accept, you agree to the storing of cookies on your device to enhance site navigation...</p>
    </div>
    <div class="mt-6 md:mt-0">
      <a class="inline-flex mb-4 md:mb-0 mr-6 items-center text-white underline" href="#">
        <span class="mr-2 text-white">More</span>
        <svg width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M26.0871 7.41489L19.3999 14.102L18.564 13.2661L24.2439 7.58625L0.592385 7.59043L0.592385 6.41183L24.2439 6.40765L18.982 1.14571L19.8179 0.309822L26.0871 6.579C26.3179 6.80984 26.3179 7.18406 26.0871 7.41489Z" fill="white"></path>
        </svg>
      </a>
      <a x-on:click.prevent="open=false" class="inline-block bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">Accept</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

AI Cookies Component Generator

Tailwind Component #4228

Tailwind CSS

Yofte

<section class="overflow-x-hidden">
  <div class="py-10 bg-white">
    <div class="container mx-auto px-4">
      <a class="text-3xl font-bold font-heading" href="#">
        <img class="h-9" src="yofte-assets/logos/yofte-logo.svg" alt="" width="auto">
      </a>
    </div>
  </div>
  <div class="relative py-20 xl:py-32 bg-blue-300" style="background-image: url('yofte-assets/elements/lines-color3.svg'); background-size: cover;" alt="">
    <div class="px-4">
      <div class="relative flex flex-wrap lg:flex-nowrap items-center justify-center px-4 text-center lg:text-left">
        <div class="w-full lg:w-auto">
          <img class="block mx-auto" src="yofte-assets/elements/404-2.svg" alt="">
        </div>
        <div class="w-full lg:w-auto">
          <h2 class="max-w-xl mx-auto py-10 text-3xl text-white font-bold font-heading bg-blue-300">Sorry, we can’t find that page or something has gone wrong</h2>
        </div>
      </div>
      <div class="flex flex-wrap items-center justify-center">
        <p class="mb-12 md:mb-0 text-gray-50">Checkout for any URL misspelling.</p>
        <a class="md:ml-12 inline-block w-full md:w-auto text-center bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-5 px-8 rounded-md uppercase" href="#">Homepage</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

AI HTTP codes Component Generator

Tailwind Component #4229

Tailwind CSS

Yofte

<section class="relative py-20 md:pt-32 bg-blue-800 overflow-x-hidden" x-data="{ showContent: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <img class="absolute h-24 md:h-auto top-0 left-0 right-0" src="yofte-assets/elements/line-top.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <h2 class="mb-10 xl:mb-20 text-5xl text-white font-bold font-heading">What Customers Say</h2>
    <div class="flex xl:hidden items-center mb-20">
      <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="flex items-center justify-center w-12 h-12 mr-5 bg-orange-300 hover:bg-orange-400 rounded-md">
        <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
        </svg>
      </button>
      <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md">
        <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
        </svg>
      </button>
    </div>
    <div class="relative max-w-4xl mx-auto">
      <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="hidden xl:flex absolute z-50 top-1/2 left-0 -ml-32 -mt-12 transform translate-y-1/2 items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md">
        <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
        </svg>
      </button>
      <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="hidden xl:flex absolute z-50 top-1/2 right-0 -mr-32 -mt-12 transform translate-y-1/2 items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md">
        <svg width="8" height="12" viewBox="0 0 8 12" 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 Reviews Component Generator

Tailwind Component #4230

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <h2 class="mb-14 text-5xl font-bold font-heading">Checkout</h2>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <form action="">
          <div class="flex mb-10 items-center">
            <span class="inline-flex mr-8 items-center justify-center w-12 h-12 rounded-full bg-blue-300 text-white">1</span>
            <h3 class="text-2xl font-bold font-heading">Delivery</h3>
          </div>
          <div class="mb-12">
            <label class="font-bold font-heading text-gray-600" for="">E-mail address</label>
            <input class="block w-full mt-4 py-4 px-4 bg-white border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="email">
          </div>
          <div class="flex mb-10 items-center">
            <span class="inline-flex mr-8 items-center justify-center w-12 h-12 rounded-full bg-purple-300 text-white">2</span>
            <h3 class="text-2xl font-bold font-heading">Shipping informations</h3>
          </div>
          <div class="mb-12">
            <div class="flex flex-wrap -mx-4 mb-10">
              <div class="w-full md:w-1/2 px-4 mb-10 md:mb-0">
                <label class="font-bold font-heading text-gray-600" for="">First name</label>
                <input class="block w-full mt-4 py-4 px-4 bg-white border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" type="text">
              </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 (orders) Component Generator

Tailwind Component #4231

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100">
  <div class="container mx-auto px-4">
    <div class="max-w-4xl mx-auto">
      <div class="flex flex-wrap -mx-3">
        <div class="w-full md:w-1/2 px-3 mb-6">
          <div class="text-center p-8 md:p-16 bg-white">
            <span class="inline-flex mb-16 items-center justify-center w-20 h-20 bg-blue-300 rounded-full">
              <svg width="37" height="37" viewBox="0 0 37 37" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M34.9845 11.6702C33.7519 10.3368 32 9.60814 30.0543 9.60814H24.9767V6.75543C24.9767 6.2438 24.5581 5.8252 24.0465 5.8252H0.930233C0.418605 5.8252 0 6.2438 0 6.75543V27.2128C0 27.7244 0.418605 28.143 0.930233 28.143H4.63566C4.93798 29.864 6.43411 31.174 8.24031 31.174C10.0465 31.174 11.5426 29.864 11.845 28.143H24.0465H26.0853C26.3876 29.864 27.8837 31.174 29.6899 31.174C31.4961 31.174 32.9922 29.864 33.2946 28.143H36.0698C36.5814 28.143 37 27.7244 37 27.2128V17.6004C36.9922 15.143 36.3023 13.0888 34.9845 11.6702ZM1.86047 7.68566H23.1163V10.5384V26.2903H11.6822C11.1783 24.8795 9.82171 23.864 8.24031 23.864C6.65892 23.864 5.30233 24.8795 4.79845 26.2903H1.86047V7.68566ZM8.24031 29.3136C7.24806 29.3136 6.44186 28.5074 6.44186 27.5151C6.44186 26.5229 7.24806 25.7167 8.24031 25.7167C9.23256 25.7167 10.0388 26.5229 10.0388 27.5151C10.0388 28.5074 9.23256 29.3136 8.24031 29.3136ZM29.6899 29.3136C28.6977 29.3136 27.8915 28.5074 27.8915 27.5151C27.8915 26.5229 28.6977 25.7167 29.6899 25.7167C30.6822 25.7167 31.4884 26.5229 31.4884 27.5151C31.4884 28.5074 30.6822 29.3136 29.6899 29.3136ZM35.1318 26.2826H33.1318C32.6279 24.8717 31.2713 23.8562 29.6899 23.8562C28.1085 23.8562 26.7519 24.8717 26.2481 26.2826H24.9845V11.4686H30.062C33.1938 11.4686 35.1395 13.8174 35.1395 17.6004V26.2826H35.1318Z" fill="white"></path>
              </svg>
            </span>
            <h3 class="mb-4 text-xl font-bold font-heading">Free Shipping</h3>
            <p class="mb-6">From $45</p>
            <p class="text-lg text-gray-500">Ante ipsum primis in faucibus orci luctus.</p>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-3 mb-6">
          <div class="text-center p-8 md:p-16 bg-white">
            <span class="inline-flex mb-16 items-center justify-center w-20 h-20 bg-indigo-300 rounded-full">
              <svg width="39" height="36" viewBox="0 0 39 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M33.7601 5.67776C30.3819 2.38616 25.8883 0.572266 21.1139 0.572266C16.2512 0.572266 11.7014 2.44089 8.30713 5.83414C7.93802 6.20161 7.94604 6.79581 8.32318 7.16329C8.70032 7.52294 9.31017 7.51512 9.68731 7.14765C12.7205 4.12188 16.7727 2.45653 21.1139 2.45653C29.9165 2.44871 37.0742 9.42284 37.0742 17.9998C37.0742 26.5767 29.9165 33.5508 21.1139 33.5508C12.3113 33.5508 5.15359 26.5767 5.15359 17.9998V17.8043L6.7424 19.3524C6.92696 19.5322 7.17571 19.626 7.42446 19.626C7.67322 19.626 7.91395 19.5322 8.10653 19.3524C8.48367 18.9849 8.48367 18.3907 8.10653 18.0232L4.88077 14.8724C4.50363 14.5049 3.89378 14.5049 3.51664 14.8724L0.282856 18.0232C-0.0942853 18.3907 -0.0942853 18.9849 0.282856 19.3524C0.467414 19.5322 0.716167 19.626 0.96492 19.626C1.21367 19.626 1.4544 19.5322 1.64698 19.3524L3.23579 17.8043V17.9998C3.23579 22.6518 5.09742 27.0302 8.47565 30.3218C11.8539 33.6134 16.3475 35.4273 21.1219 35.4273C25.8964 35.4273 30.39 33.6134 33.7682 30.3218C37.1464 27.0302 39 22.6518 39 17.9998C39 13.3477 37.1384 8.96937 33.7601 5.67776Z" fill="white"></path>
                <path d="M20.4014 8C17.272 8 14.7283 10.4785 14.7283 13.5277V16.1938H12.9629C12.4333 16.1938 12 16.616 12 17.132V26.4908C12 27.0068 12.4333 27.429 12.9629 27.429H27.848C28.3776 27.429 28.8109 27.0068 28.8109 26.4908V17.1399C28.8109 16.6238 28.3776 16.2016 27.848 16.2016H26.0826V13.5355C26.0826 10.4863 23.5309 8 20.4014 8ZM16.6541 13.5355C16.6541 11.5183 18.3392 9.88427 20.4014 9.88427C22.4637 9.88427 24.1488 11.5262 24.1488 13.5355V16.2016H16.6541V13.5355ZM26.885 25.5526H13.9258V18.0703H26.885V25.5526Z" fill="white"></path>
              </svg>
            </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 Features Component Generator

Tailwind Component #4232

Tailwind CSS

Yofte

<section class="relative py-20 md:py-32 bg-blue-800 overflow-x-hidden" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 8 }">
  <img class="absolute h-24 md:h-auto top-0 left-0 right-0" src="yofte-assets/elements/line-top.svg" alt="">
  <div class="relative container px-4 mx-auto mb-20 lg:mb-40">
    <div class="flex flex-wrap items-center">
      <h2 class="mb-10 lg:mb-0 w-full lg:w-auto text-5xl text-white font-bold font-heading">What Customers Say</h2>
      <div class="flex w-full lg:w-auto lg:ml-auto">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="mr-5 flex items-center justify-center w-12 h-12 bg-orange-300 hover:bg-orange-400 rounded-md">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.02344 5.99748L7.14844 10.1225L5.97043 11.3008L0.66742 5.99748L5.97043 0.694179L7.14844 1.87248L3.02344 5.99748Z" fill="white"></path>
          </svg>
        </button>
        <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="flex items-center justify-center w-12 h-12 bg-blue-300 hover:bg-blue-400 rounded-md">
          <svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M4.97656 6.00252L0.851562 1.87752L2.02957 0.699219L7.33258 6.00252L2.02957 11.3058L0.851562 10.1275L4.97656 6.00252Z" fill="white"></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <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 max-w-md px-3 opacity-50" :class="{'opacity-50': activeSlide == 0}">
      <div class="px-8 py-16 border border-white" :class="{'bg-blue-300 border-none': activeSlide != 0, 'bg-transparent border border-white': activeSlide == 0}">
        <div class="relative px-4 mx-auto">
          <img class="absolute top-0 left-0" src="yofte-assets/elements/quote.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 Reviews Component Generator

Tailwind Component #4233

Tailwind CSS

Yofte

<section class="py-20" x-data="{ size: '' }" x-init="size = $refs.size1.textContent">
  <div class="container mx-auto px-4">
    <ul class="flex flex-wrap mb-8 items-center">
      <li class="mr-5">
        <a class="inline-block mr-5 text-xs font-bold font-heading uppercase text-gray-300" href="#">HOME</a>
        <span class="inline-block">
          <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.131073 0.755835C-0.0436907 0.581885 -0.0436907 0.302414 0.131073 0.129744C0.305837 -0.0429273 0.588197 -0.0435662 0.76296 0.129744L5.86893 5.18707C6.04369 5.35975 6.04369 5.63922 5.86893 5.81317L0.762959 10.8705C0.588196 11.0432 0.305836 11.0432 0.131072 10.8705C-0.0436916 10.6972 -0.0436916 10.4171 0.131072 10.2444L4.78774 5.4998L0.131073 0.755835Z" fill="#151515"></path>
          </svg>
        </span>
      </li>
      <li class="mr-5">
        <a class="inline-block mr-5 text-xs font-bold font-heading uppercase text-gray-300" href="#">WATER FILTERS</a>
        <span class="inline-block">
          <svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0.131073 0.755835C-0.0436907 0.581885 -0.0436907 0.302414 0.131073 0.129744C0.305837 -0.0429273 0.588197 -0.0435662 0.76296 0.129744L5.86893 5.18707C6.04369 5.35975 6.04369 5.63922 5.86893 5.81317L0.762959 10.8705C0.588196 11.0432 0.305836 11.0432 0.131072 10.8705C-0.0436916 10.6972 -0.0436916 10.4171 0.131072 10.2444L4.78774 5.4998L0.131073 0.755835Z" fill="#151515"></path>
          </svg>
        </span>
      </li>
      <li><a class="inline-block text-xs font-bold font-heading uppercase text-gray-300" href="#">BRILE WATER FILTER CARAFE</a></li>
    </ul>
    <div class="flex -mx-1 mb-16" style="height: 590px;">
      <div class="w-full lg:w-1/2 px-1 md:px-4">
        <img class="object-cover w-full h-full" src="yofte-assets/images/product-bottle.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 E-commerce (products) Component Generator

Tailwind Component #4234

Tailwind CSS

Yofte

<section class="relative" x-data="{ mobileNavOpen: false }">
  <div class="py-2 bg-blue-500">
    <div class="flex items-center justify-center">
      <svg class="mr-2" width="18" height="11" viewBox="0 0 18 11" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="3.07129" width="4" height="10" rx="2" transform="rotate(-45 0 3.07129)" fill="white"></rect><rect x="8" y="2.82861" width="4" height="10" rx="2" transform="rotate(-45 8 2.82861)" fill="white"></rect></svg>
      <p class="text-xs font-bold font-heading text-blue-50">Hi, you’ re new here! Get 20% off card!</p>
    </div>
  </div>
  <nav class="relative flex flex-wrap">
    <div class="flex justify-between w-full bg-blue-300">
      <a class="hidden xl:flex items-center px-12 border-r border-blue-200" href="#">
        <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 15.4688H0V17.7207H18V15.4688Z" fill="white"></path>
          <path d="M11.0226 7.87402H0V10.126H11.0226V7.87402Z" fill="white"></path>
          <path d="M18 0.279297H0V2.53127H18V0.279297Z" fill="white"></path>
        </svg>
      </a>
      <div class="px-12 py-8 flex w-full items-center">
        <a class="flex-shrink-0 text-3xl font-bold font-heading text-white" href="#">
          <img class="h-9" src="yofte-assets/logos/yofte-logo-white.svg" alt="" width="auto">
        </a>
        <ul class="hidden lg:flex absolute top-10 left-1/2 transform -translate-y-1/2 -translate-x-1/2 mt-2 lg:items-center lg:w-auto">
          <li><a class="inline-block w-28 mr-3 py-2 text-center hover:text-white bg-white hover:bg-gray-900 rounded-full font-bold font-heading transition duration-200" href="#">Category</a></li>
          <li><a class="inline-block w-28 mr-3 py-2 text-center hover:text-white bg-white hover:bg-gray-900 rounded-full font-bold font-heading transition duration-200" href="#">Collection</a></li>
          <li><a class="inline-block w-28 mr-3 py-2 text-center hover:text-white bg-white hover:bg-gray-900 rounded-full font-bold font-heading transition duration-200" href="#">Story</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 Navigation (horizontal) Component Generator

Tailwind Component #4235

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100" x-data="{ price: 50, size: 36, color: 1, grid: 3, showContent: false }">
  <div class="container mx-auto px-4">
    <div class="flex flex-wrap -mx-4 mb-20 items-center justify-between">
      <div class="w-full lg:w-auto px-4 mb-12 xl:mb-0">
        <h2 class="text-5xl font-bold font-heading">
          <span>Found 125 results for</span>
          <a class="relative text-blue-300 underline" href="#">Sports</a>
        </h2>
      </div>
      <div class="w-full lg:w-auto px-4 flex flex-wrap items-center">
        <div class="w-full sm:w-auto mb-4 sm:mb-0 mr-5">
          <select class="pl-8 py-4 bg-white text-lg border border-gray-200 focus:ring-blue-300 focus:border-blue-300 rounded-md" name="" id="">
            <option value="1">Sort by newest</option>
            <option value="2">Sort by price</option>
            <option value="3">Sort by most popular</option>
          </select>
        </div>
        <a x-on:click.prevent="grid = 3" class="inline-block mr-3 h-full bg-white hover:bg-white p-4 rounded-md border group" :class="{ 'bg-white': grid == 3, 'text-gray-200': grid !== 3 }" href="#">
            <svg class="text-blue-300 group-hover:text-blue-300" :class="{ 'text-blue-300': grid==3 }" width="20" height="24" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" width="4" height="4" rx="2" fill="currentColor"></rect><rect y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" y="20" width="4" height="4" rx="2" fill="currentColor"></rect></svg>
        </a>
        <a x-on:click.prevent="grid = 4" class="inline-block h-full p-4 border hover:bg-white rounded-md group" :class="{ 'bg-white': grid == 4, 'text-gray-200': grid !== 4 }" href="#">
            <svg class="text-gray-200 group-hover:text-blue-300" :class="{ 'text-blue-300': grid==4 }" width="28" height="24" viewBox="0 0 28 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="24" width="4" height="4" rx="2" fill="currentColor"></rect><rect y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="24" y="10" width="4" height="4" rx="2" fill="currentColor"></rect><rect y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="8" y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="16" y="20" width="4" height="4" rx="2" fill="currentColor"></rect><rect x="24" y="20" width="4" height="4" rx="2" fill="currentColor"></rect></svg>
        </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

AI E-commerce (products) Component Generator

Tailwind Component #4236

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100 overflow-x-hidden" x-data="{ showContent: false }">
  <div class="container mx-auto px-4">
    <h2 class="mb-16 md:mb-24 text-4xl md:text-5xl font-bold font-heading">Discover our products</h2>
    <div class="max-w-4xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-24">
        <div class="w-full md:w-1/2 px-4 md:px-10 mb-20">
          <div class="relative h-full bg-gray-50">
            <span class="absolute top-0 left-0 ml-6 mt-6 px-2 py-1 text-xs font-bold font-heading bg-white border-2 border-red-500 rounded-full text-red-500">-10%</span>
            <a class="block" href="#">
              <img class="w-full h-64 object-cover" src="yofte-assets/images/placeholder-cream.png" alt="">
            </a>
            <div class="px-6 pb-8 mt-8">
              <a class="block px-6 mb-6" href="#">
                <h3 class="mb-2 text-xl font-bold font-heading">QUAI hand cream</h3>
                <p class="text-lg font-bold font-heading text-blue-500">
                  <span>$34.80</span>
                  <span class="text-xs text-gray-500 font-semibold font-heading line-through">$39.70</span>
                </p>
              </a>
              <div class="text-right"><a class="inline-block w-full md:w-auto py-4 px-8 md:mr-2 text-center bg-blue-300 hover:bg-blue-400 rounded-md text-white font-bold font-heading uppercase" href="#">Add to cart</a></div>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4 md:px-10 mb-20">

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

Tailwind CSS

Yofte

<section class="relative py-20 lg:py-40 bg-gray-100 overflow-x-hidden">
  <img class="absolute inset-0 w-full h-full" src="yofte-assets/elements/color-lines.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="text-center">
      <h2 class="mb-5 text-4xl md:text-5xl font-bold font-heading">Join Our Newsletter</h2>
      <p class="mb-6">Sign me up for Yofte newsletters to get exclusive perks.</p>
      <img class="mb-12 inline-block" src="yofte-assets/elements/quote-orange.svg" alt="">
      <div class="relative max-w-xl mx-auto bg-white rounded-lg">
        <img class="absolute top-0 right-0 h-40 -mt-12 -mr-20" src="yofte-assets/elements/quote-light.png" alt="">
        <div class="relative lg:max-w-xl lg:mx-auto bg-white rounded-lg">
          <div class="relative flex flex-wrap items-center justify-between">
            <div class="relative flex-1">
              <span class="absolute top-0 left-0 ml-8 mt-4 font-semibold font-heading text-xs text-gray-400">Drop your e-mail</span>
              <input class="inline-block w-full pt-8 pb-4 px-8 placeholder-gray-900 border-0 focus:ring-transparent focus:outline-none rounded-md" type="text" placeholder="steven@example.dev">
            </div>
            <a class="inline-block w-auto bg-blue-800 hover:bg-blue-900 text-white font-bold font-heading py-6 px-8 rounded-md uppercase text-center" href="#">Join</a>
          </div>
        </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

AI Newsletter Component Generator

Tailwind Component #4238

Tailwind CSS

Yofte

<section class="py-20 bg-gray-100 overflow-x-hidden">
  <div class="container px-4 mx-auto">
    <div class="px-4 py-20 sm:p-10 bg-cover bg-no-repeat" style="background-image: url('yofte-assets/images/placeholder-surfing.png');">
      <div class="h-96 ml-auto max-w-xl">
        <div class="relative">
          <div class="relative z-10 max-w-xl md:-ml-8 py-8 text-center bg-white">
            <h2 class="max-w-md mx-auto text-4xl sm:text-5xl font-bold font-heading">Check our new collection</h2>
          </div>
          <div class="absolute bottom-0 transform translate-y-1/2 -mb-6 md:mb-0 px-4 inset-x-0 pb-2 pt-2 md:pt-14 bg-blue-500 text-center">
            <h3 class="text-2xl sm:text-3xl text-white italic font-bold font-heading uppercase">Student Discount (10%)</h3>
          </div>
          <a class="absolute z-10 -bottom-1/2 right-0 transform translate-y-1/2 -mb-24 md:-mb-12 inline-block bg-orange-300 hover:bg-orange-400 text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" href="#">More</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

AI Call to action Component Generator

Tailwind Component #4239

Tailwind CSS

Yofte

<div class="fixed bottom-0 inset-x-0 z-50 p-8" x-data="{ open: true }" :class="{ 'hidden': !open }">
  <div class="container px-4 mx-auto">
    <div class="relative flex flex-wrap items-center pl-12 pr-8 py-6 bg-orange-300">
      <div class="absolute top-0 -mt-2 w-6 h-6 bg-orange-300 transform rotate-45"></div>
      <div class="max-w-4xl mb-6">
        <h5 class="mb-2 text-xl text-white font-bold font-heading">Cookies settings</h5>
        <p class="text-gray-50">By clicking Accept, you agree to the storing of cookies on your device to enhance site navigation. Etiam commodo ipsum et imperdiet imperdiet. Fusce pellentesque, lacus.</p>
      </div>
      <div>
        <a class="inline-flex mb-4 md:mb-0 mr-6 items-center text-white underline" href="#">
          <span class="mr-2">More</span>
          <svg width="27" height="15" viewBox="0 0 27 15" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M26.0871 7.41489L19.3999 14.102L18.564 13.2661L24.2439 7.58625L0.592385 7.59043L0.592385 6.41183L24.2439 6.40765L18.982 1.14571L19.8179 0.309822L26.0871 6.579C26.3179 6.80984 26.3179 7.18406 26.0871 7.41489Z" fill="white"></path>
          </svg>
        </a>
        <a x-on:click.prevent="open=false" class="inline-block bg-blue-900 hover:bg-blue-800 text-white font-bold font-heading py-4 px-8 rounded-md uppercase transition duration-200" 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

AI Cookies Component Generator

Tailwind Component #4240

Tailwind CSS

Yofte

<section class="py-20 bg-blue-800">
  <div class="container mx-auto px-4">
    <div class="text-center pb-20 border-b border-gray-500">
      <a class="inline-block mb-20 text-3xl font-bold font-heading text-white" href="#">
        <img class="h-9" src="yofte-assets/logos/yofte-logo-white.svg" alt="" width="auto">
      </a>
      <ul class="flex flex-wrap -mb-4 -mx-3 items-center justify-center">
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full border border-white hover:bg-white hover:text-blue-900 font-semibold font-heading text-white transition duration-200" href="#">Category</a></li>
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full border border-white hover:bg-white hover:text-blue-900 font-semibold font-heading text-white transition duration-200" href="#">Collection</a></li>
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full border border-white hover:bg-white hover:text-blue-900 font-semibold font-heading text-white transition duration-200" href="#">Story</a></li>
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full border border-white hover:bg-white hover:text-blue-900 font-semibold font-heading text-white transition duration-200" href="#">Brand</a></li>
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full border border-white hover:bg-white hover:text-blue-900 font-semibold font-heading text-white transition duration-200" href="#">Partners</a></li>
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full border border-white hover:bg-white hover:text-blue-900 font-semibold font-heading text-white transition duration-200" href="#">Videos</a></li>
        <li class="w-1/2 md:w-1/3 lg:w-auto px-3 mb-4"><a class="inline-block w-32 py-2 px-6 rounded-full border border-white hover:bg-white hover:text-blue-900 font-semibold font-heading text-white transition duration-200" href="#">Contact</a></li>
      </ul>
      <div class="flex mt-20 -mx-4 flex-wrap text-left">
        <div class="w-full lg:w-auto px-4 mb-10 lg:mb-0">
          <h3 class="mb-3 text-xl text-orange-300 font-bold font-heading">Contact Us</h3>
          <p class="text-2xl md:text-3xl text-white font-bold font-heading">+41 0087 44 431</p>
        </div>
        <div class="w-full lg:w-auto px-4 mb-10 lg:mb-0">
          <h3 class="mb-3 text-xl text-orange-300 font-bold font-heading">Email</h3>
          <p class="text-2xl md:text-3xl text-white font-bold font-heading">help@example.com</p>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers 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 #4221

Get the code for 13,400+ components

Tailwind Component #4222

Get the code for 13,400+ components

Tailwind Component #4223

Get the code for 13,400+ components

Tailwind Component #4224

Get the code for 13,400+ components

Tailwind Component #4225

Get the code for 13,400+ components

Tailwind Component #4226

Get the code for 13,400+ components

Tailwind Component #4227

Get the code for 13,400+ components

Tailwind Component #4228

Get the code for 13,400+ components

Tailwind Component #4229

Get the code for 13,400+ components

Tailwind Component #4230

Get the code for 13,400+ components

Tailwind Component #4231

Get the code for 13,400+ components

Tailwind Component #4232

Get the code for 13,400+ components

Tailwind Component #4233

Get the code for 13,400+ components

Tailwind Component #4234

Get the code for 13,400+ components

Tailwind Component #4235

Get the code for 13,400+ components

Tailwind Component #4236

Get the code for 13,400+ components

Tailwind Component #4237

Get the code for 13,400+ components

Tailwind Component #4238

Get the code for 13,400+ components

Tailwind Component #4239

Get the code for 13,400+ components

Tailwind Component #4240

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