Developer-Friendly Tailwind Ecommerce 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>

Video Player Bar

View

<div class="fixed bottom-0 left-0 z-50 grid h-24 w-full grid-cols-1 border-t border-gray-200 bg-white px-8 md:grid-cols-3">
  <div class="me-auto hidden items-center justify-center md:flex">
    <img class="me-3 h-8 rounded" src="https://picsum.photos/id/37/200/200" alt="Video preview" />
    <span class="text-sm text-gray-500">Jamstackers. Course</span>
  </div>
  <div class="flex w-full items-center">
    <div class="w-full">
      <div class="mx-auto mb-1 flex items-center justify-center">
        <button data-tooltip-target="tooltip-shuffle" type="button" class="group me-1 rounded-full p-2.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
          <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 18">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.484 6.166 13 4h6m0 0-3-3m3 3-3 3M1 14h5l1.577-2.253M1 4h5l7 10h6m0 0-3 3m3-3-3-3" />
          </svg>
          <span class="sr-only">Shuffle video</span>
        </button>
        <div id="tooltip-shuffle" 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">
          Shuffle video
          <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
        <button data-tooltip-target="tooltip-previous" type="button" class="group rounded-full p-2.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
          <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 12 16">
            <path d="M10.819.4a1.974 1.974 0 0 0-2.147.33l-6.5 5.773A2.014 2.014 0 0 0 2 6.7V1a1 1 0 0 0-2 0v14a1 1 0 1 0 2 0V9.3c.055.068.114.133.177.194l6.5 5.773a1.982 1.982 0 0 0 2.147.33A1.977 1.977 0 0 0 12 13.773V2.227A1.977 1.977 0 0 0 10.819.4Z" />
          </svg>
          <span class="sr-only">Previous video</span>
        </button>
        <div id="tooltip-previous" 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">
          Previous video
          <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
        <button data-tooltip-target="tooltip-pause" type="button" class="group mx-2 inline-flex items-center justify-center rounded-full bg-blue-600 p-2.5 font-medium hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300">
          <svg class="h-3 w-3 text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 10 16">
            <path fill-rule="evenodd" d="M0 .8C0 .358.32 0 .714 0h1.429c.394 0 .714.358.714.8v14.4c0 .442-.32.8-.714.8H.714a.678.678 0 0 1-.505-.234A.851.851 0 0 1 0 15.2V.8Zm7.143 0c0-.442.32-.8.714-.8h1.429c.19 0 .37.084.505.234.134.15.209.354.209.566v14.4c0 .442-.32.8-.714.8H7.857c-.394 0-.714-.358-.714-.8V.8Z" clip-rule="evenodd" />
          </svg>
          <span class="sr-only">Pause video</span>
        </button>
        <div id="tooltip-pause" 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">
          Pause video
          <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
        <button data-tooltip-target="tooltip-next" type="button" class="group me-1 rounded-full p-2.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
          <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 12 16">
            <path d="M11 0a1 1 0 0 0-1 1v5.7a2.028 2.028 0 0 0-.177-.194L3.33.732A2 2 0 0 0 0 2.227v11.546A1.977 1.977 0 0 0 1.181 15.6a1.982 1.982 0 0 0 2.147-.33l6.5-5.773A1.88 1.88 0 0 0 10 9.3V15a1 1 0 1 0 2 0V1a1 1 0 0 0-1-1Z" />
          </svg>
          <span class="sr-only">Next video</span>
        </button>
        <div id="tooltip-next" 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">
          Next video
          <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
        <button data-tooltip-target="tooltip-restart" type="button" class="group me-1 rounded-full p-2.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
          <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 1v5h-5M2 19v-5h5m10-4a8 8 0 0 1-14.947 3.97M1 10a8 8 0 0 1 14.947-3.97" />
          </svg>
          <span class="sr-only">Restart video</span>
        </button>
        <div id="tooltip-restart" 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">
          Restart video
          <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
      </div>
      <div class="flex items-center justify-between space-x-2 rtl:space-x-reverse">
        <span class="text-sm font-medium text-gray-500">3:45</span>
        <div class="h-1.5 w-full rounded-full bg-gray-200">
          <div class="h-1.5 rounded-full bg-blue-600" style="width: 65%"></div>
        </div>
        <span class="text-sm font-medium text-gray-500">5:00</span>
      </div>
    </div>
  </div>
  <div class="ms-auto hidden items-center justify-center md:flex">
    <button data-tooltip-target="tooltip-playlist" type="button" class="group me-1 rounded-full p-2.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
      <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 16">
        <path d="M14.316.051A1 1 0 0 0 13 1v8.473A4.49 4.49 0 0 0 11 9c-2.206 0-4 1.525-4 3.4s1.794 3.4 4 3.4 4-1.526 4-3.4a2.945 2.945 0 0 0-.067-.566c.041-.107.064-.22.067-.334V2.763A2.974 2.974 0 0 1 16 5a1 1 0 0 0 2 0C18 1.322 14.467.1 14.316.051ZM10 3H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Z" />
        <path d="M10 7H1a1 1 0 0 1 0-2h9a1 1 0 1 1 0 2Zm-5 4H1a1 1 0 0 1 0-2h4a1 1 0 1 1 0 2Z" />
      </svg>
      <span class="sr-only">View playlist</span>
    </button>
    <div id="tooltip-playlist" 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">
      View playlist
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-captions" type="button" class="group me-1 rounded-full p-2.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
      <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 16">
        <path d="M18 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2ZM7.648 9.636c.25 0 .498-.064.717-.186a1 1 0 1 1 .979 1.745 3.475 3.475 0 1 1 .185-5.955 1 1 0 1 1-1.082 1.681 1.475 1.475 0 1 0-.799 2.715Zm6.186 0c.252 0 .5-.063.72-.187a1 1 0 1 1 .974 1.746 3.475 3.475 0 1 1 .188-5.955 1 1 0 0 1-1.084 1.681 1.475 1.475 0 1 0-.8 2.715h.002Z" />
      </svg>
      <span class="sr-only">Captions</span>
    </button>
    <div id="tooltip-captions" 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">
      Toggle captions
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-expand" type="button" class="group me-1 rounded-full p-2.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
      <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 18 18">
        <path d="M18 .989a1.016 1.016 0 0 0-.056-.277c-.011-.034-.009-.073-.023-.1a.786.786 0 0 0-.066-.1.979.979 0 0 0-.156-.224l-.007-.01a.873.873 0 0 0-.116-.073.985.985 0 0 0-.2-.128.959.959 0 0 0-.231-.047A.925.925 0 0 0 17 0h-4a1 1 0 1 0 0 2h1.664l-3.388 3.552a1 1 0 0 0 1.448 1.381L16 3.5V5a1 1 0 0 0 2 0V.989ZM17 12a1 1 0 0 0-1 1v1.586l-3.293-3.293a1 1 0 0 0-1.414 1.414L14.586 16H13a1 1 0 0 0 0 2h4a1 1 0 0 0 1-1v-4a1 1 0 0 0-1-1ZM3.414 2H5a1 1 0 0 0 0-2H1a1 1 0 0 0-1 1v4a1 1 0 0 0 2 0V3.414l3.536 3.535A1 1 0 0 0 6.95 5.535L3.414 2Zm2.139 9.276L2 14.665V13a1 1 0 1 0-2 0v4c.006.046.015.09.027.135.006.08.022.16.048.235a.954.954 0 0 0 .128.2.95.95 0 0 0 .073.117l.01.007A.983.983 0 0 0 1 18h4a1 1 0 0 0 0-2H3.5l3.436-3.276a1 1 0 0 0-1.38-1.448h-.003Z" />
      </svg>
      <span class="sr-only">Expand</span>
    </button>
    <div id="tooltip-expand" 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">
      Full screen
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-volume" type="button" class="group rounded-full p-2.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
      <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
        <path d="M10.836.357a1.978 1.978 0 0 0-2.138.3L3.63 5H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h1.63l5.07 4.344a1.985 1.985 0 0 0 2.142.299A1.98 1.98 0 0 0 12 15.826V2.174A1.98 1.98 0 0 0 10.836.357Zm2.728 4.695a1.001 1.001 0 0 0-.29 1.385 4.887 4.887 0 0 1 0 5.126 1 1 0 0 0 1.674 1.095A6.645 6.645 0 0 0 16 9a6.65 6.65 0 0 0-1.052-3.658 1 1 0 0 0-1.384-.29Zm4.441-2.904a1 1 0 0 0-1.664 1.11A10.429 10.429 0 0 1 18 9a10.465 10.465 0 0 1-1.614 5.675 1 1 0 1 0 1.674 1.095A12.325 12.325 0 0 0 20 9a12.457 12.457 0 0 0-1.995-6.852Z" />
      </svg>
      <span class="sr-only">Adjust volume</span>
    </button>
    <div id="tooltip-volume" 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">
      Adjust volume
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
  </div>
