Skip to content

Instantly share code, notes, and snippets.

@antoniputra

antoniputra/product_checkout_component.html

Created October 16, 2021 17:10
Show Gist options
  • Save antoniputra/cebd1e03e94c877eed86e30b412d2ab3 to your computer and use it in GitHub Desktop.
Save antoniputra/cebd1e03e94c877eed86e30b412d2ab3 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind Product Checkout Component. https://play.tailwindcss.com/cPmsb51QxD?layout=preview
Raw
product_checkout_component.html
<section class="tw-w-screen tw-h-screen tw-bg-green-100 md:tw-bg-gray-100 tw-p-5">
<!-- Component Checkout Item Group List -->
<div class="tw-bg-white tw-py-4 tw-mb-6">
<!-- Item Group Content -->
<div class="tw-flex-row md:tw-flex tw-px-4">
<!-- Col 1 -->
<div class="tw-flex-auto md:tw-w-[60%] tw-mb-6 md:tw-mb-0 md:tw-mr-3 md:tw-pr-3 md:tw-border-r">
<!-- Profile -->
<div class="tw-flex tw-mb-4">
<a href="" class="tw-w-10 tw-h-10 tw-mr-2 tw-rounded-full tw-overflow-hidden">
<img src="https://via.placeholder.com/150" />
</a>
<div class="tw-flex-1">
<a href="" class="tw-inline-block tw-font-medium">Bali Hive Foundation</a>
<span class="tw-block tw-text-gray-600 tw-text-sm">Bali, Indonesia</span>
</div>
</div> <!-- Profile -->
<!-- Items -->
<div class="tw-flex tw-space-x-2 tw-pt-4 tw-mb-2 tw-border-t">
<!-- item col 1 -->
<a href="" class="tw-w-10 tw-h-10 md:tw-w-14 md:tw-h-14 tw-rounded tw-overflow-hidden">
<img src="https://via.placeholder.com/150" />
</a>
<!-- item col 2 -->
<div class="tw-flex-1">
<a href="" class="tw-line-clamp-2 tw-text-sm md:tw-text-base">
Apple Watch Series 3 GPS 38mm Sport Band - Aluminum Case
</a>
<span class="tw-text-gray-500 tw-text-xs md:tw-text-sm">Shipping 1 days</span>
</div>
<!-- item col 2 -->
<div class="tw-flex-none tw-text-right md:tw-self-center">
<span class="tw-font-semibold tw-text-sm md:tw-text-base">Rp. 12.000.000</span>
</div>
</div> <!-- Items -->
</div>
<!-- Col 2 -->
<div class="tw-flex-auto md:tw-w-[40%] tw-py-2 tw-border-t md:tw-border-none">
<div class="tw-mb-3 tw-font-semibold">
Choose shippping method
</div>
<div class="tw-mb-3">
<select name="" class="tw-border tw-w-full tw-py-2 tw-px-1">
<option>DHL Delivery</option>
</select>
</div>
<div class="tw-text-sm">
<div class="tw-flex tw-mb-2">
<span class="tw-flex-1 tw-text-gray-600">Method:</span>
<span class="tw-flex-1 tw-font-semibold tw-text-right">DHL Delivery</span>
</div>
<div class="tw-flex tw-mb-2">
<span class="tw-flex-1 tw-text-gray-600">Delivery Fee:</span>
<span class="tw-flex-1 tw-font-semibold tw-text-right">Rp. 700.000</span>
</div>
<div class="tw-flex tw-mb-2">
<span class="tw-flex-1 tw-text-gray-600">Delivery Time:</span>
<span class="tw-flex-1 tw-font-semibold tw-text-right">12 March, 2021</span>
</div>
</div>
</div>
</div>
<!-- Item Group Content -->
<!-- Item Group Footer -->
<div class="tw-flex tw-mt-4 tw-py-2 tw-px-4 tw-border-t tw-font-semibold">
<span class="tw-flex-1 tw-text-left">Subtotal</span>
<span class="tw-flex-1 tw-text-right">Rp. 12.700.000</span>
</div>
</div> <!-- Component Checkout Item Group List -->
<!-- Sample Loop -->
<!-- Component Checkout Item Group List -->
<div class="tw-bg-white tw-py-4 tw-mb-6">
<!-- Item Group Content -->
<div class="tw-flex-row md:tw-flex tw-px-4">
<!-- Col 1 -->
<div class="tw-flex-auto md:tw-w-[60%] tw-mb-6 md:tw-mb-0 md:tw-mr-3 md:tw-pr-3 md:tw-border-r">
<!-- Profile -->
<div class="tw-flex tw-mb-4">
<a href="" class="tw-w-10 tw-h-10 tw-mr-2 tw-rounded-full tw-overflow-hidden">
<img src="https://via.placeholder.com/150" />
</a>
<div class="tw-flex-1">
<a href="" class="tw-inline-block tw-font-medium">Bali Hive Foundation</a>
<span class="tw-block tw-text-gray-600 tw-text-sm">Bali, Indonesia</span>
</div>
</div> <!-- Profile -->
<!-- Items -->
<div class="tw-flex tw-space-x-2 tw-pt-4 tw-mb-2 tw-border-t">
<!-- item col 1 -->
<a href="" class="tw-w-10 tw-h-10 md:tw-w-14 md:tw-h-14 tw-rounded tw-overflow-hidden">
<img src="https://via.placeholder.com/150" />
</a>
<!-- item col 2 -->
<div class="tw-flex-1">
<a href="" class="tw-line-clamp-2 tw-text-sm md:tw-text-base">
Apple Watch Series 3 GPS 38mm Sport Band - Aluminum Case
</a>
<span class="tw-text-gray-500 tw-text-xs md:tw-text-sm">Shipping 1 days</span>
</div>
<!-- item col 2 -->
<div class="tw-flex-none tw-text-right md:tw-self-center">
<span class="tw-font-semibold tw-text-sm md:tw-text-base">Rp. 12.000.000</span>
</div>
</div> <!-- Items -->
<!-- Items -->
<div class="tw-flex tw-space-x-2 tw-pt-4 tw-mb-2 tw-border-t">
<!-- item col 1 -->
<a href="" class="tw-w-10 tw-h-10 md:tw-w-14 md:tw-h-14 tw-rounded tw-overflow-hidden">
<img src="https://via.placeholder.com/150" />
</a>
<!-- item col 2 -->
<div class="tw-flex-1">
<a href="" class="tw-line-clamp-2 tw-text-sm md:tw-text-base">
Apple Watch Series 3 GPS 38mm Sport Band - Aluminum Case
</a>
<span class="tw-text-gray-500 tw-text-xs md:tw-text-sm">Shipping 1 days</span>
</div>
<!-- item col 2 -->
<div class="tw-flex-none tw-text-right md:tw-self-center">
<span class="tw-font-semibold tw-text-sm md:tw-text-base">Rp. 12.000.000</span>
</div>
</div> <!-- Items -->
</div>
<!-- Col 2 -->
<div class="tw-flex-auto md:tw-w-[40%] tw-py-2 tw-border-t md:tw-border-none">
<div class="tw-mb-3 tw-font-semibold">
Choose shippping method
</div>
<div class="tw-mb-3">
<select name="" class="tw-border tw-w-full tw-py-2 tw-px-1">
<option>DHL Delivery</option>
</select>
</div>
<div class="tw-text-sm">
<div class="tw-flex tw-mb-2">
<span class="tw-flex-1 tw-text-gray-600">Method:</span>
<span class="tw-flex-1 tw-font-semibold tw-text-right">DHL Delivery</span>
</div>
<div class="tw-flex tw-mb-2">
<span class="tw-flex-1 tw-text-gray-600">Delivery Fee:</span>
<span class="tw-flex-1 tw-font-semibold tw-text-right">Rp. 700.000</span>
</div>
<div class="tw-flex tw-mb-2">
<span class="tw-flex-1 tw-text-gray-600">Delivery Time:</span>
<span class="tw-flex-1 tw-font-semibold tw-text-right">12 March, 2021</span>
</div>
</div>
</div>
</div>
<!-- Item Group Content -->
<!-- Item Group Footer -->
<div class="tw-flex tw-mt-4 tw-py-2 tw-px-4 tw-border-t tw-font-semibold">
<span class="tw-flex-1 tw-text-left">Subtotal</span>
<span class="tw-flex-1 tw-text-right">Rp. 12.700.000</span>
</div>
</div> <!-- Component Checkout Item Group List -->
</section>
<script>
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment