Tailwind CSS Components

<section class="py-20" x-data="{ size: '' }" x-init="size = $refs.size1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/2 px-4 mb-14 lg:mb-0">
          <div>
            <div class="h-80 lg:h-135 bg-gray-900 mb-8 rounded-md">
              <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 border-2 border-black rounded-md object-cover" src="shopal-assets/product-details/product-detail-large.png" alt="">
            </div>
            <div class="flex flex-wrap -mx-4 mb-8">
              <div class="w-full xs:w-1/2 px-4 mb-8 xs:mb-0">
                <div class="h-64 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 border-2 border-black rounded-md object-cover" src="shopal-assets/product-details/product-detail-small1.png" alt="">
                </div>
              </div>
              <div class="w-full xs:w-1/2 px-4">
                <div class="h-64 bg-blueGray-900 rounded-md">
                  <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 border-2 border-black rounded-md object-cover" src="shopal-assets/product-details/product-detail-small2.png" alt="">
                </div>
              </div>
            </div>
            <div class="h-80 lg:h-135 bg-blueGray-900 rounded-md">
              <img class="img-fluid w-full h-full transform -translate-x-1 -translate-y-1 border-2 border-black rounded-md object-cover" src="shopal-assets/product-details/product-detail-large2.png" 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

Tailwind Component #4322

<section class="py-6 bg-indigo-500">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="bg-white border-2 border-black rounded-md shadow">
        <div class="flex flex-wrap items-center">
          <div class="w-full sm:w-1/2 lg:w-1/4 border-b-2 lg:border-b-0 sm:border-r-2 border-black">
            <div class="px-4 py-12 text-center">
              <span class="inline-block mb-2">
                <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.46666 22.6667 6.66666 24.4667 6.66666 26.6667C4.45333 26.6667 2.66666 24.8801 2.66666 22.6667V20.0001C2.66666 19.2667 3.26666 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="#C6FF53"></path>
                  <path d="M10.6667 29.3333C12.1394 29.3333 13.3333 28.1394 13.3333 26.6667C13.3333 25.1939 12.1394 24 10.6667 24C9.19391 24 8 25.1939 8 26.6667C8 28.1394 9.19391 29.3333 10.6667 29.3333Z" fill="#C6FF53"></path>
                  <path d="M21.3333 29.3333C22.8061 29.3333 24 28.1394 24 26.6667C24 25.1939 22.8061 24 21.3333 24C19.8606 24 18.6667 25.1939 18.6667 26.6667C18.6667 28.1394 19.8606 29.3333 21.3333 29.3333Z" fill="#C6FF53"></path>
                  <path d="M29.3333 16.7067V18.6667H25.3333C24.6 18.6667 24 18.0667 24 17.3333V13.3333C24 12.6 24.6 12 25.3333 12H27.0533L28.9867 15.3867C29.2133 15.7867 29.3333 16.24 29.3333 16.7067Z" fill="#C6FF53"></path>
                  <path d="M17.44 2.66675H7.58666C4.86666 2.66675 2.66666 4.86675 2.66666 7.58675V16.0934C2.66666 16.8267 3.26666 17.4267 4 17.4267H16.2C17.56 17.4267 18.6667 16.3201 18.6667 14.9601V3.89341C18.6667 3.21341 18.12 2.66675 17.44 2.66675ZM13.4267 9.42675L10.64 12.1201C10.44 12.3067 10.1867 12.4001 9.94666 12.4001C9.69333 12.4001 9.44 12.3067 9.25333 12.1201L7.90666 10.8401C7.50666 10.4534 7.49333 9.81341 7.88 9.41341C8.25333 9.01341 8.89333 9.01341 9.29333 9.38675L9.94666 10.0134L12.04 7.98675C12.44 7.60008 13.0667 7.61341 13.4533 8.01341C13.84 8.41341 13.8267 9.04008 13.4267 9.42675Z" fill="#C6FF53"></path>
                </svg>
              </span>
              <h4 class="font-bold">Free Standard Shipping</h4>
            </div>
          </div>
          <div class="w-full sm:w-1/2 lg:w-1/4 border-b-2 lg:border-b-0 lg:border-r-2 border-black">
            <div class="px-4 py-12 text-center">
              <span class="inline-block mb-2">
                <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M25 10.6667V13.4667C24.4133 13.3867 23.7467 13.3467 23 13.3334V10.6667C23 6.46675 21.8133 3.66675 16 3.66675C10.1867 3.66675 9 6.46675 9 10.6667V13.3334C8.25333 13.3467 7.58667 13.3867 7 13.4667V10.6667C7 6.80008 7.93333 1.66675 16 1.66675C24.0667 1.66675 25 6.80008 25 10.6667Z" fill="#C6FF53"></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 #4323