</div>

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

User Online Meeting Control Bar

View

<div class="fixed bottom-0 left-0 z-50 grid h-16 w-full grid-cols-1 border-t border-gray-200 bg-white px-8 md:grid-cols-3">
  <div class="me-auto hidden items-center justify-center text-gray-500 md:flex">
    <svg class="me-2 h-3 w-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
      <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm3.982 13.982a1 1 0 0 1-1.414 0l-3.274-3.274A1.012 1.012 0 0 1 9 10V6a1 1 0 0 1 2 0v3.586l2.982 2.982a1 1 0 0 1 0 1.414Z" />
    </svg>
    <span class="text-sm">12:43 PM</span>
  </div>
  <div class="mx-auto flex items-center justify-center">
    <button data-tooltip-target="tooltip-microphone" type="button" class="group me-4 rounded-full bg-gray-100 p-2.5 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-200">
      <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 16 19">
        <path d="M15 5a1 1 0 0 0-1 1v3a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V6a1 1 0 0 0-2 0v3a6.006 6.006 0 0 0 6 6h1v2H5a1 1 0 0 0 0 2h6a1 1 0 0 0 0-2H9v-2h1a6.006 6.006 0 0 0 6-6V6a1 1 0 0 0-1-1Z" />
        <path d="M9 0H7a3 3 0 0 0-3 3v5a3 3 0 0 0 3 3h2a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3Z" />
      </svg>
      <span class="sr-only">Mute microphone</span>
    </button>
    <div id="tooltip-microphone" 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">
      Mute microphone
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-camera" type="button" class="group me-4 rounded-full bg-gray-100 p-2.5 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-200">
      <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 14">
        <path d="M11 0H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h9a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm8.585 1.189a.994.994 0 0 0-.9-.138l-2.965.983a1 1 0 0 0-.685.949v8a1 1 0 0 0 .675.946l2.965 1.02a1.013 1.013 0 0 0 1.032-.242A1 1 0 0 0 20 12V2a1 1 0 0 0-.415-.811Z" />
      </svg>
      <span class="sr-only">Hide camera</span>
    </button>
    <div id="tooltip-camera" 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">
      Hide camera
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-feedback" type="button" class="group me-4 rounded-full bg-gray-100 p-2.5 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-200">
      <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM13.5 6a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm-7 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm3.5 9.5A5.5 5.5 0 0 1 4.6 11h10.81A5.5 5.5 0 0 1 10 15.5Z" />
      </svg>
      <span class="sr-only">Share feedback</span>
    </button>
    <div id="tooltip-feedback" 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">
      Share feedback
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-settings" type="button" class="group me-4 rounded-full bg-gray-100 p-2.5 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-200 md:me-0">
      <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2" />
      </svg>
      <span class="sr-only">Video settings</span>
    </button>
    <div id="tooltip-settings" 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">
      Video settings
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button id="moreOptionsDropdownButton" data-dropdown-toggle="moreOptionsDropdown" type="button" class="group rounded-full bg-gray-100 p-2.5 hover:bg-gray-200 focus:outline-none focus:ring-4 focus:ring-gray-200 md:hidden">
      <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 4 15">
        <path d="M3.5 1.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 6.041a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Zm0 5.959a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0Z" />
      </svg>
      <span class="sr-only">Show options</span>
    </button>
    <div id="moreOptionsDropdown" class="z-10 hidden w-44 divide-y divide-gray-100 rounded-lg bg-white shadow">
      <ul class="py-2 text-sm text-gray-700" aria-labelledby="moreOptionsDropdownButton">
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Show participants</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Adjust volume</a>
        </li>
        <li>
          <a href="#" class="block px-4 py-2 hover:bg-gray-100">Show information</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="ms-auto hidden items-center justify-center md:flex">
    <button data-tooltip-target="tooltip-participants" type="button" class="group me-1 rounded-full p-2.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
      <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
        <path d="M14 2a3.963 3.963 0 0 0-1.4.267 6.439 6.439 0 0 1-1.331 6.638A4 4 0 1 0 14 2Zm1 9h-1.264A6.957 6.957 0 0 1 15 15v2a2.97 2.97 0 0 1-.184 1H19a1 1 0 0 0 1-1v-1a5.006 5.006 0 0 0-5-5ZM6.5 9a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 10H5a5.006 5.006 0 0 0-5 5v2a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-2a5.006 5.006 0 0 0-5-5Z" />
      </svg>
      <span class="sr-only">Show participants</span>
    </button>
    <div id="tooltip-participants" 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">
      Show participants
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-volume" type="button" class="group me-1 rounded-full p-2.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
      <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 18">
        <path d="M10.836.357a1.978 1.978 0 0 0-2.138.3L3.63 5H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h1.63l5.07 4.344a1.985 1.985 0 0 0 2.142.299A1.98 1.98 0 0 0 12 15.826V2.174A1.98 1.98 0 0 0 10.836.357Zm2.728 4.695a1.001 1.001 0 0 0-.29 1.385 4.887 4.887 0 0 1 0 5.126 1 1 0 0 0 1.674 1.095A6.645 6.645 0 0 0 16 9a6.65 6.65 0 0 0-1.052-3.658 1 1 0 0 0-1.384-.29Zm4.441-2.904a1 1 0 0 0-1.664 1.11A10.429 10.429 0 0 1 18 9a10.465 10.465 0 0 1-1.614 5.675 1 1 0 1 0 1.674 1.095A12.325 12.325 0 0 0 20 9a12.457 12.457 0 0 0-1.995-6.852Z" />
      </svg>
      <span class="sr-only">Adjust volume</span>
    </button>
    <div id="tooltip-volume" 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">
      Adjust volume
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-information" type="button" class="group rounded-full p-2.5 hover:bg-gray-100 focus:outline-none focus:ring-4 focus:ring-gray-200">
      <svg class="h-4 w-4 text-gray-500 group-hover:text-gray-900" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
      </svg>
      <span class="sr-only">Show information</span>
    </button>
    <div id="tooltip-information" 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">
      Show information
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
  </div>
