Tailwind CSS Components

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-white border-l-4 border-green-500 shadow-md rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-green-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-green-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
    <div class="pr-6">
      <p class="text-sm text-green-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </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

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

Tailwind Component #2702

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-white border-l-4 border-gray-500 shadow-md rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-gray-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-gray-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
    <div class="pr-6">
      <p class="text-sm text-gray-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </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

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

Tailwind Component #2703

<section class="py-8" x-data="{ activeSlide: 1 }">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-stretch -m-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="bg-white shadow rounded overflow-hidden">
          <div class="pt-6 px-6 mb-8">
            <div class="flex mb-8 justify-between items-center">
              <p class="text-sm text-gray-500">Important information</p>
              <div>
                <button x-on:click="activeSlide = 1" class="inline-block w-2 h-2 mr-3 rounded-full bg-indigo-500" :class="{'bg-indigo-500': activeSlide == 1, 'bg-gray-100': activeSlide != 1 }"></button>
                <button x-on:click="activeSlide = 2" class="inline-block w-2 h-2 mr-3 rounded-full bg-gray-100" :class="{'bg-indigo-500': activeSlide == 2, 'bg-gray-100': activeSlide != 2 }"></button>
                <button x-on:click="activeSlide = 3" class="inline-block w-2 h-2 mr-3 rounded-full bg-gray-100" :class="{'bg-indigo-500': activeSlide == 3, 'bg-gray-100': activeSlide != 3 }"></button>
                <button x-on:click="activeSlide = 4" class="inline-block w-2 h-2 rounded-full bg-gray-100" :class="{'bg-indigo-500': activeSlide == 4, 'bg-gray-100': activeSlide != 4 }"></button>
              </div>
            </div>
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="mb-8 whitespace-nowrap transition-transform duration-500 ease-in-out">
                    <div class="inline-block w-full whitespace-normal">
                        <h3 class="mb-2 text-xl font-bold">Event for your team members</h3>
                        <p class="text-sm text-gray-500">You have been invited to join this event. It is only for team members.</p>
                    </div>
                    <div class="visibility-item inline-block w-full whitespace-normal">
                        <h3 class="mb-2 text-xl font-bold">Exclusive Team Building Experience</h3>
                        <p class="text-sm text-gray-500">An Invitation Reserved for Our Valued Team Members</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2704

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-white border-l-4 border-red-500 shadow-md rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-red-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-red-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
    <div class="pr-6">
      <p class="text-sm text-red-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </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

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

Tailwind Component #2705

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-white border-l-4 border-indigo-500 shadow-md rounded-r-lg">
    <div class="flex items-center mb-2">
      <h3 class="text-indigo-800 font-medium">Example for Banner</h3>
      <button x-on:click="modal = false" class="ml-auto">
        <svg class="text-indigo-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
        </svg>
      </button>
    </div>
    <div class="pr-6">
      <p class="text-sm text-indigo-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
    </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

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

Tailwind Component #2706