<section class="pt-20 pb-16 bg-gray-900">
  <div class="container mx-auto px-4 mb-12 md:mb-20">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
          <a class="inline-block mb-16" href="#">
            <img class="h-7" src="shopal-assets/logos/shopal-logo-white.svg" alt="" width="auto">
          </a>
          <div class="flex flex-col mb-8"><a class="inline-block text-sm font-bold text-white hover:underline mb-3" href="#">Call us at: 1-888-699-8900</a><a class="inline-block text-sm font-bold text-white hover:underline" href="mailto:contact@shopal.com">Email: contact@shopal.com</a></div>
          <div>
            <a class="inline-block text-green-500 hover:text-indigo-500 mr-6" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7272V12.766H16.3583L16.7669 9.66243H13.6349V7.68126C13.6349 6.78299 13.8882 6.17083 15.203 6.17083L16.8771 6.17015V3.39421C16.5876 3.35731 15.5938 3.27271 14.4371 3.27271C12.0217 3.27271 10.3681 4.71878 10.3681 7.37389V9.66243H7.63647V12.766H10.3681V20.7272H13.6349Z" fill="currentColor"></path>
                <mask id="mask0_601_10113" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7272V12.766H16.3583L16.7669 9.66243H13.6349V7.68126C13.6349 6.78299 13.8882 6.17083 15.203 6.17083L16.8771 6.17015V3.39421C16.5876 3.35731 15.5938 3.27271 14.4371 3.27271C12.0217 3.27271 10.3681 4.71878 10.3681 7.37389V9.66243H7.63647V12.766H10.3681V20.7272H13.6349Z" fill="white"></path>
                </mask>
              </svg>
            </a>
            <a class="inline-block text-green-500 hover:text-indigo-500 mr-6" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="currentColor"></path>
                <mask id="mask0_601_10114" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="white"></path>
                </mask>

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

