Tailwind CSS Components

<section class="relative py-20">
  <div class="hidden lg:block absolute bottom-0 left-0">
    <img class="ml-96" src="zeus-assets/images/backgrounds/blue-eclipse-triangle.svg" alt="">
    <img src="zeus-assets/images/backgrounds/yellow-eclipse-bottom.svg" alt="">
    <img src="zeus-assets/images/backgrounds/light-eclipse.svg" alt="">
  </div>
  <div class="container px-4 mx-auto">
    <div class="relative flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <img class="rounded-xl" src="zeus-assets/images/group-posts.png" alt="">
      </div>
      <div class="relative w-full lg:w-1/2 px-4 order-first lg:order-last">
        <div class="relative lg:pl-10 max-w-lg mb-10 lg:mb-0">
          <span class="text-xs text-blue-400 font-semibold">What's new at Shuffle</span>
          <h2 class="mt-8 mb-6 lg:mb-10 lg:pr-8 text-4xl font-semibold font-heading">Expand your brand with this excellent extension tool</h2>
          <p class="mb-6 lg:mb-12 text-xl text-gray-500">With this tool, you will get much better results at work and develop new skills. Will you take the risk of trying the latest version of our application?</p>
          <a class="inline-block py-4 px-8 text-white font-medium leading-normal text-sm bg-red-400 hover:bg-red-300 rounded transition duration-200" href="#">Try demo</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

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

Tailwind Component #2382

<section class="relative py-20 overflow-hidden">
  <div class="hidden lg:block absolute bottom-0 left-0">
    <img class="ml-72 -mb-20" src="zeus-assets/images/backgrounds/pink-circle.svg" alt="">
    <img class="transform rotate-180" src="zeus-assets/images/backgrounds/yellow-eclipse.svg" alt="">
    <img class="w-72 absolute bottom-0 right-0" src="zeus-assets/images/backgrounds/blue-triangle.svg" alt="">
  </div>
  <div class="container px-4 mx-auto">
    <div class="relative flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <img class="rounded-xl" src="zeus-assets/images/group-posts.png" alt="">
      </div>
      <div class="relative w-full lg:w-1/2 px-4 order-first lg:order-last">
        <div class="relative lg:pl-10 max-w-lg mb-10 lg:mb-0">
          <span class="text-xs text-blue-400 font-semibold">What's new at Shuffle</span>
          <h2 class="mt-8 mb-6 lg:mb-10 lg:pr-8 text-4xl font-semibold font-heading">Expand your brand with this excellent extension tool</h2>
          <p class="mb-6 lg:mb-12 text-xl text-gray-500">With this tool, you will get much better results at work and develop new skills. Will you take the risk of trying the latest version of our application?</p>
          <a class="inline-block py-4 px-8 text-white font-medium leading-normal text-sm bg-red-400 hover:bg-red-300 rounded transition duration-200" href="#">Try demo</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

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

Tailwind Component #2383

<section class="relative py-20 overflow-hidden">
  <div class="hidden lg:block absolute bottom-0 left-0 w-1/2">
    <div>
      <img class="transform rotate-90" src="zeus-assets/images/backgrounds/blue-squere.svg" alt="">
    </div>
    <div class="flex items-end">
      <img class="transform rotate-180" src="zeus-assets/images/backgrounds/pink-eclipse.svg" alt="">
      <img class="w-1/3 transform -rotate-90" src="zeus-assets/images/backgrounds/pink-triangle.svg" alt="">
      <img class="w-1/3 transform -rotate-90" src="zeus-assets/images/backgrounds/yellow-traingle.svg" alt="">
    </div>
  </div>
  <div class="container px-4 mx-auto">
    <div class="relative flex flex-wrap items-center -mx-4">
      <div class="w-full lg:w-1/2 px-4">
        <img class="rounded-xl" src="zeus-assets/images/group-posts.png" alt="">
      </div>
      <div class="relative w-full lg:w-1/2 px-4 order-first lg:order-last">
        <div class="relative lg:pl-10 max-w-lg mb-10 lg:mb-0">
          <span class="text-xs text-blue-400 font-semibold">What's new at Shuffle</span>
          <h2 class="mt-8 mb-6 lg:mb-10 lg:pr-8 text-4xl font-semibold font-heading">Expand your brand with this excellent extension tool</h2>
          <p class="mb-6 lg:mb-12 text-xl text-gray-500">With this tool, you will get much better results at work and develop new skills. Will you take the risk of trying the latest version of our application?</p>
          <a class="inline-block py-4 px-8 text-white font-medium leading-normal text-sm bg-red-400 hover:bg-red-300 rounded transition duration-200" href="#">Try demo</a>
        </div>
      </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2384

<section x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 5 }">
  <div class="py-12 md:py-24">
    <div class="container px-4 mx-auto">
      <div class="flex flex-wrap items-center">
        <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="hidden lg:flex items-center justify-center w-14 h-14 rounded-full border hover:bg-gray-50">
          <svg width="19" height="13" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M9.3 6.25128L18.25 6.25128" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            <path fill-rule="evenodd" clip-rule="evenodd" d="M9.30078 1.25031L1.36378 6.25131L9.30078 11.2523L9.30078 1.25031Z" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          </svg>
        </button>
        <div class="lg:hidden w-full text-center mb-10">
          <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="w-12 h-12 mr-2 p-2 rounded-full border hover:bg-gray-50">
            <svg class="mx-auto" width="19" height="13" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.3 6.25128L18.25 6.25128" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.30078 1.25031L1.36378 6.25131L9.30078 11.2523L9.30078 1.25031Z" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="w-12 h-12 p-2 rounded-full border hover:bg-gray-50">
            <svg class="mx-auto" width="19" height="13" viewBox="0 0 19 13" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M9.7 6.74872L0.75 6.74872" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M9.69922 11.7497L17.6362 6.74869L9.69922 1.74769V11.7497Z" stroke="#838EA4" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2385

<section class="relative" x-data="{ activeTab: 1 }" x-init="activeTab = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="relative container py-10 lg:py-20 mx-auto">
      <div class="relative p-6 lg:p-16 bg-blue-50 rounded-xl">
        <div class="hidden lg:block absolute bottom-0 right-0">
          <img class="w-full h-full ml-auto" src="zeus-assets/images/backgrounds/yellow-light.svg" alt="">
        </div>
        <div class="relative flex flex-wrap items-center -mx-4">
          <div class="relative w-full lg:w-1/2 px-4">
            <ul class="flex flex-wrap mb-6 lg:mb-10">
              <li class="w-1/2 md:w-auto"><a x-ref="tab1" class="inline-block px-8 py-4 text-sm font-semibold bg-white rounded shadow" :class="{'bg-white shadow': $refs.tab1.textContent == activeTab, 'text-gray-500': $refs.tab1.textContent != activeTab }" x-on:click.prevent="activeTab = $refs.tab1.textContent" href="#">Item #1</a></li>
              <li class="w-1/2 md:w-auto"><a x-ref="tab2" class="inline-block px-8 py-4 text-sm font-semibold text-gray-500 rounded" :class="{'bg-white shadow': $refs.tab2.textContent == activeTab, 'text-gray-500': $refs.tab2.textContent != activeTab }" x-on:click.prevent="activeTab = $refs.tab2.textContent" href="#">Item #2</a></li>
              <li class="w-1/2 md:w-auto"><a x-ref="tab3" class="inline-block px-8 py-4 text-sm font-semibold text-gray-500 rounded" :class="{'bg-white shadow': $refs.tab3.textContent == activeTab, 'text-gray-500': $refs.tab3.textContent != activeTab }" x-on:click.prevent="activeTab = $refs.tab3.textContent" href="#">Item #3</a></li>
              <li class="w-1/2 md:w-auto"><a x-ref="tab4" class="inline-block px-8 py-4 text-sm font-semibold text-gray-500 rounded" :class="{'bg-white shadow': $refs.tab4.textContent == activeTab, 'text-gray-500': $refs.tab4.textContent != activeTab }" x-on:click.prevent="activeTab = $refs.tab4.textContent" href="#">Item #4</a></li>
            </ul>
            <div class="max-w-md">
              <h2 class="mb-4 lg:mb-10 text-4xl font-semibold font-heading">Expand your brand with this excellent extension tool.</h2>
              <p class="mb-6 lg:mb-10 text-gray-500 leading-loose">A short message that will bring your customers into the world of your imagination. And will allow them to become more familiar with your brand.</p>
              <a class="inline-block px-12 py-4 mb-10 lg:mb-0 text-sm text-white font-medium leading-normal bg-red-400 hover:bg-red-300 rounded transition duration-200" href="#">Try Demo</a>
            </div>
          </div>
          <div class="relative w-full lg:w-1/2 px-4">
            <img class="rounded-xl" src="zeus-assets/images/group-posts.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

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