<section class="py-5 px-6 bg-white shadow">
  <nav class="relative">
    <div class="flex items-center">
      <div class="flex items-center mr-auto">
        <button class="flex items-center">
          <span class="flex justify-center items-center mr-3 w-10 h-10 bg-indigo-500 text-sm text-white rounded-full">EP</span>
          <p class="text-sm font-medium mr-2">Example Project</p>
          <span class="inline-block -mb-px">
            <svg class="text-gray-500" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M10.8596 9.52667L7.99958 12.3933L5.13958 9.52667C5.01404 9.40114 4.84378 9.33061 4.66624 9.33061C4.48871 9.33061 4.31845 9.40114 4.19291 9.52667C4.06738 9.65221 3.99685 9.82247 3.99685 10C3.99685 10.1775 4.06738 10.3478 4.19291 10.4733L7.52624 13.8067C7.65115 13.9308 7.82012 14.0005 7.99624 14.0005C8.17237 14.0005 8.34134 13.9308 8.46624 13.8067L11.7996 10.4733C11.8617 10.4112 11.911 10.3374 11.9447 10.2562C11.9783 10.175 11.9956 10.0879 11.9956 10C11.9956 9.9121 11.9783 9.82505 11.9447 9.74384C11.911 9.66262 11.8617 9.58883 11.7996 9.52667C11.7374 9.46451 11.6636 9.41521 11.5824 9.38157C11.5012 9.34793 11.4142 9.33061 11.3262 9.33061C11.2383 9.33061 11.1513 9.34793 11.0701 9.38157C10.9889 9.41521 10.9151 9.46451 10.8529 9.52667H10.8596ZM5.13958 6.47334L7.99958 3.60667L10.8596 6.47334C10.9845 6.59751 11.1535 6.6672 11.3296 6.6672C11.5057 6.6672 11.6747 6.59751 11.7996 6.47334C11.9237 6.34843 11.9934 6.17946 11.9934 6.00334C11.9934 5.82722 11.9237 5.65825 11.7996 5.53334L8.46624 2.20001C8.40427 2.13752 8.33053 2.08792 8.2493 2.05408C8.16806 2.02023 8.08092 2.00281 7.99291 2.00281C7.9049 2.00281 7.81777 2.02023 7.73653 2.05408C7.65529 2.08792 7.58155 2.13752 7.51958 2.20001L4.18624 5.53334C4.06159 5.65976 3.99227 5.83052 3.99352 6.00805C3.99477 6.18559 4.06649 6.35535 4.19291 6.48001C4.31933 6.60466 4.49009 6.67398 4.66762 6.67273C4.84516 6.67148 5.01493 6.59976 5.13958 6.47334Z" fill="currentColor"></path>
            </svg>
          </span>
        </button>
      </div>
      <div class="ml-auto lg:hidden">
        <button class="flex items-center">
          <svg class="text-indigo-500 bg-indigo-100 block h-8 w-8 p-2 rounded" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" fill="currentColor">
            <title>Mobile menu</title>
            <path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"></path>
          </svg>
        </button>
      </div>
      <ul class="hidden lg:flex items-center space-x-6 mr-6">
        <li>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2707

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-stretch -m-4">
      <div class="w-full lg:w-1/2 p-4">
        <div class="h-full flex flex-col justify-between bg-white shadow rounded overflow-hidden">
          <div x-data="{ activeSlide: 1 }" class="pt-6 px-6 mb-8">
            <div class="flex mb-8 justify-between items-center">
              <p class="text-sm text-gray-500">Important information</p>
              <div>
                <button x-on:click="activeSlide = 1" class="inline-block w-2 h-2 mr-3 rounded-full bg-indigo-500" :class="{'bg-indigo-500': activeSlide == 1, 'bg-gray-100': activeSlide != 1 }"></button>
                <button x-on:click="activeSlide = 2" class="inline-block w-2 h-2 mr-3 rounded-full bg-gray-100" :class="{'bg-indigo-500': activeSlide == 2, 'bg-gray-100': activeSlide != 2 }"></button>
                <button x-on:click="activeSlide = 3" class="inline-block w-2 h-2 mr-3 rounded-full bg-gray-100" :class="{'bg-indigo-500': activeSlide == 3, 'bg-gray-100': activeSlide != 3 }"></button>
                <button x-on:click="activeSlide = 4" class="inline-block w-2 h-2 rounded-full bg-gray-100" :class="{'bg-indigo-500': activeSlide == 4, 'bg-gray-100': activeSlide != 4 }"></button>
              </div>
            </div>
            <div class="overflow-hidden">
                <div :style="'transform: translateX(-' + (activeSlide - 1) * 100.5 + '%)'" class="mb-8 whitespace-nowrap transition-transform duration-500 ease-in-out">
                    <div class="inline-block w-full whitespace-normal">
                        <h3 class="mb-2 text-xl font-bold">Event for your team members</h3>
                        <p class="text-sm text-gray-500">You have been invited to join this event. It is only for team members.</p>
                    </div>
                    <div class="visibility-item inline-block w-full whitespace-normal">
                        <h3 class="mb-2 text-xl font-bold">Exclusive Team Building Experience</h3>
                        <p class="text-sm text-gray-500">An Invitation Reserved for Our Valued Team Members</p>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2708

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="flex flex-wrap items-center mb-6">
      <h3 class="text-xl font-bold">Files from Project Example</h3>
      <div class="w-full md:w-auto my-6 md:my-0 flex items-center ml-auto mr-4 pr-4 bg-white border rounded">
        <input class="pl-2 py-3 text-sm text-gray-200" type="text" placeholder="Type to search...">
        <button class="ml-2 text-gray-200 hover:text-gray-300">
          <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.0923 15.9083L14.0007 12.8417C15.2007 11.3453 15.7819 9.44607 15.6247 7.53441C15.4674 5.62274 14.5837 3.84397 13.1553 2.56386C11.7268 1.28374 9.86216 0.599581 7.94476 0.652048C6.02735 0.704515 4.20292 1.48962 2.8466 2.84594C1.49029 4.20226 0.705178 6.02669 0.652711 7.94409C0.600244 9.8615 1.28441 11.7261 2.56452 13.1546C3.84464 14.583 5.6234 15.4668 7.53507 15.624C9.44673 15.7812 11.346 15.2001 12.8423 14L15.909 17.0667C15.9865 17.1448 16.0786 17.2068 16.1802 17.2491C16.2817 17.2914 16.3906 17.3132 16.5007 17.3132C16.6107 17.3132 16.7196 17.2914 16.8211 17.2491C16.9227 17.2068 17.0148 17.1448 17.0923 17.0667C17.2425 16.9113 17.3265 16.7036 17.3265 16.4875C17.3265 16.2714 17.2425 16.0637 17.0923 15.9083ZM8.16732 14C7.0136 14 5.88578 13.6579 4.92649 13.0169C3.96721 12.3759 3.21953 11.4649 2.77802 10.399C2.33651 9.33307 2.22099 8.16019 2.44607 7.02863C2.67115 5.89707 3.22672 4.85767 4.04253 4.04187C4.85834 3.22606 5.89774 2.67049 7.02929 2.44541C8.16085 2.22033 9.33374 2.33585 10.3996 2.77736C11.4655 3.21887 12.3766 3.96654 13.0176 4.92583C13.6585 5.88512 14.0007 7.01293 14.0007 8.16666C14.0007 9.71375 13.3861 11.1975 12.2921 12.2914C11.1981 13.3854 9.71442 14 8.16732 14Z" fill="#382CDD"></path>
          </svg>
        </button>
      </div>
      <a class="flex items-center py-2 px-4 mr-3 bg-indigo-500 hover:bg-indigo-600 rounded text-xs text-white transition duration-200" href="#">
        <span class="mr-1">
          <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M11.3333 15.6667H4.66667C4.00363 15.6667 3.36774 15.4033 2.8989 14.9344C2.43006 14.4656 2.16667 13.8297 2.16667 13.1667V4.83333C2.16667 4.61232 2.07887 4.40036 1.92259 4.24408C1.76631 4.0878 1.55435 4 1.33333 4C1.11232 4 0.900358 4.0878 0.744078 4.24408C0.587797 4.40036 0.5 4.61232 0.5 4.83333V13.1667C0.5 14.2717 0.938987 15.3315 1.72039 16.1129C2.50179 16.8943 3.5616 17.3333 4.66667 17.3333H11.3333C11.5543 17.3333 11.7663 17.2455 11.9226 17.0893C12.0789 16.933 12.1667 16.721 12.1667 16.5C12.1667 16.279 12.0789 16.067 11.9226 15.9107C11.7663 15.7545 11.5543 15.6667 11.3333 15.6667ZM6.33333 9.83333C6.33333 10.0543 6.42113 10.2663 6.57741 10.4226C6.73369 10.5789 6.94565 10.6667 7.16667 10.6667H11.3333C11.5543 10.6667 11.7663 10.5789 11.9226 10.4226C12.0789 10.2663 12.1667 10.0543 12.1667 9.83333C12.1667 9.61232 12.0789 9.40036 11.9226 9.24408C11.7663 9.0878 11.5543 9 11.3333 9H7.16667C6.94565 9 6.73369 9.0878 6.57741 9.24408C6.42113 9.40036 6.33333 9.61232 6.33333 9.83333ZM15.5 6.45C15.4913 6.37344 15.4746 6.29802 15.45 6.225V6.15C15.4099 6.06431 15.3565 5.98555 15.2917 5.91666V5.91666L10.2917 0.916664C10.2228 0.851844 10.144 0.798398 10.0583 0.758331C10.0335 0.754798 10.0082 0.754798 9.98333 0.758331C9.89868 0.709782 9.80519 0.678618 9.70833 0.666664H6.33333C5.67029 0.666664 5.03441 0.930056 4.56557 1.3989C4.09673 1.86774 3.83333 2.50362 3.83333 3.16666V11.5C3.83333 12.163 4.09673 12.7989 4.56557 13.2678C5.03441 13.7366 5.67029 14 6.33333 14H13C13.663 14 14.2989 13.7366 14.7678 13.2678C15.2366 12.7989 15.5 12.163 15.5 11.5V6.5C15.5 6.5 15.5 6.5 15.5 6.45ZM10.5 3.50833L12.6583 5.66666H11.3333C11.1123 5.66666 10.9004 5.57887 10.7441 5.42259C10.5878 5.26631 10.5 5.05434 10.5 4.83333V3.50833ZM13.8333 11.5C13.8333 11.721 13.7455 11.933 13.5893 12.0893C13.433 12.2455 13.221 12.3333 13 12.3333H6.33333C6.11232 12.3333 5.90036 12.2455 5.74408 12.0893C5.5878 11.933 5.5 11.721 5.5 11.5V3.16666C5.5 2.94565 5.5878 2.73369 5.74408 2.57741C5.90036 2.42113 6.11232 2.33333 6.33333 2.33333H8.83333V4.83333C8.83559 5.11762 8.88631 5.39944 8.98333 5.66666H7.16667C6.94565 5.66666 6.73369 5.75446 6.57741 5.91074C6.42113 6.06702 6.33333 6.27898 6.33333 6.5C6.33333 6.72101 6.42113 6.93297 6.57741 7.08925C6.73369 7.24553 6.94565 7.33333 7.16667 7.33333H13.8333V11.5Z" fill="#8880EB"></path>
          </svg>
        </span>
        <span>Team file</span>
      </a>
      <div class="flex items-center">
        <a class="flex items-center justify-center mr-3 w-10 h-10 bg-white rounded text-gray-100 hover:text-indigo-500" href="#">
          <svg width="18" height="10" viewBox="0 0 18 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M2.0917 8.575C2.01244 8.49913 1.91899 8.43966 1.8167 8.4C1.61381 8.31665 1.38625 8.31665 1.18336 8.4C1.08107 8.43966 0.987617 8.49913 0.908364 8.575C0.832497 8.65425 0.773026 8.74771 0.733364 8.85C0.669548 9.00176 0.652113 9.16902 0.683258 9.33068C0.714403 9.49234 0.792733 9.64115 0.908364 9.75833C0.989365 9.83194 1.08238 9.89113 1.18336 9.93333C1.28311 9.97742 1.39097 10.0002 1.50003 10.0002C1.60909 10.0002 1.71695 9.97742 1.8167 9.93333C1.91769 9.89113 2.0107 9.83194 2.0917 9.75833C2.20733 9.64115 2.28566 9.49234 2.3168 9.33068C2.34795 9.16902 2.33051 9.00176 2.2667 8.85C2.22704 8.74771 2.16756 8.65425 2.0917 8.575ZM4.83336 1.66667H16.5C16.721 1.66667 16.933 1.57887 17.0893 1.42259C17.2456 1.26631 17.3334 1.05435 17.3334 0.833333C17.3334 0.61232 17.2456 0.400358 17.0893 0.244078C16.933 0.0877975 16.721 0 16.5 0H4.83336C4.61235 0 4.40039 0.0877975 4.24411 0.244078C4.08783 0.400358 4.00003 0.61232 4.00003 0.833333C4.00003 1.05435 4.08783 1.26631 4.24411 1.42259C4.40039 1.57887 4.61235 1.66667 4.83336 1.66667ZM2.0917 4.40833C1.97451 4.2927 1.8257 4.21437 1.66404 4.18323C1.50238 4.15208 1.33512 4.16952 1.18336 4.23333C1.08238 4.27554 0.989365 4.33472 0.908364 4.40833C0.832497 4.48759 0.773026 4.58104 0.733364 4.68333C0.689277 4.78308 0.666504 4.89094 0.666504 5C0.666504 5.10906 0.689277 5.21692 0.733364 5.31667C0.775566 5.41765 0.834755 5.51067 0.908364 5.59167C0.989365 5.66528 1.08238 5.72447 1.18336 5.76667C1.28311 5.81075 1.39097 5.83353 1.50003 5.83353C1.60909 5.83353 1.71695 5.81075 1.8167 5.76667C1.91769 5.72447 2.0107 5.66528 2.0917 5.59167C2.16531 5.51067 2.2245 5.41765 2.2667 5.31667C2.31079 5.21692 2.33356 5.10906 2.33356 5C2.33356 4.89094 2.31079 4.78308 2.2667 4.68333C2.22704 4.58104 2.16756 4.48759 2.0917 4.40833ZM16.5 4.16667H4.83336C4.61235 4.16667 4.40039 4.25446 4.24411 4.41074C4.08783 4.56703 4.00003 4.77899 4.00003 5C4.00003 5.22101 4.08783 5.43298 4.24411 5.58926C4.40039 5.74554 4.61235 5.83333 4.83336 5.83333H16.5C16.721 5.83333 16.933 5.74554 17.0893 5.58926C17.2456 5.43298 17.3334 5.22101 17.3334 5C17.3334 4.77899 17.2456 4.56703 17.0893 4.41074C16.933 4.25446 16.721 4.16667 16.5 4.16667ZM2.0917 0.241667C2.01244 0.165799 1.91899 0.106329 1.8167 0.0666666C1.66494 0.00285041 1.49768 -0.0145849 1.33602 0.0165602C1.17436 0.0477053 1.02555 0.126035 0.908364 0.241667C0.834755 0.322667 0.775566 0.415679 0.733364 0.516667C0.689277 0.616417 0.666504 0.724274 0.666504 0.833333C0.666504 0.942392 0.689277 1.05025 0.733364 1.15C0.775566 1.25099 0.834755 1.344 0.908364 1.425C0.989365 1.49861 1.08238 1.5578 1.18336 1.6C1.33512 1.66382 1.50238 1.68125 1.66404 1.65011C1.8257 1.61896 1.97451 1.54063 2.0917 1.425C2.16531 1.344 2.2245 1.25099 2.2667 1.15C2.31079 1.05025 2.33356 0.942392 2.33356 0.833333C2.33356 0.724274 2.31079 0.616417 2.2667 0.516667C2.2245 0.415679 2.16531 0.322667 2.0917 0.241667ZM16.5 8.33333H4.83336C4.61235 8.33333 4.40039 8.42113 4.24411 8.57741C4.08783 8.73369 4.00003 8.94565 4.00003 9.16667C4.00003 9.38768 4.08783 9.59964 4.24411 9.75592C4.40039 9.9122 4.61235 10 4.83336 10H16.5C16.721 10 16.933 9.9122 17.0893 9.75592C17.2456 9.59964 17.3334 9.38768 17.3334 9.16667C17.3334 8.94565 17.2456 8.73369 17.0893 8.57741C16.933 8.42113 16.721 8.33333 16.5 8.33333Z" fill="currentColor"></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

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