</div>

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

User Button Group With Bottom Bar

View

<div class="fixed bottom-0 left-1/2 z-50 w-full -translate-x-1/2 border-t border-gray-200 bg-white">
  <div class="w-full">
    <div class="mx-auto my-2 grid max-w-xs grid-cols-3 gap-1 rounded-lg bg-gray-100 p-1" role="group">
      <button type="button" class="rounded-lg px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200">New</button>
      <button type="button" class="rounded-lg bg-gray-900 px-5 py-1.5 text-xs font-medium text-white">Popular</button>
      <button type="button" class="rounded-lg px-5 py-1.5 text-xs font-medium text-gray-900 hover:bg-gray-200">Following</button>
    </div>
  </div>
  <div class="mx-auto grid h-full max-w-lg grid-cols-5">
    <button data-tooltip-target="tooltip-home" type="button" class="group inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50">
      <svg class="mb-1 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
      </svg>
      <span class="sr-only">Home</span>
    </button>
    <div id="tooltip-home" 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">
      Home
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-bookmark" type="button" class="group inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50">
      <svg class="mb-1 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 20">
        <path d="M13 20a1 1 0 0 1-.64-.231L7 15.3l-5.36 4.469A1 1 0 0 1 0 19V2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v17a1 1 0 0 1-1 1Z" />
      </svg>
      <span class="sr-only">Bookmark</span>
    </button>
    <div id="tooltip-bookmark" 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">
      Bookmark
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-post" type="button" class="group inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50">
      <svg class="mb-1 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 1v16M1 9h16" />
      </svg>
      <span class="sr-only">New post</span>
    </button>
    <div id="tooltip-post" 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">
      New post
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-search" type="button" class="group inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50">
      <svg class="mb-1 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
      </svg>
      <span class="sr-only">Search</span>
    </button>
    <div id="tooltip-search" 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">
      Search
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-settings" type="button" class="group inline-flex flex-col items-center justify-center p-4 hover:bg-gray-50">
      <svg class="mb-1 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2" />
      </svg>
      <span class="sr-only">Settings</span>
    </button>
    <div id="tooltip-settings" 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">
      Settings
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
  </div>
</div>

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

User Example Pagination

View

<div class="fixed bottom-0 left-1/2 z-50 h-16 w-full -translate-x-1/2 border-t border-gray-200 bg-white">
  <div class="mx-auto grid h-full max-w-lg grid-cols-6">
    <button data-tooltip-target="tooltip-document" type="button" class="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50">
      <svg class="mb-1 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M.188 5H5V.13a2.96 2.96 0 0 0-1.293.749L.879 3.707c-.358.362-.617.81-.753 1.3C.148 5.011.166 5 .188 5ZM14 8a6 6 0 1 0 0 12 6 6 0 0 0 0-12Zm2 7h-1v1a1 1 0 0 1-2 0v-1h-1a1 1 0 0 1 0-2h1v-1a1 1 0 0 1 2 0v1h1a1 1 0 0 1 0 2Z" />
        <path d="M6 14a7.969 7.969 0 0 1 10-7.737V2a1.97 1.97 0 0 0-1.933-2H7v5a2 2 0 0 1-2 2H.188A.909.909 0 0 1 0 6.962V18a1.969 1.969 0 0 0 1.933 2h6.793A7.976 7.976 0 0 1 6 14Z" />
      </svg>
      <span class="sr-only">New document</span>
    </button>
    <div id="tooltip-document" 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">
      New document
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-bookmark" type="button" class="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50">
      <svg class="mb-1 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 14 20">
        <path d="M13 20a1 1 0 0 1-.64-.231L7 15.3l-5.36 4.469A1 1 0 0 1 0 19V2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v17a1 1 0 0 1-1 1Z" />
      </svg>
      <span class="sr-only">Bookmark</span>
    </button>
    <div id="tooltip-bookmark" 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">
      Bookmark
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <div class="col-span-2 flex items-center justify-center">
      <div class="mx-2 flex w-full max-w-[128px] items-center justify-between rounded-lg bg-gray-100 text-gray-600">
        <button type="button" class="inline-flex h-8 w-6 items-center justify-center rounded-s-lg bg-gray-100 px-1 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200">
          <svg class="h-2 w-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 1 1 5l4 4" />
          </svg>
          <span class="sr-only">Previous page</span>
        </button>
        <span class="mx-1 flex-shrink-0 space-x-0.5 text-sm font-medium rtl:space-x-reverse">1 of 345</span>
        <button type="button" class="inline-flex h-8 w-6 items-center justify-center rounded-e-lg bg-gray-100 px-1 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-200">
          <svg class="h-2 w-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4" />
          </svg>
          <span class="sr-only">Next page</span>
        </button>
      </div>
    </div>
    <button data-tooltip-target="tooltip-settings" type="button" class="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50">
      <svg class="mb-1 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2" />
      </svg>
      <span class="sr-only">Settings</span>
    </button>
    <div id="tooltip-settings" 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">
      Settings
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
    <button data-tooltip-target="tooltip-profile" type="button" class="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50">
      <svg class="mb-1 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
      </svg>
      <span class="sr-only">Profile</span>
    </button>
    <div id="tooltip-profile" 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">
      Profile
      <div class="tooltip-arrow" data-popper-arrow></div>
    </div>
  </div>