Tailwind Component #2386

<section class="relative py-20 overflow-hidden">
  <div class="absolute top-0 left-0 w-full inset-0 bg-gray-900 bg-opacity-50 z-10"></div>
  <img class="absolute top-0 left-0 w-full h-full object-cover" src="https://images.unsplash.com/photo-1524508762098-fd966ffb6ef9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
  <div class="relative container px-4 mx-auto z-10">
    <div class="max-w-md mx-auto lg:mx-0 p-8 bg-white rounded-lg">
      <span class="flex items-center justify-center w-16 h-16 mb-12 bg-blue-300 rounded-full">
        <svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M16.9033 6.85114L12.46 10.4642C11.6205 11.1302 10.4394 11.1302 9.59992 10.4642L5.11914 6.85114" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
          <path fill-rule="evenodd" clip-rule="evenodd" d="M15.9089 19C18.9502 19.0084 21 16.5095 21 13.4384V6.57001C21 3.49883 18.9502 1 15.9089 1H6.09114C3.04979 1 1 3.49883 1 6.57001V13.4384C1 16.5095 3.04979 19.0084 6.09114 19H15.9089Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
      <h3 class="mb-4 text-2xl font-semibold">Weekly email updates</h3>
      <p class="mb-6 text-gray-500 leading-loose">Focus on your business with a large number of useful tools to take care of your company's development. Share your difficulties with us, and we will help you.</p>
      <a class="text-red-500 font-medium underline hover:no-underline" href="#">Learn more</a>
    </div>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2387

<section class="relative py-20 lg:py-40" x-data="{ slideWidth: 0, activeSlide: 0, slideCount: 4 }">
  <div class="hidden lg:block absolute top-0 left-0 w-4/5 h-full bg-blue-50 rounded-r-full"></div>
  <div class="relative container px-4 h-full mx-auto">
    <div class="relative flex flex-wrap items-center justify-center -mx-4">
      <div class="relative w-full md:w-auto lg:w-1/5 px-4">
        <div class="max-w-max mx-auto lg:mx-0">
          <button x-on:click.prevent="activeSlide > 0 ? (activeSlide -= 1, slideWidth -= $refs['slide' + (activeSlide + 1)].offsetWidth) : null" class="inline-flex lg:flex items-center justify-center mb-4 w-12 h-12 bg-blue-100 hover:bg-blue-200 rounded-full">
            <svg width="13" height="19" viewBox="0 0 13 19" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.74805 9.30018L6.74805 18.2502" stroke="#0AADFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M11.75 9.30017L6.749 1.36317L1.748 9.30017L11.75 9.30017Z" stroke="#0AADFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
          <button x-on:click.prevent="activeSlide < slideCount - 1 ? (activeSlide += 1, slideWidth += $refs['slide' + activeSlide].offsetWidth) : activeSlide = slideCount - 1" class="inline-flex lg:flex items-center justify-center w-12 h-12 bg-blue-100 hover:bg-blue-200 rounded-full">
            <svg width="13" height="19" viewBox="0 0 13 19" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.25195 9.69982V0.749817" stroke="#0AADFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
              <path fill-rule="evenodd" clip-rule="evenodd" d="M1.25 9.69983L6.251 17.6368L11.252 9.69983H1.25Z" stroke="#0AADFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
            </svg>
          </button>
        </div>
      </div>
      <div class="relative z-10 w-full md:w-auto lg:w-3/5 px-4">
        <div class="mx-auto text-center">
          <span class="text-teal-500 font-semibold">What's new at Shuffle</span>
          <div class="overflow-hidden">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2388