Tailwind Component #2709

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-white border-l-4 border-gray-500 shadow-md rounded-r-lg">
    <div class="flex">
      <div class="w-auto">
        <span class="w-auto inline-block mr-2">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM14.2 8.3L9.4 13.1C9 13.5 8.4 13.5 8 13.1L5.8 10.9C5.4 10.5 5.4 9.9 5.8 9.5C6.2 9.1 6.8 9.1 7.2 9.5L8.7 11L12.8 6.9C13.2 6.5 13.8 6.5 14.2 6.9C14.6 7.3 14.6 7.9 14.2 8.3Z" fill="#67798E"></path>
          </svg>
        </span>
      </div>
      <div class="w-full">
        <div class="flex mb-2">
          <h3 class="text-gray-800 font-medium">Example for Banner</h3>
          <button x-on:click="modal = false" class="ml-auto">
            <svg class="text-gray-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
        <div class="pr-6">
          <p class="text-sm text-gray-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
        </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

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

Tailwind Component #2710

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-white border-l-4 border-red-500 shadow-md rounded-r-lg">
    <div class="flex">
      <div class="w-auto">
        <span class="w-auto inline-block mr-2">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM14.2 8.3L9.4 13.1C9 13.5 8.4 13.5 8 13.1L5.8 10.9C5.4 10.5 5.4 9.9 5.8 9.5C6.2 9.1 6.8 9.1 7.2 9.5L8.7 11L12.8 6.9C13.2 6.5 13.8 6.5 14.2 6.9C14.6 7.3 14.6 7.9 14.2 8.3Z" fill="#E85444"></path>
          </svg>
        </span>
      </div>
      <div class="w-full">
        <div class="flex mb-2">
          <h3 class="text-red-800 font-medium">Example for Banner</h3>
          <button x-on:click="modal = false" class="ml-auto">
            <svg class="text-red-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
        <div class="pr-6">
          <p class="text-sm text-red-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
        </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

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

