Tailwind Product Cart Component. https://play.tailwindcss.com/krx231sczv?layout=preview

product_cart_component.html

<section class="md:tw-bg-red-100 tw-bg-gray-100 tw-w-screen tw-h-screen tw-p-5">


  <!-- Product Group Component -->
  <div class="tw-bg-white tw-py-4 tw-px-2 tw-mb-6">

    <!-- Header -->
    <div class="tw-flex tw-border-b tw-py-2 tw-mb-4">
      <div class="tw-flex-1">
        <label>
          <input type="checkbox" name="" class="tw-mr-1">
          Nestle Super Shop
        </label>
      </div>
      <div class="tw-text-right tw-ml-auto">
        <svg class="tw-w-6 tw-h-6 tw-text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
      </div>
    </div>

    <!-- Body -->
    <div>

      <!-- Item -->
      <div class="tw-flex tw-space-x-2 tw-mb-5">

        <!-- Col 1 [Checkbox & Image] -->
        <div class="tw-flex md:tw-items-center tw-space-x-2 tw-mr-2">
          <label>
            <input type="checkbox" name="">
          </label>
          <a href="" class="tw-block tw-w-12 tw-h-12 md:tw-w-20 md:tw-h-20">
            <img src="https://via.placeholder.com/100" class="tw-mx-auto">
          </a>
        </div>

        <!-- Col 2 [Content] -->
        <div class="tw-flex-1 tw-flex-row md:tw-flex tw-items-start tw-space-y-2 md:tw-space-y-0">

          <!-- Title & Info -->
          <div class="tw-flex-1 tw-flex-row tw-space-y-1 tw-mr-4">
            <a href="" class="tw-text-sm md:tw-text-base tw-line-clamp-1 md:tw-line-clamp-2">
              Apple Watch Series 3 GPS - 38mm Sport Lorem ipsum prend hello world jiffie duke derided
            </a>
            <div class="tw-flex tw-space-x-2 tw-text-xs md:tw-text-sm">
              <span class="tw-flex-auto tw-text-gray-600">Shipping 2 - 3 days</span>
              <a href="" class="tw-flex-auto tw-text-yellow-500">
                <svg class="tw-inline-block tw-w-5 tw-h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"></path></svg>
                Add comment
              </a>
            </div>
          </div>

          <!-- [Price, Action] -->
          <div class="tw-flex tw-space-x-2 tw-self-center tw-items-center md:tw-w-[265px]">
            <a href="" class="tw-flex-auto tw-text-yellow-500">
              <svg class="tw-w-5 tw-h-5 md:tw-w-6 md:tw-h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
            </a>
            <a href="" class="tw-flex-auto tw-text-yellow-500">
              <svg class="tw-w-5 tw-h-5 md:tw-w-6 md:tw-h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
            </a>
            <span class="tw-flex-auto tw-font-semibold tw-text-sm md:tw-text-base">Rp. 27.000.000</span>
            <div class="tw-flex-auto">
              <input type="number" value="1" class="tw-w-14 tw-border tw-py-1 tw-px-2">
            </div>
          </div>
        </div>

      </div> <!-- /. Item -->

    </div>
  </div> <!-- /. Product Group Component -->

</section>


<script>
  
// Config
const colors = require('tailwindcss/colors')

module.exports = {
  mode: 'jit',
  prefix: 'tw-',
  theme: {
    extend: {
      colors: {
        sky: colors.sky,
        cyan: colors.cyan,
      },
    },
  },
  variants: {},
  plugins: [
    require('@tailwindcss/line-clamp')
  ],
}



</script>