<section class="py-8 px-6">
  <div class="flex flex-wrap -mx-3 items-center">
    <div class="w-full lg:w-1/2 flex items-center mb-5 lg:mb-0 px-3">
      <span class="inline-flex justify-center items-center w-16 h-16 mr-4 bg-indigo-500 rounded">
        <svg class="h-7 w-7 text-white" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M23.4506 4.60603C23.4408 4.59562 23.4379 4.58178 23.4277 4.5716C23.4175 4.56143 23.4034 4.55834 23.393 4.5485C20.899 2.06256 17.5213 0.666656 14 0.666656C10.4787 0.666656 7.10093 2.06256 4.60698 4.5485C4.59649 4.55834 4.58249 4.56135 4.57223 4.5716C4.56198 4.58186 4.55913 4.5956 4.54937 4.60603C2.69104 6.47326 1.42749 8.84913 0.918186 11.4338C0.408879 14.0185 0.676641 16.6961 1.68768 19.1287C2.69872 21.5614 4.40772 23.64 6.59899 25.1022C8.79026 26.5645 11.3656 27.3449 14 27.3449C16.6343 27.3449 19.2097 26.5645 21.4009 25.1022C23.5922 23.64 25.3012 21.5614 26.3123 19.1287C27.3233 16.6961 27.5911 14.0185 27.0817 11.4338C26.5724 8.84913 25.3089 6.47326 23.4506 4.60603V4.60603ZM13.9999 24.6667C12.4029 24.6661 10.8265 24.3063 9.38745 23.6139C7.94839 22.9215 6.68353 21.9142 5.68657 20.6667H11.0403C11.411 21.0858 11.8666 21.4214 12.3768 21.6513C12.8871 21.8811 13.4403 22 13.9999 22C14.5595 22 15.1127 21.8811 15.623 21.6513C16.1332 21.4214 16.5888 21.0858 16.9595 20.6667H22.3133C21.3163 21.9142 20.0515 22.9215 18.6124 23.6139C17.1733 24.3063 15.5969 24.6661 13.9999 24.6667V24.6667ZM12.6666 18C12.6666 17.7363 12.7448 17.4785 12.8913 17.2592C13.0378 17.04 13.246 16.8691 13.4897 16.7681C13.7333 16.6672 14.0014 16.6408 14.26 16.6923C14.5187 16.7437 14.7562 16.8707 14.9427 17.0572C15.1292 17.2437 15.2562 17.4812 15.3076 17.7399C15.3591 17.9985 15.3327 18.2666 15.2317 18.5102C15.1308 18.7539 14.9599 18.9621 14.7407 19.1086C14.5214 19.2551 14.2636 19.3333 13.9999 19.3333C13.6464 19.333 13.3075 19.1924 13.0575 18.9424C12.8075 18.6924 12.6669 18.3535 12.6666 18V18ZM23.8802 18.0028L23.8664 18H17.9999C17.9974 17.1755 17.7397 16.372 17.2622 15.6998C16.7847 15.0275 16.1109 14.5196 15.3332 14.2457V9.99999C15.3332 9.64637 15.1928 9.30723 14.9427 9.05718C14.6927 8.80713 14.3535 8.66666 13.9999 8.66666C13.6463 8.66666 13.3071 8.80713 13.0571 9.05718C12.807 9.30723 12.6666 9.64637 12.6666 9.99999V14.2457C11.8889 14.5196 11.2151 15.0275 10.7376 15.6998C10.2601 16.372 10.0024 17.1755 9.9999 18H4.13337L4.11961 18.0028C3.7728 17.1471 3.53956 16.2496 3.42585 15.3333H4.66657C5.02019 15.3333 5.35933 15.1928 5.60937 14.9428C5.85942 14.6927 5.9999 14.3536 5.9999 14C5.9999 13.6464 5.85942 13.3072 5.60937 13.0572C5.35933 12.8071 5.02019 12.6667 4.66657 12.6667H3.42585C3.6641 10.7714 4.40997 8.97575 5.58462 7.46947L6.45758 8.34244C6.58138 8.46624 6.72835 8.56444 6.8901 8.63144C7.05185 8.69844 7.22521 8.73292 7.40029 8.73292C7.57537 8.73292 7.74873 8.69844 7.91048 8.63144C8.07223 8.56444 8.2192 8.46623 8.343 8.34244C8.4668 8.21864 8.565 8.07167 8.632 7.90992C8.699 7.74817 8.73348 7.5748 8.73348 7.39972C8.73348 7.22465 8.69899 7.05128 8.63199 6.88953C8.56499 6.72778 8.46679 6.58081 8.34299 6.45702L7.47011 5.58414C8.97629 4.40987 10.7717 3.66421 12.6666 3.42594V4.66666C12.6666 5.02028 12.807 5.35942 13.0571 5.60946C13.3071 5.85951 13.6463 5.99999 13.9999 5.99999C14.3535 5.99999 14.6927 5.85951 14.9427 5.60946C15.1928 5.35942 15.3332 5.02028 15.3332 4.66666V3.42594C17.2281 3.66421 19.0235 4.40987 20.5297 5.58414L19.6568 6.45702C19.4068 6.70704 19.2663 7.04614 19.2663 7.39972C19.2663 7.75331 19.4068 8.09241 19.6568 8.34244C19.9068 8.59246 20.2459 8.73292 20.5995 8.73292C20.9531 8.73292 21.2922 8.59246 21.5422 8.34244L22.4152 7.46947C23.5898 8.97575 24.3357 10.7714 24.574 12.6667H23.3332C22.9796 12.6667 22.6405 12.8071 22.3904 13.0572C22.1404 13.3072 21.9999 13.6464 21.9999 14C21.9999 14.3536 22.1404 14.6927 22.3904 14.9428C22.6405 15.1928 22.9796 15.3333 23.3332 15.3333H24.574C24.4602 16.2496 24.227 17.1471 23.8802 18.0028V18.0028Z" fill="currentColor"></path>
        </svg>
      </span>
      <div>
        <h2 class="mb-1 text-2xl font-bold">Product Analysis Dashboard</h2>
        <p class="text-sm text-gray-500 font-medium">Take care of your business. Achieve your goals and increase profits.</p>
      </div>
    </div>
    <div class="w-full lg:w-auto ml-auto px-3">
      <a class="inline-flex items-center py-2 px-3 mr-3 text-xs text-indigo-500 font-medium bg-white hover:bg-indigo-50 rounded" href="#">
        <span class="inline-block mr-1">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 9.33334C13.6 9.33334 13.3333 9.60001 13.3333 10V12.6667C13.3333 13.0667 13.0667 13.3333 12.6667 13.3333H3.33334C2.93334 13.3333 2.66668 13.0667 2.66668 12.6667V10C2.66668 9.60001 2.40001 9.33334 2.00001 9.33334C1.60001 9.33334 1.33334 9.60001 1.33334 10V12.6667C1.33334 13.8 2.20001 14.6667 3.33334 14.6667H12.6667C13.8 14.6667 14.6667 13.8 14.6667 12.6667V10C14.6667 9.60001 14.4 9.33334 14 9.33334ZM5.80001 5.13334L7.33334 3.60001V10C7.33334 10.4 7.60001 10.6667 8.00001 10.6667C8.40001 10.6667 8.66668 10.4 8.66668 10V3.60001L10.2 5.13334C10.4667 5.40001 10.8667 5.40001 11.1333 5.13334C11.4 4.86668 11.4 4.46668 11.1333 4.20001L8.46668 1.53334C8.20001 1.26668 7.80001 1.26668 7.53334 1.53334L4.86668 4.20001C4.60001 4.46668 4.60001 4.86668 4.86668 5.13334C5.13334 5.40001 5.53334 5.40001 5.80001 5.13334Z" fill="#8880EB"></path>
          </svg>
        </span>
        <span>Download</span>
      </a>
      <a class="inline-flex items-center py-2 px-3 mr-3 text-xs text-indigo-500 font-medium bg-white hover:bg-indigo-50 rounded" href="#">
        <span class="inline-block mr-1">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Product Analysis Dashboard Page Header with Action Buttons

A horizontal page header for a dashboard showing a blue icon tile, bold title, muted subtitle, and three action buttons on the right: Download, Settings, and Report. The light background and simple row layout make it a compact header bar for an application dashboard view.

Tailwind Component #2389

