E-commerce 06

            
<div class="rounded-lg shadow-lg flex flex-col md:flex-row space-x-4 overflow-hidden max-w-xl">
  <div class="w-full md:w-48">
    <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"alt="" class="min-h-full object-cover">
  </div>
  <div class="py-6 lg:py-4 px-4 flex-1">
    <h3 class="font-semibold text-lg mb-2">Tailwind Component Pack €79</h3>
    <span class="block font-semibold">5 left</span>
    <p class="mt-4">One morning, when Gregor Samsa woke from troubled dreams, he found himself It showed transformed.</p>
    <div class="flex space-x-2 mt-2">
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">SM</a>
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">MD</a>
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">LG</a>
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">XL</a>
      <a href="#" class="bg-gray-100 hover:bg-gray-200 w-10 h-10 border inline-flex items-center justify-center">XXL</a>
    </div>
    <button class="bg-gray-600 hover:bg-gray-500 font-semibold rounded-lg py-2 px-4 text-white mt-6 inline-block">Add to cart</button>
  </div>
</div>