<div x-data="{ mobileNavOpen: false }">
  <nav>
    <div class="flex h-12 py-2 px-6 items-center justify-between bg-black">
      <div class="w-auto">
        <a class="inline-flex items-center text-green-500 hover:text-white" href="#">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M7.36665 9.96668L6.13331 11.2C5.87331 11.46 5.45998 11.46 5.19331 11.2067C5.11998 11.1333 5.04665 11.0667 4.97331 10.9933C4.28665 10.3 3.66665 9.57334 3.11331 8.81334C2.56665 8.05334 2.12665 7.29334 1.80665 6.54001C1.49331 5.78001 1.33331 5.05334 1.33331 4.36001C1.33331 3.90668 1.41331 3.47334 1.57331 3.07334C1.73331 2.66668 1.98665 2.29334 2.33998 1.96001C2.76665 1.54001 3.23331 1.33334 3.72665 1.33334C3.91331 1.33334 4.09998 1.37334 4.26665 1.45334C4.43998 1.53334 4.59331 1.65334 4.71331 1.82668L6.25998 4.00668C6.37998 4.17334 6.46665 4.32668 6.52665 4.47334C6.58665 4.61334 6.61998 4.75334 6.61998 4.88001C6.61998 5.04001 6.57331 5.20001 6.47998 5.35334C6.39331 5.50668 6.26665 5.66668 6.10665 5.82668L5.59998 6.35334C5.52665 6.42668 5.49331 6.51334 5.49331 6.62001C5.49331 6.67334 5.49998 6.72001 5.51331 6.77334C5.53331 6.82668 5.55331 6.86668 5.56665 6.90668C5.68665 7.12668 5.89331 7.41334 6.18665 7.76001C6.48665 8.10668 6.80665 8.46001 7.15331 8.81334C7.21998 8.88001 7.29331 8.94668 7.35998 9.01334C7.62665 9.27334 7.63331 9.70001 7.36665 9.96668Z" fill="currentColor"></path>
            <path d="M14.6467 12.22C14.6467 12.4067 14.6134 12.6 14.5467 12.7867C14.5267 12.84 14.5067 12.8933 14.48 12.9467C14.3667 13.1867 14.22 13.4133 14.0267 13.6267C13.7 13.9867 13.34 14.2467 12.9334 14.4133C12.9267 14.4133 12.92 14.42 12.9134 14.42C12.52 14.58 12.0934 14.6667 11.6334 14.6667C10.9534 14.6667 10.2267 14.5067 9.46002 14.18C8.69336 13.8533 7.92669 13.4133 7.16669 12.86C6.90669 12.6667 6.64669 12.4733 6.40002 12.2667L8.58002 10.0867C8.76669 10.2267 8.93336 10.3333 9.07336 10.4067C9.10669 10.42 9.14669 10.44 9.19336 10.46C9.24669 10.48 9.30002 10.4867 9.36002 10.4867C9.47336 10.4867 9.56002 10.4467 9.63336 10.3733L10.14 9.87332C10.3067 9.70665 10.4667 9.57999 10.62 9.49999C10.7734 9.40665 10.9267 9.35999 11.0934 9.35999C11.22 9.35999 11.3534 9.38665 11.5 9.44665C11.6467 9.50665 11.8 9.59332 11.9667 9.70665L14.1734 11.2733C14.3467 11.3933 14.4667 11.5333 14.54 11.7C14.6067 11.8667 14.6467 12.0333 14.6467 12.22Z" fill="currentColor"></path>
          </svg>
          <span class="hidden lg:block ml-2 text-sm font-bold">Customer support: +1-202-555-0147</span>
        </a>
      </div>
      <div class="hidden md:block w-auto">
        <ul class="flex items-center">
          <li class="mr-8"><a class="inline-block text-gray-400 hover:text-white font-bold" href="#">Shop now</a></li>
          <li class="mr-8"><a class="inline-block text-gray-400 hover:text-white font-bold" href="#">Order tracking</a></li>
          <li class="mr-8"><a class="inline-block text-gray-400 hover:text-white font-bold" href="#">My account</a></li>
          <li><a class="inline-block text-gray-400 hover:text-white font-bold" href="#">Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="flex h-20 py-2 px-6 items-center justify-between bg-white relative">
      <a class="inline-block text-2xl font-bold mr-10" href="#">
        <img src="shopal-assets/logos/shopal-logo.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 Navigation (horizontal) Component Generator

Tailwind Component #4325

<section class="relative py-20 xl:py-32">
  <div class="hidden lg:block absolute top-0 right-0 2xl:w-1/2 p-8">
    <img class="img-fluid max-h-166 w-full max-w-xl xl:max-w-2xl 2xl:max-w-none border-2 border-black rounded-md shadow object-cover" src="shopal-assets/images/placeholder-office-sign-in.png" alt="">
  </div>
  <div class="relative container px-4 mx-auto">
    <div class="max-w-sm mx-auto lg:mx-0">
      <div class="text-center mb-8">
        <span class="block mb-2 text-sm font-bold uppercase text-green-500">Sign Up</span>
        <h3 class="text-2xl font-bold">Create new account</h3>
      </div>
      <form action="">
        <div class="flex flex-wrap mb-4 -mx-2">
          <div class="w-full sm:w-1/2 px-2 mb-4 sm:mb-0">
            <input class="w-full py-3 px-6 h-12 text-sm font-bold placeholder-black border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="First Name">
          </div>
          <div class="w-full sm:w-1/2 px-2">
            <input class="w-full py-3 px-6 h-12 text-sm font-bold placeholder-black border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="First Name">
          </div>
        </div>
        <input class="w-full mb-4 py-3 px-6 h-12 text-sm font-bold placeholder-black border-2 border-black rounded-md focus:outline-indigo" type="email" placeholder="Email address">
        <input class="w-full mb-4 py-3 px-6 h-12 text-sm font-bold placeholder-black border-2 border-black rounded-md focus:outline-indigo" type="password" placeholder="Password">
        <div class="flex mb-5 items-start">
          <input class="mr-3" type="checkbox" value="" id="">
          <label class="text-sm font-bold" for="">By signing up, you agree to our Terms, Data Policy and Cookies Policy.</label>

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

<section class="py-12 bg-orange-500">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="text-center">
        <h3 class="text-2xl font-black text-black mb-2">#SHOPAL on Instagram</h3>
        <p class="text-lg font-bold text-black mb-6">Phasellus lorem malesuada ligula pulvinar commodo maecenas</p>
        <div class="max-w-2xl xl:max-w-none mx-auto mb-10">
          <div class="flex flex-wrap items-center -mx-4 -mb-8">
            <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-8">
              <div class="h-44 rounded-md border-2 border-black shadow overflow-hidden">
                <img class="h-full w-full object-cover" src="shopal-assets/images/product-insta-medium3.png" alt="">
              </div>
            </div>
            <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-8">
              <div class="h-44 rounded-md border-2 border-black shadow overflow-hidden">
                <img class="h-full w-full object-cover" src="shopal-assets/images/product-insta-medium2.png" alt="">
              </div>
            </div>
            <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-8">
              <div class="h-44 rounded-md border-2 border-black shadow overflow-hidden">
                <img class="h-full w-full object-cover" src="shopal-assets/images/product-insta-medium4.png" alt="">
              </div>
            </div>
            <div class="w-1/2 md:w-1/3 xl:w-1/6 px-4 mb-8">

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 Instagram photos Component Generator

Tailwind Component #4327

<section>
  <div class="fixed z-50 top-0 left-0 w-full h-full bg-gray-900 bg-gray-80 overflow-auto">
    <div class="flex px-4 mt-12 md:mt-32 items-center justify-center">
      <div class="max-w-4xl py-20 px-8 mx-auto bg-white border-2 border-black shadow rounded-md">
        <div class="max-w-2xl text-center mx-auto">
          <span class="inline-block mx-auto mb-6">
            <svg width="54" height="54" viewBox="0 0 54 54" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M26.9999 0.333374C12.3066 0.333374 0.333252 12.3067 0.333252 27C0.333252 41.6934 12.3066 53.6667 26.9999 53.6667C41.6933 53.6667 53.6666 41.6934 53.6666 27C53.6666 12.3067 41.6933 0.333374 26.9999 0.333374ZM39.7466 20.8667L24.6266 35.9867C24.2532 36.36 23.7466 36.5734 23.2133 36.5734C22.6799 36.5734 22.1733 36.36 21.7999 35.9867L14.2533 28.44C13.4799 27.6667 13.4799 26.3867 14.2533 25.6134C15.0266 24.84 16.3066 24.84 17.0799 25.6134L23.2133 31.7467L36.9199 18.04C37.6933 17.2667 38.9733 17.2667 39.7466 18.04C40.5199 18.8134 40.5199 20.0667 39.7466 20.8667Z" fill="#AFFF0F"></path>
            </svg>
          </span>
          <span class="block mb-1 text-sm font-bold text-indigo-500">SUCCESS</span>
          <h3 class="text-2xl font-black mb-5">Your order has been placed</h3>
          <p class="text-lg font-bold mb-12">Build a well-presented brand that everyone will love. Take care to develop resources continually and integrity them with previous projects.</p>
          <a class="group relative inline-block h-12 w-full xs:w-60 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">Continue Shopping</span>
              </div>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI E-commerce (orders) Component Generator

Tailwind Component #4328

<section class="py-20 bg-green-500">
  <div class="container px-4 mx-auto">
    <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/4 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/slack-logo.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/dropbox-logo.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/spotify-logo.svg" alt="">
        </div>
        <div class="w-full sm:w-1/2 lg:w-1/4 px-4 mb-18">
          <img class="img-fluid block mx-auto" src="shopal-assets/logos/stripe-logo.svg" alt="">
        </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 Logo clouds Component Generator