Tailwind Component #2711

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-white border-l-4 border-green-500 shadow-md rounded-r-lg">
    <div class="flex">
      <div class="w-auto">
        <span class="w-auto inline-block mr-2">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM14.2 8.3L9.4 13.1C9 13.5 8.4 13.5 8 13.1L5.8 10.9C5.4 10.5 5.4 9.9 5.8 9.5C6.2 9.1 6.8 9.1 7.2 9.5L8.7 11L12.8 6.9C13.2 6.5 13.8 6.5 14.2 6.9C14.6 7.3 14.6 7.9 14.2 8.3Z" fill="#17BB84"></path>
          </svg>
        </span>
      </div>
      <div class="w-full">
        <div class="flex mb-2">
          <h3 class="text-green-800 font-medium">Example for Banner</h3>
          <button x-on:click="modal = false" class="ml-auto">
            <svg class="text-green-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
        <div class="pr-6">
          <p class="text-sm text-green-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
        </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

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

Tailwind Component #2712

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-white border-l-4 border-orange-500 shadow-md rounded-r-lg">
    <div class="flex">
      <div class="w-auto">
        <span class="w-auto inline-block mr-2">
          <svg class="text-orange-500" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM11 14C11 14.6 10.6 15 10 15C9.4 15 9 14.6 9 14V10C9 9.4 9.4 9 10 9C10.6 9 11 9.4 11 10V14ZM10 7C9.4 7 9 6.6 9 6C9 5.4 9.4 5 10 5C10.6 5 11 5.4 11 6C11 6.6 10.6 7 10 7Z" fill="currentColor"></path>
          </svg>
        </span>
      </div>
      <div class="w-full">
        <div class="flex mb-2">
          <h3 class="text-orange-800 font-medium">Example for Banner</h3>
          <button x-on:click="modal = false" class="ml-auto">
            <svg class="text-orange-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
        <div class="pr-6">
          <p class="text-sm text-orange-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
        </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

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

Tailwind Component #2713

<div x-data="{ modal: true }" :class="{ 'hidden': !modal }" class="py-8 px-6">
  <div class="p-6 bg-white border-l-4 border-indigo-500 shadow-md rounded-r-lg">
    <div class="flex">
      <div class="w-auto">
        <span class="w-auto inline-block mr-2">
          <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 0C4.5 0 0 4.5 0 10C0 15.5 4.5 20 10 20C15.5 20 20 15.5 20 10C20 4.5 15.5 0 10 0ZM11 14C11 14.6 10.6 15 10 15C9.4 15 9 14.6 9 14V10C9 9.4 9.4 9 10 9C10.6 9 11 9.4 11 10V14ZM10 7C9.4 7 9 6.6 9 6C9 5.4 9.4 5 10 5C10.6 5 11 5.4 11 6C11 6.6 10.6 7 10 7Z" fill="#382CDD"></path>
          </svg>
        </span>
      </div>
      <div class="w-full">
        <div class="flex mb-2">
          <h3 class="text-indigo-800 font-medium">Example for Banner</h3>
          <button x-on:click="modal = false" class="ml-auto">
            <svg class="text-indigo-800" width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M6.93341 6.00008L11.1334 1.80008C11.4001 1.53341 11.4001 1.13341 11.1334 0.866748C10.8667 0.600081 10.4667 0.600081 10.2001 0.866748L6.00008 5.06675L1.80008 0.866748C1.53341 0.600081 1.13341 0.600081 0.866748 0.866748C0.600082 1.13341 0.600082 1.53341 0.866748 1.80008L5.06675 6.00008L0.866748 10.2001C0.733415 10.3334 0.666748 10.4667 0.666748 10.6667C0.666748 11.0667 0.933415 11.3334 1.33341 11.3334C1.53341 11.3334 1.66675 11.2667 1.80008 11.1334L6.00008 6.93341L10.2001 11.1334C10.3334 11.2667 10.4667 11.3334 10.6667 11.3334C10.8667 11.3334 11.0001 11.2667 11.1334 11.1334C11.4001 10.8667 11.4001 10.4667 11.1334 10.2001L6.93341 6.00008Z" fill="currentColor"></path>
            </svg>
          </button>
        </div>
        <div class="pr-6">
          <p class="text-sm text-indigo-600">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit vel expedita, aut similique voluptates modi dolorem maxime illum.</p>
        </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

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

Tailwind Component #2714