<section class="py-8 px-6 bg-white">
  <div class="flex flex-wrap -mx-3 items-center">
    <div class="w-full lg:w-1/2 flex items-center mb-5 lg:mb-0 px-3">
      <span class="inline-flex justify-center items-center w-16 h-16 mr-4 bg-indigo-500 rounded">
        <svg class="h-7 w-7 text-white" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M23.4506 4.60603C23.4408 4.59562 23.4379 4.58178 23.4277 4.5716C23.4175 4.56143 23.4034 4.55834 23.393 4.5485C20.899 2.06256 17.5213 0.666656 14 0.666656C10.4787 0.666656 7.10093 2.06256 4.60698 4.5485C4.59649 4.55834 4.58249 4.56135 4.57223 4.5716C4.56198 4.58186 4.55913 4.5956 4.54937 4.60603C2.69104 6.47326 1.42749 8.84913 0.918186 11.4338C0.408879 14.0185 0.676641 16.6961 1.68768 19.1287C2.69872 21.5614 4.40772 23.64 6.59899 25.1022C8.79026 26.5645 11.3656 27.3449 14 27.3449C16.6343 27.3449 19.2097 26.5645 21.4009 25.1022C23.5922 23.64 25.3012 21.5614 26.3123 19.1287C27.3233 16.6961 27.5911 14.0185 27.0817 11.4338C26.5724 8.84913 25.3089 6.47326 23.4506 4.60603V4.60603ZM13.9999 24.6667C12.4029 24.6661 10.8265 24.3063 9.38745 23.6139C7.94839 22.9215 6.68353 21.9142 5.68657 20.6667H11.0403C11.411 21.0858 11.8666 21.4214 12.3768 21.6513C12.8871 21.8811 13.4403 22 13.9999 22C14.5595 22 15.1127 21.8811 15.623 21.6513C16.1332 21.4214 16.5888 21.0858 16.9595 20.6667H22.3133C21.3163 21.9142 20.0515 22.9215 18.6124 23.6139C17.1733 24.3063 15.5969 24.6661 13.9999 24.6667V24.6667ZM12.6666 18C12.6666 17.7363 12.7448 17.4785 12.8913 17.2592C13.0378 17.04 13.246 16.8691 13.4897 16.7681C13.7333 16.6672 14.0014 16.6408 14.26 16.6923C14.5187 16.7437 14.7562 16.8707 14.9427 17.0572C15.1292 17.2437 15.2562 17.4812 15.3076 17.7399C15.3591 17.9985 15.3327 18.2666 15.2317 18.5102C15.1308 18.7539 14.9599 18.9621 14.7407 19.1086C14.5214 19.2551 14.2636 19.3333 13.9999 19.3333C13.6464 19.333 13.3075 19.1924 13.0575 18.9424C12.8075 18.6924 12.6669 18.3535 12.6666 18V18ZM23.8802 18.0028L23.8664 18H17.9999C17.9974 17.1755 17.7397 16.372 17.2622 15.6998C16.7847 15.0275 16.1109 14.5196 15.3332 14.2457V9.99999C15.3332 9.64637 15.1928 9.30723 14.9427 9.05718C14.6927 8.80713 14.3535 8.66666 13.9999 8.66666C13.6463 8.66666 13.3071 8.80713 13.0571 9.05718C12.807 9.30723 12.6666 9.64637 12.6666 9.99999V14.2457C11.8889 14.5196 11.2151 15.0275 10.7376 15.6998C10.2601 16.372 10.0024 17.1755 9.9999 18H4.13337L4.11961 18.0028C3.7728 17.1471 3.53956 16.2496 3.42585 15.3333H4.66657C5.02019 15.3333 5.35933 15.1928 5.60937 14.9428C5.85942 14.6927 5.9999 14.3536 5.9999 14C5.9999 13.6464 5.85942 13.3072 5.60937 13.0572C5.35933 12.8071 5.02019 12.6667 4.66657 12.6667H3.42585C3.6641 10.7714 4.40997 8.97575 5.58462 7.46947L6.45758 8.34244C6.58138 8.46624 6.72835 8.56444 6.8901 8.63144C7.05185 8.69844 7.22521 8.73292 7.40029 8.73292C7.57537 8.73292 7.74873 8.69844 7.91048 8.63144C8.07223 8.56444 8.2192 8.46623 8.343 8.34244C8.4668 8.21864 8.565 8.07167 8.632 7.90992C8.699 7.74817 8.73348 7.5748 8.73348 7.39972C8.73348 7.22465 8.69899 7.05128 8.63199 6.88953C8.56499 6.72778 8.46679 6.58081 8.34299 6.45702L7.47011 5.58414C8.97629 4.40987 10.7717 3.66421 12.6666 3.42594V4.66666C12.6666 5.02028 12.807 5.35942 13.0571 5.60946C13.3071 5.85951 13.6463 5.99999 13.9999 5.99999C14.3535 5.99999 14.6927 5.85951 14.9427 5.60946C15.1928 5.35942 15.3332 5.02028 15.3332 4.66666V3.42594C17.2281 3.66421 19.0235 4.40987 20.5297 5.58414L19.6568 6.45702C19.4068 6.70704 19.2663 7.04614 19.2663 7.39972C19.2663 7.75331 19.4068 8.09241 19.6568 8.34244C19.9068 8.59246 20.2459 8.73292 20.5995 8.73292C20.9531 8.73292 21.2922 8.59246 21.5422 8.34244L22.4152 7.46947C23.5898 8.97575 24.3357 10.7714 24.574 12.6667H23.3332C22.9796 12.6667 22.6405 12.8071 22.3904 13.0572C22.1404 13.3072 21.9999 13.6464 21.9999 14C21.9999 14.3536 22.1404 14.6927 22.3904 14.9428C22.6405 15.1928 22.9796 15.3333 23.3332 15.3333H24.574C24.4602 16.2496 24.227 17.1471 23.8802 18.0028V18.0028Z" fill="currentColor"></path>
        </svg>
      </span>
      <div>
        <h2 class="mb-1 text-2xl font-bold">Product Analysis Dashboard</h2>
        <p class="text-sm text-gray-500 font-medium">Take care of your business. Achieve your goals and increase profits.</p>
      </div>
    </div>
    <div class="w-full lg:w-auto ml-auto px-3">
      <a class="inline-flex items-center py-2 px-3 mr-3 text-xs text-indigo-500 font-medium bg-indigo-50 hover:bg-indigo-100 rounded" href="#">
        <span class="inline-block mr-1">
          <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M14 9.33334C13.6 9.33334 13.3333 9.60001 13.3333 10V12.6667C13.3333 13.0667 13.0667 13.3333 12.6667 13.3333H3.33334C2.93334 13.3333 2.66668 13.0667 2.66668 12.6667V10C2.66668 9.60001 2.40001 9.33334 2.00001 9.33334C1.60001 9.33334 1.33334 9.60001 1.33334 10V12.6667C1.33334 13.8 2.20001 14.6667 3.33334 14.6667H12.6667C13.8 14.6667 14.6667 13.8 14.6667 12.6667V10C14.6667 9.60001 14.4 9.33334 14 9.33334ZM5.80001 5.13334L7.33334 3.60001V10C7.33334 10.4 7.60001 10.6667 8.00001 10.6667C8.40001 10.6667 8.66668 10.4 8.66668 10V3.60001L10.2 5.13334C10.4667 5.40001 10.8667 5.40001 11.1333 5.13334C11.4 4.86668 11.4 4.46668 11.1333 4.20001L8.46668 1.53334C8.20001 1.26668 7.80001 1.26668 7.53334 1.53334L4.86668 4.20001C4.60001 4.46668 4.60001 4.86668 4.86668 5.13334C5.13334 5.40001 5.53334 5.40001 5.80001 5.13334Z" fill="#8880EB"></path>
          </svg>
        </span>
        <span>Download</span>
      </a>
      <a class="inline-flex items-center py-2 px-3 mr-3 text-xs text-indigo-500 font-medium bg-indigo-50 hover:bg-indigo-100 rounded" href="#">
        <span class="inline-block mr-1">

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Product Analysis Dashboard Page Header with Action Buttons

A horizontal page header for a dashboard, showing an indigo app icon, bold title, muted subtitle, and three action buttons on the right: Download, Settings, and a filled Report button. The light background and compact single-row layout separate it from the content below.

Tailwind Component #2390

<section class="py-8 px-6">
  <div class="flex flex-wrap items-center">
    <div class="w-full lg:w-auto flex items-center mb-4 lg:mb-0">
      <h2 class="text-2xl font-bold">Project Name</h2>
      <span class="inline-block py-1 px-2 ml-2 rounded-full text-xs text-white bg-indigo-500">56 Total</span>
    </div>
    <div class="w-full md:w-1/2 lg:w-auto flex py-2 px-4 mb-4 md:mb-0 md:mr-4 md:ml-auto border rounded bg-white">
      <input class="text-sm placeholder-gray-500" type="text" placeholder="Type to search...">
      <button class="ml-auto">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.0921 16.9083L15.0004 13.8417C16.2005 12.3453 16.7817 10.4461 16.6244 8.53441C16.4672 6.62274 15.5835 4.84398 14.155 3.56386C12.7265 2.28375 10.8619 1.59958 8.94451 1.65205C7.02711 1.70452 5.20268 2.48963 3.84636 3.84594C2.49004 5.20226 1.70493 7.02669 1.65247 8.94409C1.6 10.8615 2.28416 12.7261 3.56428 14.1546C4.84439 15.583 6.62316 16.4668 8.53482 16.624C10.4465 16.7812 12.3457 16.2001 13.8421 15L16.9087 18.0667C16.9862 18.1448 17.0784 18.2068 17.1799 18.2491C17.2815 18.2914 17.3904 18.3132 17.5004 18.3132C17.6104 18.3132 17.7193 18.2914 17.8209 18.2491C17.9224 18.2068 18.0146 18.1448 18.0921 18.0667C18.2423 17.9113 18.3262 17.7036 18.3262 17.4875C18.3262 17.2714 18.2423 17.0637 18.0921 16.9083ZM9.16708 15C8.01335 15 6.88554 14.6579 5.92625 14.0169C4.96696 13.3759 4.21929 12.4649 3.77778 11.399C3.33627 10.3331 3.22075 9.16019 3.44583 8.02863C3.67091 6.89708 4.22648 5.85767 5.04229 5.04187C5.85809 4.22606 6.89749 3.67049 8.02905 3.44541C9.1606 3.22033 10.3335 3.33585 11.3994 3.77736C12.4653 4.21887 13.3763 4.96654 14.0173 5.92583C14.6583 6.88512 15.0004 8.01293 15.0004 9.16666C15.0004 10.7138 14.3858 12.1975 13.2919 13.2914C12.1979 14.3854 10.7142 15 9.16708 15Z" fill="#382CDD"></path>
        </svg>
      </button>
    </div>
    <a class="md:w-auto flex items-center py-2 px-4 rounded bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-medium" href="#">
      <span class="inline-block mr-1">
        <svg class="h-4 w-4 text-indigo-300" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.6667 1.33334H3.33333C2.19999 1.33334 1.33333 2.20001 1.33333 3.33334V12.6667C1.33333 13.8 2.19999 14.6667 3.33333 14.6667H12.6667C13.8 14.6667 14.6667 13.8 14.6667 12.6667V3.33334C14.6667 2.20001 13.8 1.33334 12.6667 1.33334ZM10.6667 8.66668H8.66666V10.6667C8.66666 11.0667 8.4 11.3333 8 11.3333C7.6 11.3333 7.33333 11.0667 7.33333 10.6667V8.66668H5.33333C4.93333 8.66668 4.66666 8.40001 4.66666 8.00001C4.66666 7.60001 4.93333 7.33334 5.33333 7.33334H7.33333V5.33334C7.33333 4.93334 7.6 4.66668 8 4.66668C8.4 4.66668 8.66666 4.93334 8.66666 5.33334V7.33334H10.6667C11.0667 7.33334 11.3333 7.60001 11.3333 8.00001C11.3333 8.40001 11.0667 8.66668 10.6667 8.66668Z" fill="currentColor"></path>
        </svg>
      </span>
      <span>Add Project</span>
    </a>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2391