Tailwind Component #4329

<section class="relative bg-green-500 overflow-hidden">
  <img class="hidden md:block absolute top-1/2 right-0 w-40 lg:w-52 xl:w-auto transform -translate-y-1/2 img-fluid z-10" src="shopal-assets/background/orange-waves-large.svg" alt="">
  <img class="hidden lg:block absolute bottom-0 left-0 mb-10 ml-6 img-fluid" src="shopal-assets/background/orange-dots-vertical.svg" alt="">
  <div class="container px-4 mx-auto">
    <div class="relative max-w-6xl py-24 md:py-32 px-4 mx-auto">
      <img class="hidden sm:block absolute top-0 left-0 h-full transform -translate-x-1/2 img-fluid" src="shopal-assets/background/blue-lines.svg" alt="">
      <div class="sm:max-w-sm lg:max-w-lg xl:max-w-xl mx-auto text-center">
        <h3 class="text-3xl md:text-4xl font-black mb-6">Sign-up for our Newsletter</h3>
        <p class="text-base md:text-lg font-bold mb-6">Receive our latest updates about our products and promotions.</p>
        <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-auto 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>
            </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 Newsletter Component Generator

Tailwind Component #4330

<section class="relative pb-24 md:pb-0 bg-green-500 overflow-hidden">
  <div class="hidden lg:block absolute top-0 left-0 h-full w-3/12 bg-indigo-500"></div>
  <div class="relative container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
          <div class="relative py-16 lg:pl-20">
            <div class="absolute top-0 left-0 w-80 -ml-32 h-full bg-indigo-500"></div>
            <img class="absolute top-1/2 left-0 -ml-20 transform -translate-y-1/2" src="shopal-assets/background/dots-blue-vertical.svg" alt="">
            <img class="absolute top-0 h-full left-0 ml-28" src="shopal-assets/background/orange-lines.svg" alt="">
            <img class="relative img-fluid h-80 sm:h-100 border-2 border-black shadow rounded-md object-cover" src="shopal-assets/images/photo-men.png" alt="">
          </div>
        </div>
        <div class="w-full md:w-1/2 px-4">
          <div class="max-w-lg mx-auto">
            <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M30.0001 11.6667L25.0001 11.6667L21.6667 18.3334L21.6667 28.3334L31.6667 28.3334L31.6667 18.3334L26.6667 18.3334L30.0001 11.6667ZM16.6667 11.6667L11.6667 11.6667L8.33341 18.3334L8.33341 28.3334L18.3334 28.3334L18.3334 18.3334L13.3334 18.3334L16.6667 11.6667Z" fill="black"></path>
              <defs><rect width="40" height="40" fill="white" transform="translate(40 40) rotate(-180)"></rect></defs>
            </svg>
            <h3 class="text-2xl sm:text-3xl lg:text-4xl font-black mt-7 mb-6">Lorem ipsum dolor sit amet consectutar domor at elis</h3>
            <p class="text-lg font-bold mb-10">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
            <h5 class="text-xl font-black mb-1">Danny Bailey</h5>
            <span class="font-bold">CEO &amp; Founder</span>
          </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 Reviews Component Generator

Tailwind Component #4331

<section>
  <div class="bg-green-500">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap xs:h-16 py-4 items-center">
        <div class="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>
        <a class="inline-block text-sm text-indigo-500 font-bold" href="#">Product</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 Breadcrumbs Component Generator

Tailwind Component #4332

<section class="py-6 bg-green-500">
  <div class="container px-4 mx-auto">
    <div class="rounded-md border-2 border-black shadow overflow-hidden">
      <div class="flex flex-wrap items-center">
        <div class="w-full md:w-1/2">
          <div class="relative">
            <img class="img-fluid w-full h-88" src="shopal-assets/images/banner1.png" alt="">
            <div class="absolute top-1/2 left-0 p-6 w-full text-center transform -translate-y-1/2">
              <h4 class="text-3xl font-black text-white mb-6">Banner Hero</h4>
              <a class="group relative inline-block h-12 w-full xs:w-34 text-center 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">Start Buying</span>
                  </div>
                </div>
              </a>
            </div>
          </div>
        </div>
        <div class="w-full md:w-1/2">
          <div class="relative">
            <img class="img-fluid w-full h-88" src="shopal-assets/images/banner2.png" alt="">
            <div class="absolute top-1/2 left-0 p-6 w-full text-center transform -translate-y-1/2">
              <h4 class="text-3xl font-black text-white mb-6">Banner Hero</h4>

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

