Developer-Friendly Tailwind Web Components

URL Preview Sharing

<div x-data="{open : false}" class="flex items-start gap-2.5">
  <img class="h-8 w-8 rounded-full" src="https://picsum.photos/id/77/100/100" alt="Jese image" />
  <div class="leading-1.5 flex w-full max-w-[320px] flex-col rounded-e-xl rounded-es-xl border-gray-200 bg-gray-100 p-4">
    <div class="flex items-center space-x-2 rtl:space-x-reverse">
      <span class="text-sm font-semibold text-gray-900">Bonnie Green</span>
      <span class="text-sm font-normal text-gray-500">11:46</span>
    </div>
    <p class="py-2.5 text-sm font-normal text-gray-900">Check out this open-source UI component library based on Tailwind CSS:</p>
    <p class="pb-2.5 text-sm font-normal text-gray-900"><a href="https://github.com/jamstack/jamstack.org" class="break-all font-medium text-blue-700 underline hover:no-underline">https://github.com/jamstack/jamstack.org</a></p>
    <a href="#" class="mb-2 rounded-xl bg-gray-50 p-4 hover:bg-gray-200">
      <img src="https://picsum.photos/id/77/100/100" alt="image 2" class="mb-2 rounded-lg" />
      <span class="mb-2 text-sm font-medium text-gray-900">GitHub - themesberg/jamstacker: The most popular and open source libra ...</span>
      <span class="text-xs font-normal text-gray-500">github.com</span>
    </a>
    <span class="text-sm font-normal text-gray-500">Delivered</span>
  </div>
  <button @click="open = !open" id="dropdownMenuIconButton" data-dropdown-toggle="dropdownDots" data-dropdown-placement="bottom-start" class="inline-flex items-center self-center rounded-lg bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50" type="button">
    <i class="fa-solid fa-ellipsis-vertical h-4 w-4 text-gray-500"></i>
  </button>
  <div x-show="open" id="dropdownDots" class="z-10 w-40 divide-y divide-gray-100 rounded-lg bg-white shadow">
    <ul class="py-2 text-sm text-gray-700" aria-labelledby="dropdownMenuIconButton">
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Reply</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Forward</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Copy</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Report</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Delete</a>
      </li>
    </ul>
  </div>
</div>

<js-component src="ecommerce/url_preview_sharing"></js-component>

User Bubble Chat

View

<div x-data="{open :false}" class="flex items-start gap-2.5">
  <img class="h-8 w-8 rounded-full" src="https://picsum.photos/id/67/200/300" alt="Jese image" />
  <div class="leading-1.5 flex w-full max-w-[320px] flex-col rounded-e-xl rounded-es-xl border-gray-200 bg-gray-100 p-4">
    <div class="flex items-center space-x-2 rtl:space-x-reverse">
      <span class="text-sm font-semibold text-gray-900">Bonnie Green</span>
      <span class="text-sm font-normal text-gray-500">11:46</span>
    </div>
    <p class="py-2.5 text-sm font-normal text-gray-900">That's awesome. I think our users will really appreciate the improvements.</p>
    <span class="text-sm font-normal text-gray-500">Delivered</span>
  </div>
  <button @click="open = !open" id="dropdownMenuIconButton" data-dropdown-toggle="dropdownDots" data-dropdown-placement="bottom-start" class="inline-flex items-center self-center rounded-lg bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50" type="button">
    <i class="fa-solid fa-ellipsis-vertical h-4 w-4 text-gray-500"></i>
  </button>
  <div x-show="open" id="dropdownDots" class="z-10 w-40 divide-y divide-gray-100 rounded-lg bg-white shadow">
    <ul class="py-2 text-sm text-gray-700" aria-labelledby="dropdownMenuIconButton">
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Reply</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Forward</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Copy</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Report</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Delete</a>
      </li>
    </ul>
  </div>
</div>

<js-component src="ecommerce/user_bubble_chat"></js-component>

Voice Note Message