</div>

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

User Menu Item With Border

View

<div class="fixed bottom-0 left-0 z-50 h-16 w-full border-t border-gray-200 bg-white">
  <div class="mx-auto grid h-full max-w-lg grid-cols-4 font-medium">
    <button type="button" class="group inline-flex flex-col items-center justify-center border-x border-gray-200 px-5 hover:bg-gray-50">
      <svg class="mb-2 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
      </svg>
      <span class="text-sm text-gray-500 group-hover:text-blue-600">Home</span>
    </button>
    <button type="button" class="group inline-flex flex-col items-center justify-center border-e border-gray-200 px-5 hover:bg-gray-50">
      <svg class="mb-2 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M11.074 4 8.442.408A.95.95 0 0 0 7.014.254L2.926 4h8.148ZM9 13v-1a4 4 0 0 1 4-4h6V6a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h17a1 1 0 0 0 1-1v-2h-6a4 4 0 0 1-4-4Z" />
        <path d="M19 10h-6a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1Zm-4.5 3.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM12.62 4h2.78L12.539.41a1.086 1.086 0 1 0-1.7 1.352L12.62 4Z" />
      </svg>
      <span class="text-sm text-gray-500 group-hover:text-blue-600">Wallet</span>
    </button>
    <button type="button" class="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800">
      <svg class="mb-2 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2" />
      </svg>
      <span class="text-sm text-gray-500 group-hover:text-blue-600">Settings</span>
    </button>
    <button type="button" class="group inline-flex flex-col items-center justify-center border-x border-gray-200 px-5 hover:bg-gray-50">
      <svg class="mb-2 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
      </svg>
      <span class="text-sm text-gray-500 group-hover:text-blue-600">Profile</span>
    </button>
  </div>