<section class="py-16 bg-gray-900" x-data="{ price: 250, showContent: false, grid: 1, size: 38 }" x-init="size = $refs.size1.textContent">
  <div class="container px-4 mx-auto">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap items-center justify-between mb-10">
        <h2 class="text-2xl sm:text-3xl font-bold">
          <span class="text-white">Found 420 results for</span>
          <span class="text-green-600">Lorem Ipsum</span>
        </h2>
        <div class="w-full lg:w-auto inline-flex items-center mt-6 lg:mt-0">
          <div class="group relative h-12 w-52 mr-6 border-2 border-white rounded-md overflow-hidden">
            <select class="w-full h-full px-4 text-sm text-white font-bold bg-gray-900 appearance-none outline-none" name="" id="">
              <option value="1">Sort by Newest</option>
              <option value="1">Sort by Oldest</option>
              <option value="1">Sort by Price</option>
            </select>
            <span class="absolute top-1/2 right-0 mr-3 transform -translate-y-1/2 text-white group-hover:text-green-500">
              <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.94667 0.453308H4.79333H1.05333C0.413333 0.453308 0.0933335 1.22664 0.546667 1.67997L4 5.13331C4.55333 5.68664 5.45333 5.68664 6.00667 5.13331L7.32 3.81997L9.46 1.67997C9.90667 1.22664 9.58667 0.453308 8.94667 0.453308Z" fill="currentColor"></path>
              </svg>
            </span>
          </div>
          <div class="inline-flex h-12 border-2 border-white rounded-md overflow-hidden">
            <a x-on:click.prevent="grid = 1" class="inline-flex items-center justify-center w-12 h-full border-r border-white hover:bg-indigo-500 transition duration-300 bg-green-500" :class="{ 'bg-green-500': grid == 1, 'bg-transparent': grid != 1 }" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" 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

Tailwind Component #4334

<section class="pt-20 pb-16 bg-white">
  <div class="container mx-auto px-4 mb-12 md:mb-20">
    <div class="max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-1/3 px-4 mb-6 lg:mb-0">
          <a class="inline-block mb-16" href="#">
            <img class="h-7" src="shopal-assets/logos/shopal-logo.svg" alt="" width="auto">
          </a>
          <div class="flex flex-col mb-8"><a class="inline-block text-sm font-bold text-black hover:text-indigo-500 hover:underline mb-3" href="#">Call us at: 1-888-699-8900</a><a class="inline-block text-sm font-bold text-black hover:text-indigo-500 hover:underline" href="mailto:contact@shopal.com">Email: contact@shopal.com</a></div>
          <div>
            <a class="inline-block text-green-500 hover:text-indigo-500 mr-6" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7272V12.766H16.3583L16.7669 9.66243H13.6349V7.68126C13.6349 6.78299 13.8882 6.17083 15.203 6.17083L16.8771 6.17015V3.39421C16.5876 3.35731 15.5938 3.27271 14.4371 3.27271C12.0217 3.27271 10.3681 4.71878 10.3681 7.37389V9.66243H7.63647V12.766H10.3681V20.7272H13.6349Z" fill="currentColor"></path>
                <mask id="mask0_601_10113" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="7" y="3" width="10" height="18">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M13.6349 20.7272V12.766H16.3583L16.7669 9.66243H13.6349V7.68126C13.6349 6.78299 13.8882 6.17083 15.203 6.17083L16.8771 6.17015V3.39421C16.5876 3.35731 15.5938 3.27271 14.4371 3.27271C12.0217 3.27271 10.3681 4.71878 10.3681 7.37389V9.66243H7.63647V12.766H10.3681V20.7272H13.6349Z" fill="white"></path>
                </mask>
              </svg>
            </a>
            <a class="inline-block text-green-500 hover:text-indigo-500 mr-6" href="#">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="currentColor"></path>
                <mask id="mask0_601_10114" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="3" y="4" width="19" height="16">
                  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8181 6.14598C21.1356 6.44844 20.4032 6.65356 19.6336 6.74513C20.4194 6.27462 21.0208 5.52831 21.3059 4.64177C20.5689 5.0775 19.7553 5.39389 18.8885 5.56541C18.1943 4.82489 17.2069 4.36365 16.1118 4.36365C14.0108 4.36365 12.3072 6.06719 12.3072 8.16707C12.3072 8.46489 12.3408 8.75577 12.4057 9.03392C9.24434 8.87513 6.44104 7.3605 4.56483 5.05895C4.23686 5.61986 4.05028 6.27344 4.05028 6.9711C4.05028 8.29107 4.72243 9.45574 5.74225 10.1371C5.11877 10.1163 4.53237 9.94477 4.01901 9.65968V9.70719C4.01901 11.5498 5.33086 13.0876 7.07031 13.4376C6.75161 13.5234 6.41555 13.5709 6.06789 13.5709C5.82222 13.5709 5.58464 13.5466 5.35171 13.5002C5.8361 15.0125 7.24067 16.1123 8.90483 16.1424C7.6034 17.1623 5.96243 17.7683 4.1801 17.7683C3.87301 17.7683 3.57052 17.7498 3.27271 17.7162C4.95655 18.7974 6.95561 19.4279 9.10416 19.4279C16.1026 19.4279 19.928 13.6312 19.928 8.60398L19.9153 8.11147C20.6627 7.57834 21.3094 6.90853 21.8181 6.14598Z" fill="white"></path>
                </mask>

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