<section class="py-8" x-data="{ category: '' }" x-init="category = $refs.tab1.textContent">
  <div class="container px-4 mx-auto">
    <div class="mb-8 p-8 bg-indigo-500 rounded">
      <div class="flex flex-wrap items-center -mx-4">
        <div class="w-full lg:w-2/3 px-4">
          <h2 class="text-3xl text-white font-bold">Are you looking for answers?</h2>
          <p class="text-indigo-50">We have prepared the most frequently asked questions for you</p>
        </div>
        <div class="w-full lg:w-1/3 px-4 flex items-center">
          <img src="artemis-assets/images/office.png" alt="">
        </div>
      </div>
    </div>
    <div class="flex flex-wrap -mx-4">
      <div class="w-full lg:w-3/12 px-4 mb-8 lg:mb-0">
        <div class="p-2 bg-white rounded">
          <ul class="text-sm">
            <li>
              <a x-on:click.prevent="category = $refs.tab1.textContent" class="flex p-3 items-center font-medium rounded text-indigo-500 bg-indigo-50" :class="{ 'text-indigo-500 bg-indigo-50': category == $refs.tab1.textContent, 'text-gray-500 hover:text-indigo-500 hover:bg-indigo-50': category != $refs.tab1.textContent }" href="#">
                <span class="mr-3">
                  <svg :class="{'text-indigo-500': category == $refs.tab1.textContent , 'text-indigo-100': category != $refs.tab1.textContent }" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M16.6663 0.833338H3.33301C2.66997 0.833338 2.03408 1.09673 1.56524 1.56557C1.0964 2.03441 0.833008 2.6703 0.833008 3.33334V16.6667C0.833008 17.3297 1.0964 17.9656 1.56524 18.4344C2.03408 18.9033 2.66997 19.1667 3.33301 19.1667H16.6663C17.3294 19.1667 17.9653 18.9033 18.4341 18.4344C18.9029 17.9656 19.1663 17.3297 19.1663 16.6667V3.33334C19.1663 2.6703 18.9029 2.03441 18.4341 1.56557C17.9653 1.09673 17.3294 0.833338 16.6663 0.833338V0.833338ZM6.66634 17.5H3.33301C3.11199 17.5 2.90003 17.4122 2.74375 17.2559C2.58747 17.0996 2.49967 16.8877 2.49967 16.6667V15.6833C2.7669 15.7804 3.04872 15.8311 3.33301 15.8333H6.66634V17.5ZM6.66634 14.1667H3.33301C3.11199 14.1667 2.90003 14.0789 2.74375 13.9226C2.58747 13.7663 2.49967 13.5544 2.49967 13.3333V12.35C2.7669 12.447 3.04872 12.4977 3.33301 12.5H6.66634V14.1667ZM6.66634 10.8333H3.33301C3.11199 10.8333 2.90003 10.7455 2.74375 10.5893C2.58747 10.433 2.49967 10.221 2.49967 10V3.33334C2.49967 3.11232 2.58747 2.90036 2.74375 2.74408C2.90003 2.5878 3.11199 2.5 3.33301 2.5H6.66634V10.8333ZM11.6663 17.5H8.33301V12.5H11.6663V17.5ZM11.6663 10.8333H8.33301V2.5H11.6663V10.8333ZM17.4997 16.6667C17.4997 16.8877 17.4119 17.0996 17.2556 17.2559C17.0993 17.4122 16.8874 17.5 16.6663 17.5H13.333V15.8333H16.6663C16.9506 15.8311 17.2324 15.7804 17.4997 15.6833V16.6667ZM17.4997 13.3333C17.4997 13.5544 17.4119 13.7663 17.2556 13.9226C17.0993 14.0789 16.8874 14.1667 16.6663 14.1667H13.333V12.5H16.6663C16.9506 12.4977 17.2324 12.447 17.4997 12.35V13.3333ZM17.4997 10C17.4997 10.221 17.4119 10.433 17.2556 10.5893C17.0993 10.7455 16.8874 10.8333 16.6663 10.8333H13.333V2.5H16.6663C16.8874 2.5 17.0993 2.5878 17.2556 2.74408C17.4119 2.90036 17.4997 3.11232 17.4997 3.33334V10ZM14.9997 5.83334C14.8349 5.83334 14.6737 5.88221 14.5367 5.97378C14.3997 6.06535 14.2928 6.1955 14.2298 6.34777C14.1667 6.50004 14.1502 6.66759 14.1824 6.82925C14.2145 6.9909 14.2939 7.13938 14.4104 7.25593C14.527 7.37247 14.6754 7.45184 14.8371 7.48399C14.9987 7.51615 15.1663 7.49964 15.3186 7.43657C15.4708 7.3735 15.601 7.26669 15.6926 7.12965C15.7841 6.99261 15.833 6.83149 15.833 6.66667C15.833 6.44566 15.7452 6.2337 15.5889 6.07742C15.4326 5.92113 15.2207 5.83334 14.9997 5.83334ZM4.99967 7.5C5.16449 7.5 5.32561 7.45113 5.46265 7.35956C5.59969 7.26799 5.7065 7.13785 5.76957 6.98557C5.83265 6.8333 5.84915 6.66575 5.817 6.5041C5.78484 6.34244 5.70547 6.19396 5.58893 6.07742C5.47239 5.96087 5.3239 5.8815 5.16225 5.84935C5.0006 5.8172 4.83304 5.8337 4.68077 5.89677C4.5285 5.95984 4.39835 6.06665 4.30678 6.2037C4.21522 6.34074 4.16634 6.50185 4.16634 6.66667C4.16634 6.88768 4.25414 7.09965 4.41042 7.25593C4.5667 7.41221 4.77866 7.5 4.99967 7.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 #2715