</div>

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

User Default Buttom Navigation

View

<div class="fixed bottom-0 left-0 z-50 h-16 w-full border-t border-gray-200 bg-white">
  <div class="mx-auto grid h-full max-w-lg grid-cols-4 font-medium">
    <button type="button" class="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50">
      <svg class="mb-2 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z" />
      </svg>
      <span class="text-sm text-gray-500 group-hover:text-blue-600">Home</span>
    </button>
    <button type="button" class="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50">
      <svg class="mb-2 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M11.074 4 8.442.408A.95.95 0 0 0 7.014.254L2.926 4h8.148ZM9 13v-1a4 4 0 0 1 4-4h6V6a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h17a1 1 0 0 0 1-1v-2h-6a4 4 0 0 1-4-4Z" />
        <path d="M19 10h-6a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1Zm-4.5 3.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM12.62 4h2.78L12.539.41a1.086 1.086 0 1 0-1.7 1.352L12.62 4Z" />
      </svg>
      <span class="text-sm text-gray-500 group-hover:text-blue-600">Wallet</span>
    </button>
    <button type="button" class="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50">
      <svg class="mb-2 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2" />
      </svg>
      <span class="text-sm text-gray-500 group-hover:text-blue-600">Settings</span>
    </button>
    <button type="button" class="group inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50">
      <svg class="mb-2 h-5 w-5 text-gray-500 group-hover:text-blue-600" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
        <path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
      </svg>
      <span class="text-sm text-gray-500 group-hover:text-blue-600">Profile</span>
    </button>
  </div>
</div>

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