<div x-data="{ mobileNavOpen: false }">
  <nav>
    <div class="flex h-20 py-6 px-6 items-center justify-between bg-white relative">
      <a class="inline-block text-2xl font-bold mr-10" href="#">
        <img src="shopal-assets/logos/shopal-logo.svg" alt="">
      </a>
      <ul class="hidden lg:flex items-center absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Home</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>
            <div class="hidden group-hover:block absolute z-50 bottom-0 left-0 transform translate-y-full w-56 pt-6">
              <div class="p-2 bg-white border-2 border-black rounded-md shadow"><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 1</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 2</a><a class="block p-2 text-sm font-bold text-black hover:text-indigo-500" href="#">Category 3</a></div>
            </div>
          </button>
        </li>
        <li class="mr-6">
          <button class="relative group inline-flex items-center text-left text-base font-bold text-black hover:text-indigo-500">
            <span class="mr-2">Pages</span>
            <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3.99999 5.08071C3.91243 5.08081 3.82572 5.06361 3.74483 5.03009C3.66394 4.99657 3.59048 4.94739 3.52866 4.88538L0.700184 2.05728C0.575173 1.93227 0.504943 1.76272 0.504944 1.58593C0.504944 1.40913 0.575175 1.23958 0.700187 1.11457C0.825199 0.989561 0.99475 0.919331 1.17154 0.919331C1.34834 0.919332 1.51789 0.989563 1.6429 1.11457L3.99999 3.47132L6.35708 1.11455C6.48209 0.989543 6.65165 0.919312 6.82844 0.919312C7.00523 0.919311 7.17478 0.989541 7.29979 1.11455C7.42481 1.23956 7.49504 1.40911 7.49504 1.58591C7.49504 1.7627 7.42481 1.93225 7.2998 2.05726L4.47132 4.8854C4.4095 4.9474 4.33604 4.99658 4.25515 5.0301C4.17426 5.06361 4.08755 5.08082 3.99999 5.08071V5.08071Z" fill="currentColor"></path>
            </svg>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

AI Navigation (horizontal) Component Generator

Tailwind Component #4336