<section class="py-8 px-6 bg-white">
  <div class="flex flex-wrap items-center">
    <div class="w-full lg:w-auto flex items-center mb-4 lg:mb-0">
      <h2 class="text-2xl font-bold">Project Name</h2>
      <span class="inline-block py-1 px-2 ml-2 rounded-full text-xs text-white bg-indigo-500">56 Total</span>
    </div>
    <div class="w-full md:w-1/2 lg:w-auto flex py-2 px-4 mb-4 md:mb-0 md:mr-4 md:ml-auto border rounded bg-white">
      <input class="text-sm placeholder-gray-500" type="text" placeholder="Type to search...">
      <button class="ml-auto">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.0921 16.9083L15.0004 13.8417C16.2005 12.3453 16.7817 10.4461 16.6244 8.53441C16.4672 6.62274 15.5835 4.84398 14.155 3.56386C12.7265 2.28375 10.8619 1.59958 8.94451 1.65205C7.02711 1.70452 5.20268 2.48963 3.84636 3.84594C2.49004 5.20226 1.70493 7.02669 1.65247 8.94409C1.6 10.8615 2.28416 12.7261 3.56428 14.1546C4.84439 15.583 6.62316 16.4668 8.53482 16.624C10.4465 16.7812 12.3457 16.2001 13.8421 15L16.9087 18.0667C16.9862 18.1448 17.0784 18.2068 17.1799 18.2491C17.2815 18.2914 17.3904 18.3132 17.5004 18.3132C17.6104 18.3132 17.7193 18.2914 17.8209 18.2491C17.9224 18.2068 18.0146 18.1448 18.0921 18.0667C18.2423 17.9113 18.3262 17.7036 18.3262 17.4875C18.3262 17.2714 18.2423 17.0637 18.0921 16.9083ZM9.16708 15C8.01335 15 6.88554 14.6579 5.92625 14.0169C4.96696 13.3759 4.21929 12.4649 3.77778 11.399C3.33627 10.3331 3.22075 9.16019 3.44583 8.02863C3.67091 6.89708 4.22648 5.85767 5.04229 5.04187C5.85809 4.22606 6.89749 3.67049 8.02905 3.44541C9.1606 3.22033 10.3335 3.33585 11.3994 3.77736C12.4653 4.21887 13.3763 4.96654 14.0173 5.92583C14.6583 6.88512 15.0004 8.01293 15.0004 9.16666C15.0004 10.7138 14.3858 12.1975 13.2919 13.2914C12.1979 14.3854 10.7142 15 9.16708 15Z" fill="#382CDD"></path>
        </svg>
      </button>
    </div>
    <a class="md:w-auto flex items-center py-2 px-4 rounded bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-medium" href="#">
      <span class="inline-block mr-1">
        <svg class="h-4 w-4 text-indigo-300" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M12.6667 1.33334H3.33333C2.19999 1.33334 1.33333 2.20001 1.33333 3.33334V12.6667C1.33333 13.8 2.19999 14.6667 3.33333 14.6667H12.6667C13.8 14.6667 14.6667 13.8 14.6667 12.6667V3.33334C14.6667 2.20001 13.8 1.33334 12.6667 1.33334ZM10.6667 8.66668H8.66666V10.6667C8.66666 11.0667 8.4 11.3333 8 11.3333C7.6 11.3333 7.33333 11.0667 7.33333 10.6667V8.66668H5.33333C4.93333 8.66668 4.66666 8.40001 4.66666 8.00001C4.66666 7.60001 4.93333 7.33334 5.33333 7.33334H7.33333V5.33334C7.33333 4.93334 7.6 4.66668 8 4.66668C8.4 4.66668 8.66666 4.93334 8.66666 5.33334V7.33334H10.6667C11.0667 7.33334 11.3333 7.60001 11.3333 8.00001C11.3333 8.40001 11.0667 8.66668 10.6667 8.66668Z" fill="currentColor"></path>
        </svg>
      </span>
      <span>Add Project</span>
    </a>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2392

<section class="py-8 px-6">
  <div class="flex flex-wrap items-center">
    <div class="flex items-center mb-5 lg:mb-0">
      <span class="inline-flex justify-center items-center w-16 h-16 mr-4 bg-indigo-500 rounded">
        <svg class="h-7 w-7 text-white" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M23.3328 5.66668H19.3328V4.33334C19.3328 3.27248 18.9114 2.25506 18.1612 1.50492C17.4111 0.754771 16.3937 0.333344 15.3328 0.333344H12.6661C11.6053 0.333344 10.5879 0.754771 9.83771 1.50492C9.08757 2.25506 8.66614 3.27248 8.66614 4.33334V5.66668H4.66614C3.60527 5.66668 2.58786 6.0881 1.83771 6.83825C1.08757 7.58839 0.666138 8.60581 0.666138 9.66668V21.6667C0.666138 22.7275 1.08757 23.745 1.83771 24.4951C2.58786 25.2452 3.60527 25.6667 4.66614 25.6667H23.3328C24.3937 25.6667 25.4111 25.2452 26.1612 24.4951C26.9114 23.745 27.3328 22.7275 27.3328 21.6667V9.66668C27.3328 8.60581 26.9114 7.58839 26.1612 6.83825C25.4111 6.0881 24.3937 5.66668 23.3328 5.66668ZM11.3328 4.33334C11.3328 3.97972 11.4733 3.64058 11.7233 3.39053C11.9734 3.14049 12.3125 3.00001 12.6661 3.00001H15.3328C15.6864 3.00001 16.0256 3.14049 16.2756 3.39053C16.5257 3.64058 16.6661 3.97972 16.6661 4.33334V5.66668H11.3328V4.33334ZM24.6661 21.6667C24.6661 22.0203 24.5257 22.3594 24.2756 22.6095C24.0256 22.8595 23.6864 23 23.3328 23H4.66614C4.31252 23 3.97338 22.8595 3.72333 22.6095C3.47328 22.3594 3.3328 22.0203 3.3328 21.6667V14.9333H7.33281V16.3333C7.33281 16.687 7.47328 17.0261 7.72333 17.2761C7.97338 17.5262 8.31252 17.6667 8.66614 17.6667C9.01976 17.6667 9.3589 17.5262 9.60895 17.2761C9.859 17.0261 9.99947 16.687 9.99947 16.3333V14.9333H17.9995V16.3333C17.9995 16.687 18.1399 17.0261 18.39 17.2761C18.64 17.5262 18.9792 17.6667 19.3328 17.6667C19.6864 17.6667 20.0256 17.5262 20.2756 17.2761C20.5257 17.0261 20.6661 16.687 20.6661 16.3333V14.9333H24.6661V21.6667ZM24.6661 12.3333H3.3328V9.66668C3.3328 9.31305 3.47328 8.97392 3.72333 8.72387C3.97338 8.47382 4.31252 8.33334 4.66614 8.33334H23.3328C23.6864 8.33334 24.0256 8.47382 24.2756 8.72387C24.5257 8.97392 24.6661 9.31305 24.6661 9.66668V12.3333Z" fill="currentColor"></path>
        </svg>
      </span>
      <div>
        <h2 class="mb-1 text-2xl font-bold">Product Name</h2>
        <p class="text-sm text-gray-500 font-medium">
          <span class="text-indigo-500">54</span>
          <span>Users involved in this product</span>
        </p>
      </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-auto flex pr-4 mb-4 md:mb-0 md:mr-4 md:ml-auto border rounded bg-white">
      <input class="py-2 pl-4 pr-2 text-sm placeholder-gray-500" type="text" placeholder="Type to search...">
      <button class="ml-auto">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.0921 16.9083L15.0004 13.8417C16.2005 12.3453 16.7817 10.4461 16.6244 8.53441C16.4672 6.62274 15.5835 4.84398 14.155 3.56386C12.7265 2.28375 10.8619 1.59958 8.94451 1.65205C7.02711 1.70452 5.20268 2.48963 3.84636 3.84594C2.49004 5.20226 1.70493 7.02669 1.65247 8.94409C1.6 10.8615 2.28416 12.7261 3.56428 14.1546C4.84439 15.583 6.62316 16.4668 8.53482 16.624C10.4465 16.7812 12.3457 16.2001 13.8421 15L16.9087 18.0667C16.9862 18.1448 17.0784 18.2068 17.1799 18.2491C17.2815 18.2914 17.3904 18.3132 17.5004 18.3132C17.6104 18.3132 17.7193 18.2914 17.8209 18.2491C17.9224 18.2068 18.0146 18.1448 18.0921 18.0667C18.2423 17.9113 18.3262 17.7036 18.3262 17.4875C18.3262 17.2714 18.2423 17.0637 18.0921 16.9083ZM9.16708 15C8.01335 15 6.88554 14.6579 5.92625 14.0169C4.96696 13.3759 4.21929 12.4649 3.77778 11.399C3.33627 10.3331 3.22075 9.16019 3.44583 8.02863C3.67091 6.89708 4.22648 5.85767 5.04229 5.04187C5.85809 4.22606 6.89749 3.67049 8.02905 3.44541C9.1606 3.22033 10.3335 3.33585 11.3994 3.77736C12.4653 4.21887 13.3763 4.96654 14.0173 5.92583C14.6583 6.88512 15.0004 8.01293 15.0004 9.16666C15.0004 10.7138 14.3858 12.1975 13.2919 13.2914C12.1979 14.3854 10.7142 15 9.16708 15Z" fill="#382CDD"></path>
        </svg>
      </button>
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2393

