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

Tailwind CSS

Shopal

<section>
  <div class="bg-green-500">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap h-16 py-4 items-center">
        <a class="inline-block text-sm text-black font-bold" href="#">Homepage</a>
        <span class="mx-2">
          <svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.052 4.418C4.228 4.418 5.25 3.424 5.25 2.234C5.25 1.044 4.256 0.0219998 3.052 0.0219998C1.848 0.0219998 0.826 1.03 0.826 2.234C0.826 3.424 1.848 4.418 3.052 4.418Z" fill="black"></path>
          </svg>
        </span>
        <a class="inline-block text-sm text-black font-bold" href="#">Catalogue</a>
        <span class="mx-2">
          <svg width="6" height="5" viewBox="0 0 6 5" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M3.052 4.418C4.228 4.418 5.25 3.424 5.25 2.234C5.25 1.044 4.256 0.0219998 3.052 0.0219998C1.848 0.0219998 0.826 1.03 0.826 2.234C0.826 3.424 1.848 4.418 3.052 4.418Z" fill="black"></path>
          </svg>
        </span>
        <a class="inline-block text-sm text-indigo-500 font-bold" href="#">Product</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 Breadcrumbs Component Generator

Tailwind Component #4422

Tailwind CSS

Shopal

<section class="py-12 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-xs md:max-w-xl xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center justify-between -mx-2 -mb-12">
        <div class="w-full md:w-1/2 xl:w-auto px-2 mb-12">
          <div class="flex items-center">
            <span class="inline-flex w-12 h-12 items-center justify-center rounded-full border-2 border-black shadow">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M21.5 15.5C21.78 15.5 22 15.72 22 16V17C22 18.66 20.66 20 19 20C19 18.35 17.65 17 16 17C14.35 17 13 18.35 13 20H11C11 18.35 9.65 17 8 17C6.35 17 5 18.35 5 20C3.34 20 2 18.66 2 17V15C2 14.45 2.45 14 3 14H12.5C13.88 14 15 12.88 15 11.5V6C15 5.45 15.45 5 16 5H16.84C17.56 5 18.22 5.39 18.58 6.01L19.22 7.13C19.31 7.29 19.19 7.5 19 7.5C17.62 7.5 16.5 8.62 16.5 10V13C16.5 14.38 17.62 15.5 19 15.5H21.5Z" fill="#EB742E"></path>
                <path d="M8 22C9.10457 22 10 21.1046 10 20C10 18.8954 9.10457 18 8 18C6.89543 18 6 18.8954 6 20C6 21.1046 6.89543 22 8 22Z" fill="#EB742E"></path>
                <path d="M16 22C17.1046 22 18 21.1046 18 20C18 18.8954 17.1046 18 16 18C14.8954 18 14 18.8954 14 20C14 21.1046 14.8954 22 16 22Z" fill="#EB742E"></path>
                <path d="M22 12.53V14H19C18.45 14 18 13.55 18 13V10C18 9.45 18.45 9 19 9H20.29L21.74 11.54C21.91 11.84 22 12.18 22 12.53Z" fill="#EB742E"></path>
                <path d="M13.08 2H5.69C3.65 2 2 3.65 2 5.69V12.07C2 12.62 2.45 13.07 3 13.07H12.15C13.17 13.07 14 12.24 14 11.22V2.92C14 2.41 13.59 2 13.08 2ZM10.07 7.07L7.98 9.09C7.83 9.23 7.64 9.3 7.46 9.3C7.27 9.3 7.08 9.23 6.94 9.09L5.93 8.13C5.63 7.84 5.62 7.36 5.91 7.06C6.19 6.76 6.67 6.76 6.97 7.04L7.46 7.51L9.03 5.99C9.33 5.7 9.8 5.71 10.09 6.01C10.38 6.31 10.37 6.78 10.07 7.07Z" fill="#EB742E"></path>
              </svg>
            </span>
            <div class="ml-4">
              <h4 class="text-xl font-black mb-1">Free Shipping</h4>
              <span class="text-lg font-bold">From $45</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 xl:w-auto px-2 mb-12">
          <div class="flex items-center">
            <span class="inline-flex w-12 h-12 items-center justify-center rounded-full border-2 border-black shadow">

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 Benefits Component Generator

Tailwind Component #4423

Tailwind CSS

Shopal