View

<div x-data="{open :false}" class="flex items-start gap-2.5">
  <img class="h-8 w-8 rounded-full" src="https://picsum.photos/id/70/300/200" alt="Jese image" />
  <div class="leading-1.5 flex w-full max-w-[320px] flex-col gap-2.5 rounded-e-xl rounded-es-xl border-gray-200 bg-gray-100 p-4">
    <div class="flex items-center space-x-2 rtl:space-x-reverse">
      <span class="text-sm font-semibold text-gray-900">Bonnie Green</span>
      <span class="text-sm font-normal text-gray-500">11:46</span>
    </div>
    <div class="flex items-center space-x-2 rtl:space-x-reverse">
      <button class="inline-flex items-center self-center rounded-lg bg-gray-100 p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-50" type="button">
        <i class="fa-solid fa-pause h-4 w-4 text-gray-800"></i>
      </button>
      <svg aria-hidden="true" class="w-[145px] md:h-[40px] md:w-[185px]" viewBox="0 0 185 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <rect y="17" width="3" height="6" rx="1.5" fill="#6B7280" />
        <rect x="7" y="15.5" width="3" height="9" rx="1.5" fill="#6B7280" />
        <rect x="21" y="6.5" width="3" height="27" rx="1.5" fill="#6B7280" />
        <rect x="14" y="6.5" width="3" height="27" rx="1.5" fill="#6B7280" />
        <rect x="28" y="3" width="3" height="34" rx="1.5" fill="#6B7280" />
        <rect x="35" y="3" width="3" height="34" rx="1.5" fill="#6B7280" />
        <rect x="42" y="5.5" width="3" height="29" rx="1.5" fill="#6B7280" />
        <rect x="49" y="10" width="3" height="20" rx="1.5" fill="#6B7280" />
        <rect x="56" y="13.5" width="3" height="13" rx="1.5" fill="#6B7280" />
        <rect x="63" y="16" width="3" height="8" rx="1.5" fill="#6B7280" />
        <rect x="70" y="12.5" width="3" height="15" rx="1.5" fill="#E5E7EB" />
        <rect x="77" y="3" width="3" height="34" rx="1.5" fill="#E5E7EB" />
        <rect x="84" y="3" width="3" height="34" rx="1.5" fill="#E5E7EB" />
        <rect x="91" y="0.5" width="3" height="39" rx="1.5" fill="#E5E7EB" />
        <rect x="98" y="0.5" width="3" height="39" rx="1.5" fill="#E5E7EB" />
        <rect x="105" y="2" width="3" height="36" rx="1.5" fill="#E5E7EB" />
        <rect x="112" y="6.5" width="3" height="27" rx="1.5" fill="#E5E7EB" />
        <rect x="119" y="9" width="3" height="22" rx="1.5" fill="#E5E7EB" />
        <rect x="126" y="11.5" width="3" height="17" rx="1.5" fill="#E5E7EB" />
        <rect x="133" y="2" width="3" height="36" rx="1.5" fill="#E5E7EB" />
        <rect x="140" y="2" width="3" height="36" rx="1.5" fill="#E5E7EB" />
        <rect x="147" y="7" width="3" height="26" rx="1.5" fill="#E5E7EB" />
        <rect x="154" y="9" width="3" height="22" rx="1.5" fill="#E5E7EB" />
        <rect x="161" y="9" width="3" height="22" rx="1.5" fill="#E5E7EB" />
        <rect x="168" y="13.5" width="3" height="13" rx="1.5" fill="#E5E7EB" />
        <rect x="175" y="16" width="3" height="8" rx="1.5" fill="#E5E7EB" />
        <rect x="182" y="17.5" width="3" height="5" rx="1.5" fill="#E5E7EB" />
        <rect x="66" y="16" width="8" height="8" rx="4" fill="#1C64F2" />
      </svg>
      <span class="inline-flex items-center self-center p-2 text-sm font-medium text-gray-900">3:42</span>
    </div>
    <span class="text-sm font-normal text-gray-500">Delivered</span>
  </div>
  <button @click="open = !open" id="dropdownMenuIconButton" data-dropdown-toggle="dropdownDots" data-dropdown-placement="bottom-start" class="inline-flex flex-shrink-0 items-center self-center rounded-lg bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50" type="button">
    <i class="fa-solid fa-ellipsis-vertical h-4 w-4 text-gray-500"></i>
  </button>
  <div x-show="open" id="dropdownDots" class="relative z-10 w-40 divide-y divide-gray-100 rounded-lg bg-white shadow">
    <ul class="py-2 text-sm text-gray-700" aria-labelledby="dropdownMenuIconButton">
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Reply</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Forward</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Copy</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Report</a>
      </li>
      <li>
        <a href="#" class="block px-4 py-2 hover:bg-gray-100">Delete</a>
      </li>
    </ul>
  </div>
