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>

Image Diff

View

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

Forum PostCard

View

<div>
      <h3 class="font-medium sm:text-lg">
        <a href="#" class="hover:underline"> Question about Livewire Rendering and Alpine JS </a>
      </h3>

<p class="line-clamp-2 text-sm text-gray-700">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Accusamus, accusantium temporibus
        iure delectus ut totam natus nesciunt ex? Ducimus, enim.
      </p>

<p class="text-xs">14 comments</p>
        </div>

<span class="hidden sm:block" aria-hidden="true">&middot;</span>

<p class="hidden sm:block sm:text-xs sm:text-gray-500">
          Posted by
          <a href="#" class="font-medium underline hover:text-gray-700"> John </a>
        </p>
      </div>
    </div>
  </div>

<span class="text-[10px] font-medium sm:text-xs">Solved!</span>
    </strong>
  </div>
</article>

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

Card With Button

View

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

Card Group With Background Color

View

<div class="flex flex-col w-full max-w-screen-sm lg:max-w-screen-lg">
  <h2 class="font-semibold text-xl my-4 p-0.5">Card Background Color</h2>

<div class="w-full grid gap-5 gap-x-10 sm:grid-cols-2 lg:grid-cols-3">
  <div class="max-w-sm rounded-lg border border-gray-200 bg-white shadow">
    <div class="p-5">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
        Read more
        <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    </div>
  </div>
  <div class="max-w-sm rounded-lg border border-gray-200 bg-sky-500/10 shadow">
    <div class="p-5">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
        Read more
        <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    </div>
  </div>
  <div class="max-w-sm rounded-lg border border-gray-200 bg-green-500/10 shadow">
    <div class="p-5">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
        Read more
        <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    </div>
  </div>
  <div class="max-w-sm rounded-lg border border-gray-200 bg-red-500/10 shadow">
    <div class="p-5">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
        Read more
        <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    </div>
  </div>
  <div class="max-w-sm rounded-lg border border-gray-200 bg-yellow-500/10 shadow">
    <div class="p-5">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
        Read more
        <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    </div>
  </div>  
  <div class="max-w-sm rounded-lg border border-gray-200 bg-gradient-to-r from-yellow-500/20 to-indigo-100 shadow">
    <div class="p-5">
      <a href="#">
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">Noteworthy technology acquisitions 2000</h5>
      </a>
      <p class="mb-3 font-normal text-gray-700">Here are the biggest enterprise technology acquisitions of 2000 so far, in reverse chronological order.</p>
      <a href="#" class="inline-flex items-center rounded-lg bg-blue-700 px-3 py-2 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300">
        Read more
        <svg class="ms-2 h-3.5 w-3.5 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
          <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9" />
        </svg>
      </a>
    </div>
  </div>
</div>
</div>
</div>

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

Heading Underline

View

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