<section class="py-16 bg-green-500">
  <div class="container px-4 mx-auto">
    <div class="max-w-md lg:max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
          <a class="group block h-80 bg-blueGray-900 rounded-md relative" href="#">
            <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
              <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner-small1.png" alt="">
              <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 text-center w-full">
                <span class="block text-xs text-white font-black">Banner label</span>
                <h4 class="text-xl font-black text-white">Banner Hero</h4>
              </div>
            </div>
          </a>
        </div>
        <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
          <a class="group block h-80 bg-blueGray-900 rounded-md relative" href="#">
            <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
              <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner-small2.png" alt="">
              <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 text-center w-full">
                <span class="block text-xs text-white font-black">Banner label</span>
                <h4 class="text-xl font-black text-white">Banner Hero</h4>
              </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 Banners Component Generator

Tailwind Component #4424

Tailwind CSS

Shopal

<section class="relative py-12 overflow-hidden">
  <img class="hidden sm:block absolute top-0 left-0 h-full -ml-32 lg:-ml-20 xl:-ml-0 img-fluid" src="shopal-assets/background/green-small-lines.svg" alt="">
  <img class="hidden sm:block absolute top-0 right-0 -mr-32 lg:-mr-20 xl:-mr-0 h-full img-fluid" src="shopal-assets/background/orange-small-wave.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-4xl 2xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="sm:max-w-sm 2xl:max-w-none mx-auto">
            <h3 class="text-3xl md:text-4xl font-black">Sign-up for our Newsletter</h3>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="sm:max-w-sm 2xl:max-w-none mx-auto">
            <div class="flex flex-wrap items-center justify-center -mx-3">
              <div class="w-full lg:w-2/3 px-3 mb-3 lg:mb-0">
                <input class="h-full w-full px-5 py-3 placeholder-black text-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="Search now...">
              </div>
              <div class="w-full lg:w-1/3 px-3">
                <a class="group relative inline-block h-12 w-full lg:w-32 -mb-2 bg-blueGray-900 rounded-md" href="#">
                  <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-500">
                    <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                      <span class="text-base font-black text-black">Subscribe</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 Newsletter Component Generator

Tailwind Component #4425

Tailwind CSS

Shopal

<section class="py-16 bg-white">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-12">
        <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
          <div class="max-w-xl mx-auto xl:mx-0">
            <h2 class="font-heading text-4xl font-black mb-8">Lorem ipsum dolor sit amet consectetur</h2>
            <p class="max-w-md text-lg font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          </div>
        </div>
        <div class="w-full xl:w-1/2 px-4">
          <div class="pl-20 relative">
            <img class="absolute top-0 left-0 transform img-fluid w-12 md:w-auto" src="shopal-assets/background/circle-orange-green-part.svg" alt="">
            <img class="img-fluid w-full h-67 border-2 border-black rounded-md shadow" src="shopal-assets/images/benefit-table-work.png" alt="">
          </div>
        </div>
      </div>
      <div class="px-6 bg-white border-2 border-black rounded-md shadow">
        <div class="flex flex-wrap items-center justify-between -mx-3">
          <div class="w-full md:w-1/2 xl:w-auto px-3">
            <div class="flex py-5 items-center">
              <span class="inline-block mr-3">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M28.6667 20.6667C29.04 20.6667 29.3333 20.9601 29.3333 21.3334V22.6667C29.3333 24.8801 27.5467 26.6667 25.3333 26.6667C25.3333 24.4667 23.5333 22.6667 21.3333 22.6667C19.1333 22.6667 17.3333 24.4667 17.3333 26.6667H14.6667C14.6667 24.4667 12.8667 22.6667 10.6667 22.6667C8.46667 22.6667 6.66667 24.4667 6.66667 26.6667C4.45333 26.6667 2.66667 24.8801 2.66667 22.6667V20.0001C2.66667 19.2667 3.26667 18.6667 4 18.6667H16.6667C18.5067 18.6667 20 17.1734 20 15.3334V8.00008C20 7.26675 20.6 6.66675 21.3333 6.66675H22.4533C23.4133 6.66675 24.2933 7.18675 24.7733 8.01342L25.6267 9.50675C25.7467 9.72008 25.5867 10.0001 25.3333 10.0001C23.4933 10.0001 22 11.4934 22 13.3334V17.3334C22 19.1734 23.4933 20.6667 25.3333 20.6667H28.6667Z" fill="#474BC5"></path>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Benefits Component Generator