<section class="py-8">
  <div class="container px-4 mx-auto">
    <div class="py-4 bg-white rounded">
      <div class="flex px-6 pb-4 border-b">
        <h3 class="text-xl font-bold">Task overview</h3>
        <div class="ml-auto">
          <select class="bg-indigo-500 rounded-md text-xs text-white py-2 px-3" name="" id="">
            <option value="1">Change</option>
            <option value="2">Sort</option>
            <option value="3">Add</option>
          </select>
        </div>
      </div>
      <div class="px-4 py-3 text-xs font-medium">
        <div class="flex mb-3 px-4 text-gray-500">
          <h4 class="mr-auto">Task Name</h4>
          <h4>Action</h4>
        </div>
        <div class="flex p-4 bg-gray-50 rounded">
          <span class="inline-flex w-8 h-8 mr-2 justify-center items-center bg-blue-50 rounded">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M15.0675 1.37468C15.0374 1.26049 14.9775 1.15633 14.894 1.07284C14.8106 0.989341 14.7064 0.929498 14.5922 0.899417C13.2246 0.54421 11.7845 0.582467 10.4377 1.00979C9.09094 1.4371 7.89221 2.2361 6.97958 3.31479L6.23629 4.19734L4.49976 3.77836C4.07759 3.63118 3.61642 3.64173 3.20141 3.80806C2.78641 3.97439 2.44561 4.28526 2.24195 4.68328L0.775154 7.28321C0.72376 7.37428 0.694511 7.47616 0.689772 7.58062C0.685033 7.68509 0.704936 7.7892 0.747874 7.88454C0.790811 7.97989 0.855578 8.0638 0.936941 8.12949C1.0183 8.19518 1.11398 8.2408 1.21623 8.26268L3.26473 8.7018C3.09121 9.23004 2.9673 9.7733 2.89462 10.3245C2.88144 10.4258 2.8917 10.5287 2.92461 10.6254C2.95751 10.7221 3.01218 10.8099 3.08439 10.8821L5.15113 12.9489C5.21301 13.0108 5.28648 13.0599 5.36736 13.0934C5.44823 13.127 5.53492 13.1442 5.62246 13.1442C5.64167 13.1442 5.66087 13.1432 5.68041 13.1416C6.24397 13.0909 6.80068 12.9815 7.34145 12.8149L7.77057 14.8171C7.7925 14.9193 7.83816 15.0149 7.90386 15.0963C7.96956 15.1776 8.05346 15.2423 8.14879 15.2853C8.24413 15.3282 8.34822 15.3481 8.45266 15.3434C8.55711 15.3387 8.65899 15.3095 8.75007 15.2581L11.3536 13.7897C11.72 13.5671 12.0062 13.2338 12.171 12.8379C12.3358 12.4421 12.3705 12.0041 12.2702 11.5872L11.8244 9.7479L12.6492 8.98956C13.7319 8.07949 14.5339 6.8807 14.9621 5.53265C15.3902 4.18459 15.4267 2.74269 15.0675 1.37468ZM2.3816 7.14877L3.41903 5.30893C3.48347 5.18403 3.59325 5.08851 3.72587 5.04196C3.85848 4.99541 4.00388 5.00137 4.13225 5.0586L5.27719 5.33607L4.84385 5.8506C4.43303 6.34298 4.0777 6.87913 3.78431 7.44934L2.3816 7.14877ZM10.6951 12.6302L8.88453 13.6513L8.59819 12.3149C9.17861 12.0255 9.71936 11.6625 10.2071 11.235L10.7028 10.7792L10.9718 11.889C11.0066 12.026 10.9988 12.1704 10.9494 12.3029C10.8999 12.4354 10.8112 12.5496 10.6951 12.6302ZM11.7712 7.98668L9.31487 10.2442C8.34257 11.085 7.14328 11.6195 5.86793 11.7803L4.26506 10.1774C4.48034 8.89876 5.03287 7.70067 5.86565 6.70676L6.98454 5.37831C7.00318 5.35881 7.02058 5.33815 7.03663 5.31646L7.99325 4.18068C8.70057 3.34527 9.61691 2.71255 10.6487 2.34711C11.6805 1.98166 12.7909 1.8966 13.8663 2.1006C14.0752 3.17941 13.9911 4.29451 13.6226 5.32975C13.2541 6.36498 12.6148 7.28248 11.7712 7.98668ZM11.1559 3.8775C10.9581 3.8775 10.7648 3.93615 10.6003 4.04603C10.4359 4.15592 10.3077 4.31209 10.232 4.49482C10.1563 4.67755 10.1365 4.87861 10.1751 5.07259C10.2137 5.26658 10.309 5.44476 10.4488 5.58461C10.5887 5.72446 10.7668 5.8197 10.9608 5.85829C11.1548 5.89687 11.3559 5.87707 11.5386 5.80138C11.7213 5.7257 11.8775 5.59752 11.9874 5.43307C12.0973 5.26862 12.1559 5.07528 12.1559 4.8775C12.1559 4.74618 12.1301 4.61613 12.0798 4.4948C12.0296 4.37347 11.9559 4.26323 11.863 4.17036C11.7702 4.0775 11.6599 4.00384 11.5386 3.95359C11.4173 3.90334 11.2872 3.87748 11.1559 3.87749L11.1559 3.8775Z" fill="#2D70F5"></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 #2716

<section class="py-8" x-data="{ tab: 'monthly' }">
  <div class="container px-4 mx-auto">
    <div class="py-4 bg-white rounded">
      <div class="flex px-6 pb-4 border-b">
        <h3 class="text-xl font-bold">Sales Information</h3>
        <div class="ml-auto">
          <button x-on:click="tab = 'daily'" :class="{'bg-indigo-500 text-white': tab == 'daily', 'text-gray-400': tab !== 'daily'}" class="py-2 px-3 text-xs font-medium text-gray-400 rounded-md">Daily</button>
          <button x-on:click="tab = 'weekly'" :class="{'bg-indigo-500 text-white': tab == 'weekly', 'text-gray-400': tab !== 'weekly'}" class="py-2 px-3 text-xs font-medium text-gray-400 rounded-md">Weekly</button>
          <button x-on:click="tab = 'monthly'" :class="{'bg-indigo-500 text-white': tab == 'monthly', 'text-gray-400': tab !== 'monthly'}" class="py-2 px-3 text-xs font-medium bg-indigo-500 text-white rounded-md">Monthly</button>
        </div>
      </div>
      <div class="pt-4 px-4 overflow-x-auto">
        <table class="table-auto w-full">
          <thead>
            <tr class="text-xs text-gray-500 text-left"><th class="font-medium">Product Name</th><th class="font-medium">Ordered</th><th class="font-medium">Remaining</th><th class="font-medium">Status</th><th class="font-medium">Action</th></tr>
          </thead>
          <tbody x-show="tab == 'monthly'">
            <tr class="text-xs bg-gray-50">
              <td class="flex px-4 py-3">
                <img class="w-8 h-8 mr-4 object-cover rounded-md" src="https://images.unsplash.com/photo-1575537302964-96cd47c06b1b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1050&amp;q=80" alt="">
                <div>
                  <p class="font-medium">New Trendy Shoes For Winter</p>
                  <p class="text-gray-500">Winter Red Collection</p>
                </div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2717

<section class="relative pb-20 bg-gray-800 overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="absolute bottom-0 inset-x-0 h-full bg-gradient-zospace-1"></div>
  <div class="absolute bottom-0 inset-x-0 h-3/5 w-2full -ml-64 -mb-12 bg-gradient-zospace-2 transform -rotate-6"></div>
  <nav class="relative">
    <div class="flex py-8 px-4 lg:px-8 justify-between items-center">
      <button class="p-2" x-on:click="mobileNavOpen = !mobileNavOpen">
        <svg class="w-10 h-3" width="39" height="13" viewBox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="39" height="2" rx="1" fill="#C4C4C4"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="#C4C4C4"></rect></svg>
      </button>
      <div class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2">
        <a class="text-2xl text-white font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div class="hidden lg:block"><a class="inline-block mr-10 text-lg text-white hover:text-gray-50 font-bold border-b border-gray-200" href="#">Try for free!</a><a class="inline-block px-12 py-4 text-white font-bold border border-gray-200 hover:border-white rounded-full" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="relative container px-4 pt-12 md:pt-20 mx-auto">
    <div class="hidden 2xl:block absolute bottom-0 w-3/5 mb-40 h-2 border-b border-white"></div>
    <div class="relative flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 2xl:w-2/5 px-4 mb-12 mb:mb-0">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <span class="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-yellow-200 to-orange-600">Two ways to start!</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.

