E-commerce 08

            
<div class="bg-gray-50 text-gray-600 px-6 lg:px-8 pt-12 pb-20">
  <div class="max-w-screen-xl mx-auto">
    <div class="overflow-x-auto">
      <div class="align-middle inline-block min-w-full overflow-hidden font-semibold">
        <table class="min-w-full">
          <thead class="text-left bg-gray-200">
            <tr>
              <th class="py-2 px-3"> </th>
              <th class="py-2 px-3">Product</th>
              <th class="py-2 px-3">Quantity</th>
              <th class="py-2 px-3">Price</th>
              <th class="py-2 px-3">Total</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-blue-100  whitespace-nowrap lg:whitespace-normal">
            <tr>
              <td class="py-3 px-3">
                <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"class="w-24" alt="">
              </td>
              <td class="py-3 px-3">Red Jacket</td>
              <td class="py-3 px-3">
                <input type="number" class="w-12 bg-white border text-center py-1" value="2"> 
              </td>
              <td class="py-3 px-3">€22</td>
              <td class="py-3 px-3">€49</td>
            </tr>
            <tr>
              <td class="py-3 px-3">
                <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"class="w-24" alt="">
              </td>
              <td class="py-3 px-3">Gray shirt</td>
              <td class="py-3 px-3">
                <input type="number" class="w-12 bg-white border text-center py-1" value="1"> 
              </td>
              <td class="py-3 px-3">€45</td>
              <td class="py-3 px-3">€89</td>
            </tr>
            <tr>
              <td class="py-3 px-3">
                <img src="http://demo-assets.uibak.com/themesdev/placeholder-square.svg"class="w-24" alt="">
              </td>
              <td class="py-3 px-3">Blue jeans</td>
              <td class="py-3 px-3">
                <input type="number" class="w-12 bg-white border text-center py-1" value="3"> 
              </td>
              <td class="py-3 px-3">€31</td>
              <td class="py-3 px-3">€129</td>
            </tr>
            <tr>
              <td class="py-3 px-3 text-right" colspan="4">
                Total:
              </td>
              <td class="py-3 px-3">€482</td>
            </tr>
            <tr>
              <td class="py-3 px-3 text-right" colspan="4">
                Vat 21%:
              </td>
              <td class="py-3 px-3">€213</td>
            </tr>
            <tr>
              <td class="py-3 px-3 text-right" colspan="4">
                To pay:
              </td>
              <td class="py-3 px-3">€4128</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>