Tailwind Component #4426

Tailwind CSS

Shopal

<section class="pt-14 pb-16">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="pb-14 mb-14 border-b-2 border-black">
        <div class="flex flex-wrap items-center justify-between -mx-2 -mb-12">
          <div class="w-full md:w-1/2 xl:w-auto px-2 mb-12">
            <div class="flex items-center">
              <span class="inline-flex w-12 h-12 items-center justify-center rounded-full border-2 border-black shadow">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21.5 15.5C21.78 15.5 22 15.72 22 16V17C22 18.66 20.66 20 19 20C19 18.35 17.65 17 16 17C14.35 17 13 18.35 13 20H11C11 18.35 9.65 17 8 17C6.35 17 5 18.35 5 20C3.34 20 2 18.66 2 17V15C2 14.45 2.45 14 3 14H12.5C13.88 14 15 12.88 15 11.5V6C15 5.45 15.45 5 16 5H16.84C17.56 5 18.22 5.39 18.58 6.01L19.22 7.13C19.31 7.29 19.19 7.5 19 7.5C17.62 7.5 16.5 8.62 16.5 10V13C16.5 14.38 17.62 15.5 19 15.5H21.5Z" fill="#474BC5"></path>
                  <path d="M8 22C9.10457 22 10 21.1046 10 20C10 18.8954 9.10457 18 8 18C6.89543 18 6 18.8954 6 20C6 21.1046 6.89543 22 8 22Z" fill="#474BC5"></path>
                  <path d="M16 22C17.1046 22 18 21.1046 18 20C18 18.8954 17.1046 18 16 18C14.8954 18 14 18.8954 14 20C14 21.1046 14.8954 22 16 22Z" fill="#474BC5"></path>
                  <path d="M22 12.53V14H19C18.45 14 18 13.55 18 13V10C18 9.45 18.45 9 19 9H20.29L21.74 11.54C21.91 11.84 22 12.18 22 12.53Z" fill="#474BC5"></path>
                  <path d="M13.08 2H5.69C3.65 2 2 3.65 2 5.69V12.07C2 12.62 2.45 13.07 3 13.07H12.15C13.17 13.07 14 12.24 14 11.22V2.92C14 2.41 13.59 2 13.08 2ZM10.07 7.07L7.98 9.09C7.83 9.23 7.64 9.3 7.46 9.3C7.27 9.3 7.08 9.23 6.94 9.09L5.93 8.13C5.63 7.84 5.62 7.36 5.91 7.06C6.19 6.76 6.67 6.76 6.97 7.04L7.46 7.51L9.03 5.99C9.33 5.7 9.8 5.71 10.09 6.01C10.38 6.31 10.37 6.78 10.07 7.07Z" fill="#474BC5"></path>
                </svg>
              </span>
              <div class="ml-4">
                <h4 class="text-base sm:text-xl font-black mb-1">Free Shipping</h4>
                <span class="text-base sm:text-lg font-bold">From $45</span>
              </div>
            </div>
          </div>
          <div class="w-full md:w-1/2 xl:w-auto px-2 mb-12">
            <div class="flex items-center">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Footers Component Generator

Tailwind Component #4427

Tailwind CSS

Shopal

<section class="py-14 bg-white" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <h1 class="font-heading text-4xl font-black">Our products</h1>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 px-4 mb-8">
        <a class="group block h-80 lg:h-112 relative bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 h-full left-0 w-full border-2 border-black rounded-md transform -translate-x-1 -translate-y-1 group-hover:-translate-x-0 group-hover:-translate-y-0 overflow-hidden transition duration-300">
            <span class="absolute top-0 left-0 m-6 inline-flex h-8 px-1 mb-3 items-center justify-center text-sm font-black uppercase bg-orange-500 border border-black rounded-md shadow-sm">Label</span>
            <img class="img-fluid w-full h-118 object-cover" src="shopal-assets/products/product-square1.png" alt="">
            <div class="absolute bottom-0 left-0 w-full p-6">
              <h3 class="text-2xl text-white font-black mb-1">Product title</h3>
              <span class="text-green-500 font-black">$45.99</span>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full md:w-1/2 px-4 mb-8">
        <a class="group block h-80 lg:h-112 relative bg-blueGray-900 rounded-md" href="#">
          <div class="absolute top-0 h-full left-0 w-full border-2 border-black rounded-md transform -translate-x-1 -translate-y-1 group-hover:-translate-x-0 group-hover:-translate-y-0 overflow-hidden transition duration-300">
            <span class="absolute top-0 left-0 m-6 inline-flex h-8 px-1 mb-3 items-center justify-center text-sm font-black uppercase bg-orange-500 border border-black rounded-md shadow-sm">Label</span>
            <img class="img-fluid w-full h-118 object-cover" src="shopal-assets/products/product-square2.png" alt="">
            <div class="absolute bottom-0 left-0 w-full p-6">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI E-commerce (products) Component Generator