<section class="py-8 px-6 bg-white">
  <div class="flex flex-wrap items-center">
    <div class="flex items-center mb-5 lg:mb-0">
      <span class="inline-flex justify-center items-center w-16 h-16 mr-4 bg-indigo-500 rounded">
        <svg class="h-7 w-7 text-white" viewBox="0 0 28 26" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M23.3328 5.66668H19.3328V4.33334C19.3328 3.27248 18.9114 2.25506 18.1612 1.50492C17.4111 0.754771 16.3937 0.333344 15.3328 0.333344H12.6661C11.6053 0.333344 10.5879 0.754771 9.83771 1.50492C9.08757 2.25506 8.66614 3.27248 8.66614 4.33334V5.66668H4.66614C3.60527 5.66668 2.58786 6.0881 1.83771 6.83825C1.08757 7.58839 0.666138 8.60581 0.666138 9.66668V21.6667C0.666138 22.7275 1.08757 23.745 1.83771 24.4951C2.58786 25.2452 3.60527 25.6667 4.66614 25.6667H23.3328C24.3937 25.6667 25.4111 25.2452 26.1612 24.4951C26.9114 23.745 27.3328 22.7275 27.3328 21.6667V9.66668C27.3328 8.60581 26.9114 7.58839 26.1612 6.83825C25.4111 6.0881 24.3937 5.66668 23.3328 5.66668ZM11.3328 4.33334C11.3328 3.97972 11.4733 3.64058 11.7233 3.39053C11.9734 3.14049 12.3125 3.00001 12.6661 3.00001H15.3328C15.6864 3.00001 16.0256 3.14049 16.2756 3.39053C16.5257 3.64058 16.6661 3.97972 16.6661 4.33334V5.66668H11.3328V4.33334ZM24.6661 21.6667C24.6661 22.0203 24.5257 22.3594 24.2756 22.6095C24.0256 22.8595 23.6864 23 23.3328 23H4.66614C4.31252 23 3.97338 22.8595 3.72333 22.6095C3.47328 22.3594 3.3328 22.0203 3.3328 21.6667V14.9333H7.33281V16.3333C7.33281 16.687 7.47328 17.0261 7.72333 17.2761C7.97338 17.5262 8.31252 17.6667 8.66614 17.6667C9.01976 17.6667 9.3589 17.5262 9.60895 17.2761C9.859 17.0261 9.99947 16.687 9.99947 16.3333V14.9333H17.9995V16.3333C17.9995 16.687 18.1399 17.0261 18.39 17.2761C18.64 17.5262 18.9792 17.6667 19.3328 17.6667C19.6864 17.6667 20.0256 17.5262 20.2756 17.2761C20.5257 17.0261 20.6661 16.687 20.6661 16.3333V14.9333H24.6661V21.6667ZM24.6661 12.3333H3.3328V9.66668C3.3328 9.31305 3.47328 8.97392 3.72333 8.72387C3.97338 8.47382 4.31252 8.33334 4.66614 8.33334H23.3328C23.6864 8.33334 24.0256 8.47382 24.2756 8.72387C24.5257 8.97392 24.6661 9.31305 24.6661 9.66668V12.3333Z" fill="currentColor"></path>
        </svg>
      </span>
      <div>
        <h2 class="mb-1 text-2xl font-bold">Product Name</h2>
        <p class="text-sm text-gray-500 font-medium">
          <span class="text-indigo-500">54</span>
          <span>Users involved in this product</span>
        </p>
      </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-auto flex pr-4 mb-4 md:mb-0 md:mr-4 md:ml-auto border rounded bg-white">
      <input class="py-2 pl-4 pr-2 text-sm placeholder-gray-500" type="text" placeholder="Type to search...">
      <button class="ml-auto">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M18.0921 16.9083L15.0004 13.8417C16.2005 12.3453 16.7817 10.4461 16.6244 8.53441C16.4672 6.62274 15.5835 4.84398 14.155 3.56386C12.7265 2.28375 10.8619 1.59958 8.94451 1.65205C7.02711 1.70452 5.20268 2.48963 3.84636 3.84594C2.49004 5.20226 1.70493 7.02669 1.65247 8.94409C1.6 10.8615 2.28416 12.7261 3.56428 14.1546C4.84439 15.583 6.62316 16.4668 8.53482 16.624C10.4465 16.7812 12.3457 16.2001 13.8421 15L16.9087 18.0667C16.9862 18.1448 17.0784 18.2068 17.1799 18.2491C17.2815 18.2914 17.3904 18.3132 17.5004 18.3132C17.6104 18.3132 17.7193 18.2914 17.8209 18.2491C17.9224 18.2068 18.0146 18.1448 18.0921 18.0667C18.2423 17.9113 18.3262 17.7036 18.3262 17.4875C18.3262 17.2714 18.2423 17.0637 18.0921 16.9083ZM9.16708 15C8.01335 15 6.88554 14.6579 5.92625 14.0169C4.96696 13.3759 4.21929 12.4649 3.77778 11.399C3.33627 10.3331 3.22075 9.16019 3.44583 8.02863C3.67091 6.89708 4.22648 5.85767 5.04229 5.04187C5.85809 4.22606 6.89749 3.67049 8.02905 3.44541C9.1606 3.22033 10.3335 3.33585 11.3994 3.77736C12.4653 4.21887 13.3763 4.96654 14.0173 5.92583C14.6583 6.88512 15.0004 8.01293 15.0004 9.16666C15.0004 10.7138 14.3858 12.1975 13.2919 13.2914C12.1979 14.3854 10.7142 15 9.16708 15Z" fill="#382CDD"></path>
        </svg>
      </button>
    </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2394