<section class="pt-6 pb-24" x-data="{ size: '' }" x-init="size = $refs.size1.textContent">
  <div class="px-6">
    <div class="flex flex-wrap -mx-4 mb-12">
      <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
        <img class="img-fluid w-full h-96 md:h-166 object-cover" src="shopal-assets/product-details/product-detail-large3.png" alt="">
      </div>
      <div class="w-full md:w-1/2 px-3">
        <div class="flex flex-wrap -mx-3">
          <div class="w-full xs:w-1/2 px-3 mb-6">
            <img class="img-fluid w-full h-80 object-cover" src="shopal-assets/product-details/product-detail-medium1.png" alt="">
          </div>
          <div class="w-full xs:w-1/2 px-3 mb-6">
            <img class="img-fluid w-full h-80 object-cover" src="shopal-assets/product-details/product-detail-medium2.png" alt="">
          </div>
          <div class="w-full px-3">
            <img class="img-fluid w-full h-80 object-cover" src="shopal-assets/product-details/product-detail-horizontal.png" alt="">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="max-w-lg lg:max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-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

Tailwind Component #4337

<section class="py-16 bg-green-600" 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">New arrivals</h1>
    </div>
    <div class="max-w-sm md:max-w-2xl xl:max-w-none mx-auto">
      <div class="flex flex-wrap -mx-4 -mb-8">
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <div class="relative max-w-sm mx-auto">
            <a class="group block relative" href="#">
              <div class="relative h-100 mb-3">
                <div class="absolute top-0 left-0 w-full h-full bg-blueGray-900 rounded-md"></div>
                <img class="img-fluid h-full transform -translate-x-1 -translate-y-1 w-full object-cover border-2 border-black rounded-md" src="shopal-assets/products/product-medium8.png" alt="">
              </div>
              <div class="text-center">
                <h3 class="text-xl text-black group-hover:text-indigo-500 font-black mb-1 transition duration-300">Product title</h3>
                <span class="text-sm text-indigo-500 font-black">$ 199.00</span>
              </div>
            </a>
          </div>
        </div>
        <div class="w-full md:w-1/2 xl:w-1/4 px-4 mb-8">
          <div class="relative max-w-sm mx-auto">
            <a class="group block relative" href="#">

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

Tailwind Component #4338

<section class="py-20 bg-gray-900">
  <div class="container px-4 mx-auto">
    <div class="max-w-xl lg:max-w-6xl mx-auto">
      <div class="flex flex-wrap -mx-4">
        <div class="w-full lg:w-2/3 px-4 mb-12 lg:mb-0">
          <div class="mb-4 bg-white rounded-md shadow" x-data="{ accordion: true }">
            <div class="py-6 px-6 w-full bg-transparent">
                <div class="flex items-center justify-between cursor-pointer" x-on:click="accordion = !accordion">
                    <h3 class="text-base font-bold">Delivery</h3>
                    <span :class="{'rotate-180': accordion, 'rotate-0': !accordion }" class="inline-block transform">
                        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M8.9465 0.453369H4.79316H1.05317C0.413166 0.453369 0.0931657 1.2267 0.546499 1.68004L3.99983 5.13337C4.55317 5.6867 5.45317 5.6867 6.0065 5.13337L7.31983 3.82004L9.45983 1.68004C9.9065 1.2267 9.5865 0.453369 8.9465 0.453369Z" fill="black"></path>
                        </svg>    
                    </span>
                </div>
                <div x-ref="container" :style="accordion ? 'height: ' + $refs.container.scrollHeight + 'px' : ''" class="overflow-hidden h-0 duration-500">
                    <div class="px-6 py-6">
                      <form action="">
                        <div class="flex flex-wrap -mx-4 mb-6">
                          <div class="w-full md:w-1/2 px-4 mb-6 md:mb-0">
                            <label class="block text-sm font-bold mb-2" for="">First Name</label>
                            <input class="w-full h-12 py-3 px-4 text-sm placeholder-black font-bold border-2 border-black rounded-md focus:outline-indigo" type="text" placeholder="Lorem Ipsum dolor sit amet">
                          </div>
                          <div class="w-full md:w-1/2 px-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 E-commerce (orders) Component Generator

Tailwind Component #4339

<section>
  <div class="bg-gray-900">
    <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-white 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="white"></path>
          </svg>
        </span>
        <a class="inline-block text-sm text-white 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="white"></path>
          </svg>
        </span>
        <a class="inline-block text-sm text-green-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 #4340