Tailwind Component #4428

Tailwind CSS

Shopal

<section class="relative py-12 bg-green-500 overflow-hidden">
  <img class="hidden sm:block absolute top-0 left-0 h-full -ml-32 lg:-ml-20 xl:-ml-0 img-fluid" src="shopal-assets/background/blue-small-lines.svg" alt="">
  <img class="hidden sm:block absolute top-0 right-0 -mr-32 lg:-mr-20 xl:-mr-0 h-full img-fluid" src="shopal-assets/background/orange-small-wave.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-4xl 2xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="sm:max-w-sm 2xl:max-w-none mx-auto">
            <h3 class="text-3xl md:text-4xl font-black">Sign-up for our Newsletter</h3>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="sm:max-w-sm 2xl:max-w-none mx-auto">
            <div class="flex flex-wrap items-center justify-center -mx-3">
              <div class="w-full lg:w-2/3 px-3 mb-3 lg:mb-0">
                <input class="h-full w-full px-5 py-3 placeholder-black text-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="Search now...">
              </div>
              <div class="w-full lg:w-1/3 px-3">
                <a class="group relative inline-block h-12 w-full lg:w-32 -mb-2 bg-blueGray-900 rounded-md" href="#">
                  <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                    <div class="flex h-full w-full items-center justify-center bg-indigo-500 border-2 border-black rounded-md">
                      <span class="text-base font-black text-white">Subscribe</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 Newsletter Component Generator

Tailwind Component #4429

Tailwind CSS

Shopal

<section class="py-16">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="max-w-2xl mx-auto mb-16 text-center">
        <span class="inline-block mb-5 text-sm font-black text-indigo-500">Lorem ipsum</span>
        <h2 class="text-3xl sm:text-4xl font-black mb-8">Lorem ipsum dolor sit amet consectutar domor at elis</h2>
        <p class="text-lg font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
      </div>
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="max-w-md mx-auto h-full p-8 bg-black border-2 border-black rounded-md shadow">
            <p class="text-lg font-bold text-white mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim quam ultricies, placerat tellus sed, laoreet orci. Duis luctus quam ac metus gravida sodales. Sed a ex accumsan, pellentesque sem eget, scelerisque dolor.</p>
            <div>
              <img class="w-12 h-12 mb-3 rounded-full border-2 border-black shadow img-fluid" src="shopal-assets/images/avatar-men.png" alt="">
              <h5 class="text-xl font-black text-white mb-1">Danny Bailey</h5>
              <span class="font-bold text-white">CEO &amp; Founder</span>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2 lg:w-1/3 px-4 mb-8">
          <div class="max-w-md mx-auto h-full p-8 bg-black border-2 border-black rounded-md shadow">
            <p class="text-lg font-bold text-white mb-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim quam ultricies, placerat tellus sed, laoreet orci. Duis luctus quam ac metus gravida sodales. Sed a ex accumsan, pellentesque sem eget, scelerisque dolor.</p>
            <div>
              <img class="w-12 h-12 mb-3 rounded-full border-2 border-black shadow img-fluid" src="shopal-assets/images/avatar-men.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 Reviews Component Generator

Tailwind Component #4430

Tailwind CSS

Shopal