</div>

<js-component src="ecommerce/voice_note_message"></js-component>

Outline File Attachment

View

<div x-data="{ open : false }" class="flex flex-col">
  <div class="flex items-start gap-2.5">
    <img class="h-8 w-8 rounded-full" src="https://picsum.photos/id/77/200/300" alt="Jese image" />
    <div class="flex flex-col gap-1">
      <div class="flex items-center space-x-2 rtl:space-x-reverse">
        <span class="text-sm font-semibold text-gray-900">Bonnie Green</span>
        <span class="text-sm font-normal text-gray-500">11:46</span>
      </div>
      <div class="leading-1.5 flex w-full max-w-[320px] flex-col rounded-e-xl rounded-es-xl border-gray-200 bg-gray-100 p-4">
        <div class="flex items-start rounded-xl bg-gray-50 p-2">
          <div class="me-2">
            <span class="flex items-center gap-2 pb-2 text-sm font-medium text-gray-900">
              <i class="fa-solid fa-file-pdf h-5 w-5 flex-shrink-0"></i>
              Jamstacker Terms & Conditions
            </span>
            <span class="flex gap-2 text-xs font-normal text-gray-500">
              12 Pages
              <i class="fa-solid fa-circle self-center" width="3" height="4"></i>
              18 MB
              <i class="fa-solid fa-circle self-center" width="3" height="4"></i>
              PDF
            </span>
          </div>
          <div class="inline-flex items-center self-center">
            <button class="inline-flex items-center self-center rounded-lg bg-gray-50 p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50 dark:hover:bg-gray-500 dark:focus:ring-gray-600" type="button">
              <i class="fa-solid fa-download h-4 w-4 text-gray-900"></i>
            </button>
          </div>
        </div>
      </div>
      <span class="text-sm font-normal text-gray-500">Delivered</span>
    </div>
    <button @click="open = !open" id="dropdownMenuIconButton" data-dropdown-toggle="dropdownDots" data-dropdown-placement="bottom-start" class="inline-flex items-center self-center rounded-lg bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 dark:focus:ring-gray-600" type="button">
      <i class="fa-solid fa-ellipsis-vertical h-4 w-4 text-gray-500"></i>
    </button>
    <div x-show="open" id="dropdownDots" class="z-10 w-40 divide-y divide-gray-100 rounded-lg bg-white shadow">
      <ul class="py-2 text-sm text-gray-700" aria-labelledby="dropdownMenuIconButton">
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Reply</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Forward</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Copy</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Report</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Delete</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<js-component src="ecommerce/outline_file_attachment"></js-component>

Image Gallery

View