<section class="py-8 px-6">
  <div class="flex flex-wrap items-center">
    <div class="mb-5 lg:mb-0">
      <h2 class="mb-1 text-2xl font-bold">Statistics</h2>
      <div class="flex items-center">
        <a class="flex items-center text-sm text-gray-500" href="#">
          <span class="inline-block mr-2">
            <svg class="h-4 w-4 text-gray-500" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.6666 5.66667L9.66662 1.28333C9.20827 0.873372 8.6149 0.646725 7.99996 0.646725C7.38501 0.646725 6.79164 0.873372 6.33329 1.28333L1.33329 5.66667C1.0686 5.9034 0.857374 6.1938 0.713683 6.51854C0.569993 6.84328 0.497134 7.1949 0.499957 7.55V14.8333C0.499957 15.4964 0.763349 16.1323 1.23219 16.6011C1.70103 17.0699 2.33692 17.3333 2.99996 17.3333H13C13.663 17.3333 14.2989 17.0699 14.7677 16.6011C15.2366 16.1323 15.5 15.4964 15.5 14.8333V7.54167C15.5016 7.18797 15.4282 6.83795 15.2845 6.51474C15.1409 6.19152 14.9303 5.90246 14.6666 5.66667V5.66667ZM9.66662 15.6667H6.33329V11.5C6.33329 11.279 6.42109 11.067 6.57737 10.9107C6.73365 10.7545 6.94561 10.6667 7.16662 10.6667H8.83329C9.0543 10.6667 9.26626 10.7545 9.42255 10.9107C9.57883 11.067 9.66662 11.279 9.66662 11.5V15.6667ZM13.8333 14.8333C13.8333 15.0543 13.7455 15.2663 13.5892 15.4226C13.4329 15.5789 13.221 15.6667 13 15.6667H11.3333V11.5C11.3333 10.837 11.0699 10.2011 10.6011 9.73223C10.1322 9.26339 9.49633 9 8.83329 9H7.16662C6.50358 9 5.8677 9.26339 5.39886 9.73223C4.93002 10.2011 4.66662 10.837 4.66662 11.5V15.6667H2.99996C2.77894 15.6667 2.56698 15.5789 2.4107 15.4226C2.25442 15.2663 2.16662 15.0543 2.16662 14.8333V7.54167C2.16677 7.42335 2.19212 7.30641 2.24097 7.19865C2.28982 7.09089 2.36107 6.99476 2.44996 6.91667L7.44996 2.54167C7.60203 2.40807 7.79753 2.33439 7.99996 2.33439C8.20238 2.33439 8.39788 2.40807 8.54996 2.54167L13.55 6.91667C13.6388 6.99476 13.7101 7.09089 13.7589 7.19865C13.8078 7.30641 13.8331 7.42335 13.8333 7.54167V14.8333Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>Start</span>
        </a>
        <span class="inline-block mx-4">
          <svg class="h-2 w-2 text-gray-500" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.23242 9.3689C1.06762 9.36887 0.906542 9.31997 0.769534 9.2284C0.632526 9.13683 0.525742 9.0067 0.462684 8.85445C0.399625 8.7022 0.383124 8.53467 0.415263 8.37304C0.447403 8.21141 0.526741 8.06294 0.643249 7.9464L3.58916 5L0.643224 2.05364C0.486959 1.89737 0.399171 1.68543 0.39917 1.46444C0.399169 1.24345 0.486957 1.03151 0.64322 0.875249C0.799483 0.718985 1.01142 0.631196 1.23241 0.631195C1.4534 0.631194 1.66534 0.718982 1.82161 0.875245L5.35676 4.41084C5.43416 4.48819 5.49556 4.58005 5.53745 4.68114C5.57934 4.78224 5.6009 4.8906 5.6009 5.00003C5.6009 5.10946 5.57934 5.21782 5.53745 5.31891C5.49556 5.42001 5.43416 5.51186 5.35676 5.58922L1.82161 9.12478C1.74432 9.20229 1.65249 9.26375 1.55137 9.30564C1.45026 9.34754 1.34186 9.36903 1.23242 9.3689Z" fill="currentColor"></path>
          </svg>
        </span>
        <a class="flex items-center text-sm" href="#">
          <span class="inline-block mr-2">
            <svg class="h-4 w-4 text-indigo-500" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99992 10.8333H1.66659C1.44557 10.8333 1.23361 10.9211 1.07733 11.0774C0.921049 11.2337 0.833252 11.4457 0.833252 11.6667V18.3333C0.833252 18.5544 0.921049 18.7663 1.07733 18.9226C1.23361 19.0789 1.44557 19.1667 1.66659 19.1667H4.99992C5.22093 19.1667 5.43289 19.0789 5.58917 18.9226C5.74545 18.7663 5.83325 18.5544 5.83325 18.3333V11.6667C5.83325 11.4457 5.74545 11.2337 5.58917 11.0774C5.43289 10.9211 5.22093 10.8333 4.99992 10.8333ZM4.16658 17.5H2.49992V12.5H4.16658V17.5ZM18.3333 7.50001H14.9999C14.7789 7.50001 14.5669 7.5878 14.4107 7.74408C14.2544 7.90036 14.1666 8.11233 14.1666 8.33334V18.3333C14.1666 18.5544 14.2544 18.7663 14.4107 18.9226C14.5669 19.0789 14.7789 19.1667 14.9999 19.1667H18.3333C18.5543 19.1667 18.7662 19.0789 18.9225 18.9226C19.0788 18.7663 19.1666 18.5544 19.1666 18.3333V8.33334C19.1666 8.11233 19.0788 7.90036 18.9225 7.74408C18.7662 7.5878 18.5543 7.50001 18.3333 7.50001ZM17.4999 17.5H15.8333V9.16667H17.4999V17.5ZM11.6666 0.83334H8.33325C8.11224 0.83334 7.90028 0.921137 7.744 1.07742C7.58772 1.2337 7.49992 1.44566 7.49992 1.66667V18.3333C7.49992 18.5544 7.58772 18.7663 7.744 18.9226C7.90028 19.0789 8.11224 19.1667 8.33325 19.1667H11.6666C11.8876 19.1667 12.0996 19.0789 12.2558 18.9226C12.4121 18.7663 12.4999 18.5544 12.4999 18.3333V1.66667C12.4999 1.44566 12.4121 1.2337 12.2558 1.07742C12.0996 0.921137 11.8876 0.83334 11.6666 0.83334ZM10.8333 17.5H9.16658V2.50001H10.8333V17.5Z" fill="currentColor"></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

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

Tailwind Component #2395