<section class="py-6 bg-white">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <a class="max-w-md mx-auto group block h-112 bg-blueGray-900 rounded-md relative" href="#">
          <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
            <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner-small1.png" alt="">
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 text-center w-full">
              <span class="block text-xs text-white font-black">Banner label</span>
              <h4 class="text-xl font-black text-white">Banner Hero</h4>
            </div>
          </div>
        </a>
      </div>
      <div class="w-full lg:w-1/3 px-4 mb-8 lg:mb-0">
        <a class="max-w-md mx-auto group block h-112 bg-blueGray-900 rounded-md relative" href="#">
          <div class="h-full w-full transform -translate-x-1 -translate-y-1 hover:-translate-x-0 hover:-translate-y-0 rounded-md border-2 border-black overflow-hidden transition duration-300">
            <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner-small2.png" alt="">
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 p-6 text-center w-full">
              <span class="block text-xs text-white font-black">Banner label</span>
              <h4 class="text-xl font-black text-white">Banner Hero</h4>
            </div>
          </div>
        </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 Banners Component Generator

Tailwind Component #4431

Tailwind CSS

Shopal

<section>
  <div class="bg-white">
    <div class="container px-4 mx-auto">
      <div class="flex py-5 items-center">
        <div class="bg-blueGray-900 rounded-md">
          <div class="flex transform -translate-x-1 -translate-y-1 bg-white border-2 border-black rounded-md overflow-hidden">
            <a class="inline-flex items-center -mr-2 xs:-mr-5 pl-4 z-10" href="#">
              <span class="inline-block mr-3 text-xs xs:text-sm text-black font-bold">Homepage</span>
              <svg width="24" height="44" viewBox="0 0 24 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L22 22L1 43" stroke="black" fill="white" stroke-width="2"></path>
              </svg>
            </a>
            <a class="inline-flex items-center pl-4 xs:pl-8 -mr-5 z-10" href="#">
              <span class="inline-block mr-2 text-xs xs:text-sm text-black font-bold">Catalogue</span>
              <svg width="24" height="44" viewBox="0 0 24 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1 1L22 22L1 43" stroke="black" fill="white" stroke-width="2"></path>
              </svg>
            </a>
            <a class="inline-flex items-center pl-8 pr-3 bg-green-500" href="#">
              <span class="inline-block mr-3 text-xs xs:text-sm text-indigo-500 font-bold">Product</span>
            </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 Breadcrumbs Component Generator

Tailwind Component #4432

Tailwind CSS

Shopal

<section class="py-16 bg-green-500">
  <div class="container px-4 mx-auto">
    <h4 class="text-lg font-black mb-6 text-center">Trusted by brands all over the world</h4>
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4 -mb-8">
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-8">
          <div class="flex items-center justify-center px-6 h-36 bg-white border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/slack-logo.svg" alt="">
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-8">
          <div class="flex items-center justify-center px-6 h-36 bg-white border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/dropbox-logo.svg" alt="">
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-8">
          <div class="flex items-center justify-center px-6 h-36 bg-white border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/spotify-logo.svg" alt="">
          </div>
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-8">
          <div class="flex items-center justify-center px-6 h-36 bg-white border-2 border-black shadow rounded-md">
            <img class="img-fluid" src="shopal-assets/logos/amazon-logo.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 Logo clouds Component Generator

Tailwind Component #4433

Tailwind CSS

Shopal

<section class="py-16 bg-white">
  <div class="container px-4 mx-auto mb-10">
    <div class="max-w-xl xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-12">
        <div class="w-full xl:w-1/2 px-4 mb-16 xl:mb-0">
          <div class="sm:pl-20 xl:pl-0 max-w-xl">
            <h2 class="font-heading text-4xl font-black mb-8">Lorem ipsum dolor sit amet consectetur</h2>
            <p class="max-w-md text-lg font-bold">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
          </div>
        </div>
        <div class="w-full xl:w-1/2 px-4">
          <div class="pl-20 max-w-lg xl:max-w-none relative">
            <img class="absolute top-0 left-0 transform img-fluid w-12 md:w-auto" src="shopal-assets/background/circle-orange-green-part.svg" alt="">
            <img class="img-fluid w-full h-67 border-2 border-black rounded-md shadow" src="shopal-assets/images/benefit-table-work.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="pt-10 border-t-2 border-black">
    <div class="container px-4 mx-auto">
      <div class="max-w-xs md:max-w-xl xl:max-w-7xl mx-auto">
        <div class="flex flex-wrap items-center -mx-2 -mb-12">
          <div class="w-full md:w-1/2 xl:w-1/4 px-2 mb-12">

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 Benefits Component Generator

Tailwind Component #4434

Tailwind CSS

Shopal