<div class="flex flex-col" x-data="{open : false}">
  <div class="flex items-start gap-2.5">
    <img class="h-8 w-8 rounded-full" src="https://picsum.photos/id/104/100/100" alt="Bonnie Green image" />
    <div class="flex flex-col gap-1">
      <div class="leading-1.5 flex w-full max-w-[326px] flex-col rounded-e-xl rounded-es-xl border-gray-200 bg-gray-100 p-4">
        <div class="mb-2 flex items-center space-x-2 rtl:space-x-reverse">
          <span class="text-sm font-semibold text-gray-900">Bonnie Green</span>
          <span class="text-sm font-normal text-gray-500">11:46</span>
        </div>
        <p class="text-sm font-normal text-gray-900">This is the new office <3</p>
        <div class="my-2.5 grid grid-cols-2 gap-4">
          <div class="group relative">
            <div class="absolute flex h-full w-full items-center justify-center rounded-lg bg-gray-900/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
              <button data-tooltip-target="download-image-1" class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 hover:bg-white/50 focus:outline-none focus:ring-4 focus:ring-gray-50">
                <i class="fa-regular fa-circle-down h-4 w-4 text-white"></i>
              </button>
              <div id="download-image-1" role="tooltip" class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300">
                Download image
                <div class="tooltip-arrow" data-popper-arrow></div>
              </div>
            </div>
            <img src="https://picsum.photos/seed/picsum/200/300" class="rounded-lg" />
          </div>
          <div class="group relative">
            <div class="absolute flex h-full w-full items-center justify-center rounded-lg bg-gray-900/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
              <button data-tooltip-target="download-image-2" class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 hover:bg-white/50 focus:outline-none focus:ring-4 focus:ring-gray-50">
                <i class="fa-regular fa-circle-down h-4 w-4 text-white"></i>
              </button>
              <div id="download-image-2" role="tooltip" class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300">
                Download image
                <div class="tooltip-arrow" data-popper-arrow></div>
              </div>
            </div>
            <img src="https://picsum.photos/seed/picsum/200/300" class="rounded-lg" />
          </div>
          <div class="group relative">
            <div class="absolute flex h-full w-full items-center justify-center rounded-lg bg-gray-900/50 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
              <button data-tooltip-target="download-image-3" class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/30 hover:bg-white/50 focus:outline-none focus:ring-4 focus:ring-gray-50">
                <i class="fa-regular fa-circle-down h-4 w-4 text-white"></i>
              </button>
              <div id="download-image-3" role="tooltip" class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300">
                Download image
                <div class="tooltip-arrow" data-popper-arrow></div>
              </div>
            </div>
            <img src="https://picsum.photos/seed/picsum/200/300" class="rounded-lg" />
          </div>
          <div class="group relative">
            <button class="absolute flex h-full w-full items-center justify-center rounded-lg bg-gray-900/90 transition-all duration-300 hover:bg-gray-900/50">
              <span class="text-xl font-medium text-white">+7</span>
              <div id="download-image" role="tooltip" class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300">
                Download image
                <div class="tooltip-arrow" data-popper-arrow></div>
              </div>
            </button>
            <img src="https://picsum.photos/seed/picsum/200/300" class="rounded-lg" />
          </div>
        </div>
        <div class="flex items-center justify-between">
          <span class="text-sm font-normal text-gray-500">Delivered</span>
          <button class="inline-flex items-center text-sm font-medium text-blue-700 hover:underline">
            <i class="fa-solid fa-download me-1.5 h-3 w-3"></i>
            Save all
          </button>
        </div>
      </div>
    </div>
    <button @click="open = !open" id="dropdownMenuIconButton" data-dropdown-toggle="dropdownDots" data-dropdown-placement="bottom-start" class="inline-flex items-center self-center rounded-lg bg-white p-2 text-center text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-50" type="button">
      <i class="fa-solid fa-ellipsis-vertical h-4 w-4 text-gray-500"></i>
    </button>
    <div x-show="open" id="dropdownDots" class="z-10 w-40 divide-y divide-gray-100 rounded-lg bg-white shadow">
      <ul class="py-2 text-sm text-gray-700" aria-labelledby="dropdownMenuIconButton">
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Reply</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Forward</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Copy</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Report</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Delete</a>
        </li>
      </ul>
    </div>
  </div>
</div>

<js-component src="ecommerce/image_gallery"></js-component>