<section class="py-8 px-6 bg-white">
  <div class="flex flex-wrap items-center">
    <div class="mb-5 lg:mb-0">
      <h2 class="mb-1 text-2xl font-bold">Statistics</h2>
      <div class="flex items-center">
        <a class="flex items-center text-sm text-gray-500" href="#">
          <span class="inline-block mr-2">
            <svg class="h-4 w-4 text-gray-500" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.6666 5.66667L9.66662 1.28333C9.20827 0.873372 8.6149 0.646725 7.99996 0.646725C7.38501 0.646725 6.79164 0.873372 6.33329 1.28333L1.33329 5.66667C1.0686 5.9034 0.857374 6.1938 0.713683 6.51854C0.569993 6.84328 0.497134 7.1949 0.499957 7.55V14.8333C0.499957 15.4964 0.763349 16.1323 1.23219 16.6011C1.70103 17.0699 2.33692 17.3333 2.99996 17.3333H13C13.663 17.3333 14.2989 17.0699 14.7677 16.6011C15.2366 16.1323 15.5 15.4964 15.5 14.8333V7.54167C15.5016 7.18797 15.4282 6.83795 15.2845 6.51474C15.1409 6.19152 14.9303 5.90246 14.6666 5.66667V5.66667ZM9.66662 15.6667H6.33329V11.5C6.33329 11.279 6.42109 11.067 6.57737 10.9107C6.73365 10.7545 6.94561 10.6667 7.16662 10.6667H8.83329C9.0543 10.6667 9.26626 10.7545 9.42255 10.9107C9.57883 11.067 9.66662 11.279 9.66662 11.5V15.6667ZM13.8333 14.8333C13.8333 15.0543 13.7455 15.2663 13.5892 15.4226C13.4329 15.5789 13.221 15.6667 13 15.6667H11.3333V11.5C11.3333 10.837 11.0699 10.2011 10.6011 9.73223C10.1322 9.26339 9.49633 9 8.83329 9H7.16662C6.50358 9 5.8677 9.26339 5.39886 9.73223C4.93002 10.2011 4.66662 10.837 4.66662 11.5V15.6667H2.99996C2.77894 15.6667 2.56698 15.5789 2.4107 15.4226C2.25442 15.2663 2.16662 15.0543 2.16662 14.8333V7.54167C2.16677 7.42335 2.19212 7.30641 2.24097 7.19865C2.28982 7.09089 2.36107 6.99476 2.44996 6.91667L7.44996 2.54167C7.60203 2.40807 7.79753 2.33439 7.99996 2.33439C8.20238 2.33439 8.39788 2.40807 8.54996 2.54167L13.55 6.91667C13.6388 6.99476 13.7101 7.09089 13.7589 7.19865C13.8078 7.30641 13.8331 7.42335 13.8333 7.54167V14.8333Z" fill="currentColor"></path>
            </svg>
          </span>
          <span>Start</span>
        </a>
        <span class="inline-block mx-4">
          <svg class="h-2 w-2 text-gray-500" viewBox="0 0 6 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M1.23242 9.3689C1.06762 9.36887 0.906542 9.31997 0.769534 9.2284C0.632526 9.13683 0.525742 9.0067 0.462684 8.85445C0.399625 8.7022 0.383124 8.53467 0.415263 8.37304C0.447403 8.21141 0.526741 8.06294 0.643249 7.9464L3.58916 5L0.643224 2.05364C0.486959 1.89737 0.399171 1.68543 0.39917 1.46444C0.399169 1.24345 0.486957 1.03151 0.64322 0.875249C0.799483 0.718985 1.01142 0.631196 1.23241 0.631195C1.4534 0.631194 1.66534 0.718982 1.82161 0.875245L5.35676 4.41084C5.43416 4.48819 5.49556 4.58005 5.53745 4.68114C5.57934 4.78224 5.6009 4.8906 5.6009 5.00003C5.6009 5.10946 5.57934 5.21782 5.53745 5.31891C5.49556 5.42001 5.43416 5.51186 5.35676 5.58922L1.82161 9.12478C1.74432 9.20229 1.65249 9.26375 1.55137 9.30564C1.45026 9.34754 1.34186 9.36903 1.23242 9.3689Z" fill="currentColor"></path>
          </svg>
        </span>
        <a class="flex items-center text-sm" href="#">
          <span class="inline-block mr-2">
            <svg class="h-4 w-4 text-indigo-500" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M4.99992 10.8333H1.66659C1.44557 10.8333 1.23361 10.9211 1.07733 11.0774C0.921049 11.2337 0.833252 11.4457 0.833252 11.6667V18.3333C0.833252 18.5544 0.921049 18.7663 1.07733 18.9226C1.23361 19.0789 1.44557 19.1667 1.66659 19.1667H4.99992C5.22093 19.1667 5.43289 19.0789 5.58917 18.9226C5.74545 18.7663 5.83325 18.5544 5.83325 18.3333V11.6667C5.83325 11.4457 5.74545 11.2337 5.58917 11.0774C5.43289 10.9211 5.22093 10.8333 4.99992 10.8333ZM4.16658 17.5H2.49992V12.5H4.16658V17.5ZM18.3333 7.50001H14.9999C14.7789 7.50001 14.5669 7.5878 14.4107 7.74408C14.2544 7.90036 14.1666 8.11233 14.1666 8.33334V18.3333C14.1666 18.5544 14.2544 18.7663 14.4107 18.9226C14.5669 19.0789 14.7789 19.1667 14.9999 19.1667H18.3333C18.5543 19.1667 18.7662 19.0789 18.9225 18.9226C19.0788 18.7663 19.1666 18.5544 19.1666 18.3333V8.33334C19.1666 8.11233 19.0788 7.90036 18.9225 7.74408C18.7662 7.5878 18.5543 7.50001 18.3333 7.50001ZM17.4999 17.5H15.8333V9.16667H17.4999V17.5ZM11.6666 0.83334H8.33325C8.11224 0.83334 7.90028 0.921137 7.744 1.07742C7.58772 1.2337 7.49992 1.44566 7.49992 1.66667V18.3333C7.49992 18.5544 7.58772 18.7663 7.744 18.9226C7.90028 19.0789 8.11224 19.1667 8.33325 19.1667H11.6666C11.8876 19.1667 12.0996 19.0789 12.2558 18.9226C12.4121 18.7663 12.4999 18.5544 12.4999 18.3333V1.66667C12.4999 1.44566 12.4121 1.2337 12.2558 1.07742C12.0996 0.921137 11.8876 0.83334 11.6666 0.83334ZM10.8333 17.5H9.16658V2.50001H10.8333V17.5Z" fill="currentColor"></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

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

Tailwind Component #2396

<section class="pt-8 px-6" x-data="{ tab: ''}" x-init="tab = $refs.tab1.textContent">
  <h2 class="mb-4 text-2xl font-bold">Project Name</h2>
  <div class="flex flex-wrap text-sm text-center">
    <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{ 'text-indigo-500 border-indigo-500': tab == $refs.tab1.textContent, 'text-gray-300 hover:border-gray-300 border-transparent': tab != $refs.tab1.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto mb-4 lg:mb-0 px-4 pb-2 border-b-2 border-indigo-500 text-indigo-500" href="#">General</a>
    <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{ 'text-indigo-500 border-indigo-500': tab == $refs.tab2.textContent, 'text-gray-300 border-transparent': tab != $refs.tab2.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto mb-4 lg:mb-0 px-4 pb-2 text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Customers</a>
    <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{ 'text-indigo-500 border-indigo-500': tab == $refs.tab3.textContent, 'text-gray-300 border-transparent': tab != $refs.tab3.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto mb-4 lg:mb-0 px-4 pb-2 text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Sales</a>
    <a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" :class="{ 'text-indigo-500 border-indigo-500': tab == $refs.tab4.textContent, 'text-gray-300 border-transparent': tab != $refs.tab4.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto px-4 pb-2 text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Returns</a>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2397

<section class="pt-8 px-6 bg-white" x-data="{ tab: ''}" x-init="tab = $refs.tab1.textContent">
  <h2 class="mb-4 text-2xl font-bold">Project Name</h2>
  <div class="flex flex-wrap text-sm text-center">
    <a x-ref="tab1" x-on:click.prevent="tab = $refs.tab1.textContent" :class="{ 'text-indigo-500 border-indigo-500': tab == $refs.tab1.textContent, 'text-gray-300 hover:border-gray-300 border-transparent': tab != $refs.tab1.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto mb-4 lg:mb-0 px-4 pb-2 border-b-2 border-indigo-500 text-indigo-500" href="#">General</a>
    <a x-ref="tab2" x-on:click.prevent="tab = $refs.tab2.textContent" :class="{ 'text-indigo-500 border-indigo-500': tab == $refs.tab2.textContent, 'text-gray-300 border-transparent': tab != $refs.tab2.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto mb-4 lg:mb-0 px-4 pb-2 text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Customers</a>
    <a x-ref="tab3" x-on:click.prevent="tab = $refs.tab3.textContent" :class="{ 'text-indigo-500 border-indigo-500': tab == $refs.tab3.textContent, 'text-gray-300 border-transparent': tab != $refs.tab3.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto mb-4 lg:mb-0 px-4 pb-2 text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Sales</a>
    <a x-ref="tab4" x-on:click.prevent="tab = $refs.tab4.textContent" :class="{ 'text-indigo-500 border-indigo-500': tab == $refs.tab4.textContent, 'text-gray-300 border-transparent': tab != $refs.tab4.textContent }" class="inline-block w-full md:w-1/2 lg:w-auto px-4 pb-2 text-gray-300 border-b-2 border-transparent hover:border-gray-300" href="#">Returns</a>
  </div>
</section>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2398

<div class="py-8 px-6">
  <div class="container px-4 mx-auto">
    <h2 class="text-2xl font-bold">Welcome, John Smith 👋</h2>
  </div>
</div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2399

<div class="py-8 px-6 bg-white">
  <div class="container px-4 mx-auto">
    <h2 class="text-2xl font-bold">Welcome, John Smith 👋</h2>
  </div>
</div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2400