<section class="py-14 bg-white" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <h1 class="font-heading text-4xl font-black">Our products</h1>
    </div>
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4 mb-8">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="flex flex-wrap -mx-4 -mb-8">
            <div class="w-full sm:w-1/2 px-4 mb-8">
              <a class="group block h-72 relative bg-blueGray-900 rounded-md" href="#">
                <div class="absolute top-0 h-full left-0 w-full border-2 border-black rounded-md transform -translate-x-1 -translate-y-1 group-hover:-translate-x-0 group-hover:-translate-y-0 overflow-hidden transition duration-300">
                  <span class="absolute top-0 left-0 m-5 inline-flex h-8 px-1 items-center justify-center text-sm font-black uppercase bg-orange-500 border border-black rounded-md shadow-sm">Label</span>
                  <img class="img-fluid w-full h-full object-cover" src="shopal-assets/products/product-gradient-shadow1.png" alt="">
                  <div class="absolute bottom-0 left-0 mb-8 w-full text-center">
                    <h3 class="text-white font-black mb-1">Product title</h3>
                    <span class="text-sm text-green-500 font-black">$45.99</span>
                  </div>
                </div>
              </a>
            </div>
            <div class="w-full sm:w-1/2 px-4 mb-8">
              <a class="group block h-72 relative bg-blueGray-900 rounded-md" href="#">
                <div class="absolute top-0 h-full left-0 w-full border-2 border-black rounded-md transform -translate-x-1 -translate-y-1 group-hover:-translate-x-0 group-hover:-translate-y-0 overflow-hidden transition duration-300">

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

Tailwind CSS

Shopal

<section class="pt-16 pb-14" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center justify-between -mx-4">
        <div class="hidden lg:block w-auto px-4">
          <button x-on:click="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="group flex items-center justify-center transform -translate-y-1 -translate-x-1 transition duration-500 h-16 w-16 rounded-full bg-gray-900">
            <div class="inline-flex z-10 items-center justify-center absolute top-0 left-0 h-16 w-16 transform -translate-y-1 -translate-x-1 group-hover:-translate-y-0 group-hover:-translate-x-0 bg-indigo-500 rounded-full transition-all duration-300">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10 0C4.48 0 0 4.48 0 10C0 15.52 4.48 20 10 20C15.52 20 20 15.52 20 10C20 4.48 15.52 0 10 0ZM13.5 10.75H8.31L10.03 12.47C10.32 12.76 10.32 13.24 10.03 13.53C9.88 13.68 9.69 13.75 9.5 13.75C9.31 13.75 9.12 13.68 8.97 13.53L5.97 10.53C5.68 10.24 5.68 9.76 5.97 9.47L8.97 6.47C9.26 6.18 9.74 6.18 10.03 6.47C10.32 6.76 10.32 7.24 10.03 7.53L8.31 9.25H13.5C13.91 9.25 14.25 9.59 14.25 10C14.25 10.41 13.91 10.75 13.5 10.75Z" fill="white"></path>
              </svg>
            </div>
          </button>
        </div>
        <div class="w-full lg:w-2/3 px-4">
          <div class="max-w-3xl mx-auto">
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out -m-3">
                    <div x-ref="slide1" class="flex-shrink-0 w-full p-3">
                        <div class="flex flex-wrap items-center justify-between -mx-4">
                          <div class="w-full md:w-1/3 px-4 mb-8 md:mb-0">
                            <div class="max-w-md mx-auto lg:mx-0">
                              <img class="w-16 h-16 mb-6 rounded-full border-2 border-black shadow img-fluid" src="shopal-assets/images/avatar-men.png" alt="">
                              <h5 class="text-xl font-black mb-1">Danny Bailey</h5>
                              <span class="font-bold">CEO &amp; Founder</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 Reviews Component Generator

Tailwind Component #4436

Tailwind CSS

Shopal