Zospace Hero with App Mockups and Get Started CTA

A dark, full-width marketing hero for the Zospace app, featuring a large left-aligned headline, a subheading, and a blue Get started button. Two tilted phone mockups on the right display app screens, and a simple navigation bar sits at the top.

Tailwind Component #2718

<section class="relative pb-20 bg-gray-800 overflow-hidden" x-data="{ mobileNavOpen: false }">
  <div class="absolute bottom-0 inset-x-0 h-full bg-gradient-zospace-1"></div>
  <div class="absolute bottom-0 inset-x-0 h-3/5 w-2full -ml-64 -mb-12 bg-gradient-zospace-2 transform -rotate-6"></div>
  <nav class="relative">
    <div class="flex py-8 px-4 lg:px-8 justify-between items-center">
      <button class="p-2" x-on:click="mobileNavOpen = !mobileNavOpen">
        <svg class="w-10 h-3" width="39" height="13" viewBox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="39" height="2" rx="1" fill="#C4C4C4"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="#C4C4C4"></rect></svg>
      </button>
      <div class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2">
        <a class="text-2xl text-white font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div class="hidden lg:block"><a class="inline-block mr-10 text-lg text-white hover:text-gray-50 font-bold border-b border-gray-200" href="#">Try for free!</a><a class="inline-block px-12 py-4 text-white font-bold border border-gray-200 hover:border-white rounded-full" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="relative container px-4 pt-12 md:pt-20 mx-auto">
    <div class="hidden lg:block absolute bottom-0 w-3/5 mb-48 2xl:mb-72 h-2 border-b border-white"></div>
    <div class="relative flex flex-wrap -mx-4 items-start">
      <div class="w-full lg:w-1/2 2xl:w-2/5 px-4 mb-20 mb:mb-0">
        <span class="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-yellow-200 to-orange-600">Two ways to start!</span>
        <h2 class="max-w-lg lg:max-w-md 2xl:max-w-none mt-7 mb-12 mb:mb-20 text-6xl lg:text-7xl 2xl:text-9xl text-white font-bold font-heading">Get perfect app for your project</h2>
        <p class="mb-12 lg:mb-24 text-lg text-white opacity-90">Discover how it works and start for free.</p>
        <div class="mb-12 lg:mb-40"><a class="inline-block px-12 py-5 text-lg text-white font-bold bg-blue-500 hover:bg-blue-600 rounded-full transition duration-200" href="#">Get started</a></div>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Dark Hero Section with App Store Download Badges and Device Mockups

A dark-themed marketing hero for the Zospace app featuring a large headline, a primary Get started button, and App Store and Google Play badges on the left, with overlapping phone mockups showing app screens on the right.

Tailwind Component #2719

<section class="relative bg-gray-800 overflow-hidden" x-data="{ mobileNavOpen: false, slideWidth: 0, activeSlide: 0, slideCount: 3 }">
  <div class="absolute bottom-0 inset-x-0 h-full bg-gradient-zospace-1"></div>
  <div class="absolute bottom-0 inset-x-0 h-3/5 w-2full -ml-64 -mb-12 bg-gradient-zospace-2 transform -rotate-6"></div>
  <nav class="relative">
    <div class="flex py-8 px-4 lg:px-8 justify-between items-center">
      <button class="p-2" x-on:click="mobileNavOpen = !mobileNavOpen">
        <svg class="w-10 h-3" width="39" height="13" viewBox="0 0 39 13" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="39" height="2" rx="1" fill="#C4C4C4"></rect><rect x="19" y="11" width="20" height="2" rx="1" fill="#C4C4C4"></rect></svg>
      </button>
      <div class="absolute top-1/2 left-1/2 transform -translate-y-1/2 -translate-x-1/2">
        <a class="text-2xl text-white font-bold" href="#">
          <img class="h-7" src="zospace-assets/logos/zospace-logo.svg" alt="" width="auto">
        </a>
      </div>
      <div class="hidden lg:block"><a class="inline-block mr-10 text-lg text-white hover:text-gray-50 font-bold border-b border-gray-200" href="#">Try for free!</a><a class="inline-block px-12 py-4 text-white font-bold border border-gray-200 hover:border-white rounded-full" href="#">Sign Up</a></div>
    </div>
  </nav>
  <div class="relative container px-4 pt-12 md:pt-20 mx-auto">
    <div class="relative flex flex-wrap -mx-4">
      <div class="w-full lg:w-1/2 2xl:w-2/5 px-4 mb-16 mb:mb-0 lg:pb-20">
        <div class="overflow-hidden">
            <div :style="'transform: translateX(-' + slideWidth + 'px)'" class="flex transition-transform duration-500 ease-in-out">
                <div x-ref="slide1" class="flex-shrink-0 w-full">
                    <span class="text-xl lg:text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-yellow-200 to-orange-600">Two ways to start!</span>
                    <h2 class="max-w-lg lg:max-w-md mt-7 mb-12 lg:mb-24 text-6xl 2xl:text-7xl text-white font-bold font-heading">Get perfect app for your project</h2>

Get the code for 13,400+ components

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

Free account · No credit card · No password needed

Already have an account? Sign in

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

Tailwind Component #2720