<section>
  <div class="h-20 py-4 bg-white">
    <div class="container px-4 mx-auto">
      <div class="inline-block bg-blueGray-900 rounded-md">
        <div class="inline-flex items-center px-4 py-2 transform -translate-x-1 -translate-y-1 bg-white border-2 border-black rounded-md overflow-hidden">
          <div class="hidden sm:block w-full xs:w-auto mb-2 xs:mb-0 xs:mr-2">
            <div class="flex h-6 w-6 items-center justify-center bg-green-500 border-2 border-black rounded-md shadow-sm">
              <svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M10.02 2.40997L7.14 0.394969C6.355 -0.155031 5.15 -0.125031 4.395 0.459969L1.89 2.41497C1.39 2.80497 0.994995 3.60497 0.994995 4.23497V7.68497C0.994995 8.95997 2.03 9.99997 3.305 9.99997H8.69499C9.96999 9.99997 11.005 8.96497 11.005 7.68997V4.29997C11.005 3.62497 10.57 2.79497 10.02 2.40997ZM6.375 7.99997C6.375 8.20497 6.205 8.37497 6 8.37497C5.795 8.37497 5.625 8.20497 5.625 7.99997V6.49997C5.625 6.29497 5.795 6.12497 6 6.12497C6.205 6.12497 6.375 6.29497 6.375 6.49997V7.99997Z" fill="black"></path>
              </svg>
            </div>
          </div>
          <a class="inline-block text-sm text-black font-bold" href="#">Homepage</a>
          <span class="mx-3">
            <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.453338 1.05338L0.453338 5.20671L0.453339 8.94671C0.453339 9.58671 1.22667 9.90671 1.68001 9.45338L5.13334 6.00005C5.68667 5.44671 5.68667 4.54671 5.13334 3.99338L3.82 2.68005L1.68001 0.540046C1.22667 0.093379 0.453338 0.41338 0.453338 1.05338Z" fill="black"></path>
            </svg>
          </span>
          <a class="inline-block text-sm text-black font-bold" href="#">Catalogue</a>
          <span class="mx-3">
            <svg width="6" height="10" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M0.453338 1.05338L0.453338 5.20671L0.453339 8.94671C0.453339 9.58671 1.22667 9.90671 1.68001 9.45338L5.13334 6.00005C5.68667 5.44671 5.68667 4.54671 5.13334 3.99338L3.82 2.68005L1.68001 0.540046C1.22667 0.093379 0.453338 0.41338 0.453338 1.05338Z" fill="black"></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 Breadcrumbs Component Generator

Tailwind Component #4437

Tailwind CSS

Shopal

<section class="pt-16 pb-24 bg-indigo-500">
  <div class="container px-4 mx-auto">
    <h4 class="text-lg font-black text-green-500 mb-20 text-center">Trusted by brands all over the world</h4>
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4 -mb-18">
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/slack-green.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/dropbox-green.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/spotify-green.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/amazon-green.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/netflix-green.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/3 xl:w-1/6 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/stripe-green.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 #4438

Tailwind CSS

Shopal

<section class="py-6 bg-green-500">
  <div class="container px-4 mx-auto">
    <div class="max-w-md lg:max-w-none mx-auto border-2 border-black rounded-md shadow overflow-hidden">
      <div class="flex flex-wrap items-center">
        <div class="w-full lg:w-1/3 border-b-2 lg:border-b-0 border-r-2 border-black">
          <a class="group block h-full relative" href="#">
            <div class="absolute top-0 left-0 w-full h-full group-hover:bg-black group-hover:bg-opacity-40 transition duration-500"></div>
            <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner-small1.png" alt="">
            <div class="absolute bottom-0 left-0 p-8 w-full">
              <span class="block text-xs text-white font-black">Banner label</span>
              <h4 class="text-xl font-black text-white">Banner Hero</h4>
            </div>
          </a>
        </div>
        <div class="w-full lg:w-1/3 border-b-2 lg:border-b-0 border-r-2 border-black">
          <a class="group block h-full relative" href="#">
            <div class="absolute top-0 left-0 w-full h-full group-hover:bg-black group-hover:bg-opacity-40 transition duration-500"></div>
            <img class="img-fluid w-full h-full object-cover" src="shopal-assets/images/banner-small2.png" alt="">
            <div class="absolute bottom-0 left-0 p-8 w-full">
              <span class="block text-xs text-white font-black">Banner label</span>
              <h4 class="text-xl font-black text-white">Banner Hero</h4>
            </div>
          </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 Banners Component Generator

Tailwind Component #4439

Tailwind CSS

Shopal

<section class="relative py-12 bg-indigo-500 overflow-hidden">
  <img class="hidden sm:block absolute top-0 left-0 h-full -ml-32 lg:-ml-20 xl:-ml-0 img-fluid" src="shopal-assets/background/green-small-lines.svg" alt="">
  <img class="hidden sm:block absolute top-0 right-0 -mr-32 lg:-mr-20 xl:-mr-0 h-full img-fluid" src="shopal-assets/background/orange-small-wave.svg" alt="">
  <div class="relative container px-4 mx-auto">
    <div class="max-w-4xl 2xl:max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-8 lg:mb-0">
          <div class="sm:max-w-sm 2xl:max-w-none mx-auto">
            <h3 class="text-3xl md:text-4xl font-black text-white">Sign-up for our Newsletter</h3>
          </div>
        </div>
        <div class="w-full lg:w-1/2 px-4">
          <div class="sm:max-w-sm 2xl:max-w-none mx-auto">
            <div class="flex flex-wrap items-center justify-center -mx-3">
              <div class="w-full lg:w-2/3 px-3 mb-3 lg:mb-0">
                <input class="h-full w-full px-5 py-3 placeholder-black text-black font-bold border-2 border-black rounded-md focus:outline-green" type="text" placeholder="Search now...">
              </div>
              <div class="w-full lg:w-1/3 px-3">
                <a class="group relative inline-block h-12 w-full lg:w-32 -mb-2 bg-blueGray-900 rounded-md" href="#">
                  <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                    <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                      <span class="text-base font-black text-black">Subscribe</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 Newsletter Component Generator

Tailwind Component #4440

Tailwind CSS

Shopal

<section class="py-14 bg-orange-500" x-data="{ showContent: false }">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <h1 class="font-heading text-4xl font-black">Our products</h1>
    </div>
    <div class="flex flex-wrap -mx-4 -mb-8">
      <div class="w-full md:w-1/2 px-4 mb-8">
        <div class="relative">
          <div class="block relative border-2 border-black rounded-md shadow overflow-hidden transition-shadow duration-300">
            <span class="absolute top-0 left-0 m-5 inline-flex h-8 px-1 items-center justify-center text-sm text-white font-black uppercase bg-indigo-500 border border-black rounded-md shadow-sm">Label</span>
            <img class="img-fluid w-full h-118 object-cover" src="shopal-assets/products/product-square1.png" alt="">
            <a class="absolute bottom-0 left-0 p-6 mb-16 xs:mb-0 w-full text-white font-black" href="#">
              <h3 class="text-2xl mb-1">Product title</h3>
              <span class="text-green-500">$45.99</span>
            </a>
          </div>
          <div class="absolute bottom-0 right-0 mb-8 mr-6">
            <a class="group relative inline-block h-12 max-w-sm w-30 bg-blueGray-900 rounded-md" href="#">
              <div class="absolute top-0 left-0 transform -translate-y-1 -translate-x-1 w-full h-full group-hover:translate-y-0 group-hover:translate-x-0 transition duration-300">
                <div class="flex h-full w-full items-center justify-center bg-green-600 border-2 border-black rounded-md">
                  <span class="text-base font-black text-black">Buy Now</span>
                </div>
              </div>
            </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 E-commerce (products) 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 #4421

Get the code for 13,400+ components

Tailwind Component #4422

Get the code for 13,400+ components

Tailwind Component #4423

Get the code for 13,400+ components

Tailwind Component #4424

Get the code for 13,400+ components

Tailwind Component #4425

Get the code for 13,400+ components

Tailwind Component #4426

Get the code for 13,400+ components

Tailwind Component #4427

Get the code for 13,400+ components

Tailwind Component #4428

Get the code for 13,400+ components

Tailwind Component #4429

Get the code for 13,400+ components

Tailwind Component #4430

Get the code for 13,400+ components

Tailwind Component #4431

Get the code for 13,400+ components

Tailwind Component #4432

Get the code for 13,400+ components

Tailwind Component #4433

Get the code for 13,400+ components

Tailwind Component #4434

Get the code for 13,400+ components

Tailwind Component #4435

Get the code for 13,400+ components

Tailwind Component #4436

Get the code for 13,400+ components

Tailwind Component #4437

Get the code for 13,400+ components

Tailwind Component #4438

Get the code for 13,400+ components

Tailwind Component #4439

Get the code for 13,400+ components

Tailwind Component #4440

Get the code for 13,400+ components

The easiest way to create beautiful websites

monthly

annual

lifetime

monthly

annual

Create an account

From idea to beautiful design in minutes.

Products

Extensions

UI Components

Company

Support