In this tutorial, we will create simple tailwind css eCommerce checkout page ui, tailwind css e-commerce checkout template ui, examples with Tailwind CSS.
How to install & setup Tailwind CSS v3
Tool Use
Tailwind CSS 2.x / 3.x
Heroicons Icons
Unsplash Image
Tailwind CSS Simple Ecommerce Checkout Page UI.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Simple Ecommerce Checkout Page UI Example </title>
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
<div class="mt-20">
<h1 class="flex items-center justify-center font-bold text-blue-600 text-md lg:text-3xl">Tailwind CSS
Ecommerce
Checkout Page UI
</h1>
</div>
<div class="container p-12 mx-auto">
<div class="flex flex-col w-full px-0 mx-auto md:flex-row">
<div class="flex flex-col md:w-full">
<h2 class="mb-4 font-bold md:text-xl text-heading ">Shipping Address
</h2>
<form class="justify-center w-full mx-auto" method="post" action>
<div class="">
<div class="space-x-0 lg:flex lg:space-x-4">
<div class="w-full lg:w-1/2">
<label for="firstName" class="block mb-3 text-sm font-semibold text-gray-500">First
Name</label>
<input name="firstName" type="text" placeholder="First Name"
class="w-full px-4 py-3 text-sm border border-gray-300 rounded lg:text-sm focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
<div class="w-full lg:w-1/2 ">
<label for="firstName" class="block mb-3 text-sm font-semibold text-gray-500">Last
Name</label>
<input name="Last Name" type="text" placeholder="Last Name"
class="w-full px-4 py-3 text-sm border border-gray-300 rounded lg:text-sm focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
</div>
<div class="mt-4">
<div class="w-full">
<label for="Email"
class="block mb-3 text-sm font-semibold text-gray-500">Email</label>
<input name="Last Name" type="text" placeholder="Email"
class="w-full px-4 py-3 text-sm border border-gray-300 rounded lg:text-sm focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
</div>
<div class="mt-4">
<div class="w-full">
<label for="Address"
class="block mb-3 text-sm font-semibold text-gray-500">Address</label>
<textarea
class="w-full px-4 py-3 text-xs border border-gray-300 rounded lg:text-sm focus:outline-none focus:ring-1 focus:ring-blue-600"
name="Address" cols="20" rows="4" placeholder="Address"></textarea>
</div>
</div>
<div class="space-x-0 lg:flex lg:space-x-4">
<div class="w-full lg:w-1/2">
<label for="city"
class="block mb-3 text-sm font-semibold text-gray-500">City</label>
<input name="city" type="text" placeholder="City"
class="w-full px-4 py-3 text-sm border border-gray-300 rounded lg:text-sm focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
<div class="w-full lg:w-1/2 ">
<label for="postcode" class="block mb-3 text-sm font-semibold text-gray-500">
Postcode</label>
<input name="postcode" type="text" placeholder="Post Code"
class="w-full px-4 py-3 text-sm border border-gray-300 rounded lg:text-sm focus:outline-none focus:ring-1 focus:ring-blue-600">
</div>
</div>
<div class="flex items-center mt-4">
<label class="flex items-center text-sm group text-heading">
<input type="checkbox"
class="w-5 h-5 border border-gray-300 rounded focus:outline-none focus:ring-1">
<span class="ml-2">Save this information for next time</span></label>
</div>
<div class="relative pt-3 xl:pt-6"><label for="note"
class="block mb-3 text-sm font-semibold text-gray-500"> Notes
(Optional)</label><textarea name="note"
class="flex items-center w-full px-4 py-3 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-600"
rows="4" placeholder="Notes for delivery"></textarea>
</div>
<div class="mt-4">
<button
class="w-full px-6 py-2 text-blue-200 bg-blue-600 hover:bg-blue-900">Process</button>
</div>
</div>
</form>
</div>
<div class="flex flex-col w-full ml-0 lg:ml-12 lg:w-2/5">
<div class="pt-12 md:pt-0 2xl:ps-4">
<h2 class="text-xl font-bold">Order Summary
</h2>
<div class="mt-8">
<div class="flex flex-col space-y-4">
<div class="flex space-x-4">
<div>
<img src="https://source.unsplash.com/user/erondu/1600x900" alt="image"
class="w-60">
</div>
<div>
<h2 class="text-xl font-bold">Title</h2>
<p class="text-sm">Lorem ipsum dolor sit amet, tet</p>
<span class="text-red-600">Price</span> $20
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
<div class="flex space-x-4">
<div>
<img src="https://source.unsplash.com/collection/190727/1600x900" alt="image"
class="w-60">
</div>
<div>
<h2 class="text-xl font-bold">Title</h2>
<p class="text-sm">Lorem ipsum dolor sit amet, tet</p>
<span class="text-red-600">Price</span> $20
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M6 18L18 6M6 6l12 12" />
</svg>
</div>
</div>
</div>
</div>
<div class="flex p-4 mt-4">
<h2 class="text-xl font-bold">ITEMS 2</h2>
</div>
<div
class="flex items-center w-full py-4 text-sm font-semibold border-b border-gray-300 lg:py-5 lg:px-3 text-heading last:border-b-0 last:text-base last:pb-0">
Subtotal<span class="ml-2">$40.00</span></div>
<div
class="flex items-center w-full py-4 text-sm font-semibold border-b border-gray-300 lg:py-5 lg:px-3 text-heading last:border-b-0 last:text-base last:pb-0">
Shipping Tax<span class="ml-2">$10</span></div>
<div
class="flex items-center w-full py-4 text-sm font-semibold border-b border-gray-300 lg:py-5 lg:px-3 text-heading last:border-b-0 last:text-base last:pb-0">
Total<span class="ml-2">$50.00</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
tailwind Ecommerce checkout
Design a checkout form page using Tailwind CSS
<div class="bg-gray-100 flex items-center justify-center h-screen">
<div class="max-w-2xl lg:w-full bg-white p-8 border rounded-md shadow-md">
<h2 class="text-3xl font-semibold mb-4 text-center">Checkout</h2>
<form action="#" method="POST">
<!-- Billing Information -->
<div class="mb-4">
<label for="name" class="block text-sm font-medium text-gray-600">Full Name</label>
<input type="text" id="name" name="name"
class="mt-1 p-2 w-full border rounded-md focus:outline-none focus:border-blue-500">
</div>
<div class="mb-4">
<label for="email" class="block text-sm font-medium text-gray-600">Email Address</label>
<input type="email" id="email" name="email"
class="mt-1 p-2 w-full border rounded-md focus:outline-none focus:border-blue-500">
</div>
<div class="mb-4">
<label for="address" class="block text-sm font-medium text-gray-600">Address</label>
<input type="text" id="address" name="address"
class="mt-1 p-2 w-full border rounded-md focus:outline-none focus:border-blue-500">
</div>
<div class="mb-4">
<label for="city" class="block text-sm font-medium text-gray-600">City</label>
<input type="text" id="city" name="city"
class="mt-1 p-2 w-full border rounded-md focus:outline-none focus:border-blue-500">
</div>
<div class="mb-4">
<label for="zip" class="block text-sm font-medium text-gray-600">ZIP Code</label>
<input type="text" id="zip" name="zip"
class="mt-1 p-2 w-full border rounded-md focus:outline-none focus:border-blue-500">
</div>
<!-- Payment Information -->
<div class="mb-4">
<label for="card" class="block text-sm font-medium text-gray-600">Card Number</label>
<input type="text" id="card" name="card"
class="mt-1 p-2 w-full border rounded-md focus:outline-none focus:border-blue-500">
</div>
<div class="mb-4 flex">
<div class="w-1/2 mr-2">
<label for="expiry" class="block text-sm font-medium text-gray-600">Expiry Date</label>
<input type="text" id="expiry" name="expiry" placeholder="MM/YY"
class="mt-1 p-2 w-full border rounded-md focus:outline-none focus:border-blue-500">
</div>
<div class="w-1/2 ml-2">
<label for="cvv" class="block text-sm font-medium text-gray-600">CVV</label>
<input type="text" id="cvv" name="cvv"
class="mt-1 p-2 w-full border rounded-md focus:outline-none focus:border-blue-500">
</div>
</div>
<div class="mt-8">
<button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded-md hover:bg-blue-600 w-full">Place
Order</button>
</div>
</form>
</div>
</div>
checkout form tailwind
Read Also
Tailwind CSS 3 FAQ Accordion UI Example
Tailwind CSS 3 Alert Message Example
Tailwind CSS 3 Avatars Example
Tailwind CSS 3 Breadcrumb Example
Tailwind CSS Gradient Button Example
Tailwind CSS 3D Button Example
Tailwind CSS Loading Button Example
Tailwind CSS v3 Cards Examples
Tailwind CSS Checkbox Form Examples
Tailwind CSS Dropdowns (Menu) on Hover Example
Tailwind CSS Multiselect Dropdown Example
How to use dark mode toggle switch in Tailwind CSS 3
How to use @apply directive in Tailwind CSS
Tailwind CSS sticky header & fixed navbar example
Tailwind CSS Navbar UI Example
Tailwind CSS 3 Login Page UI Example
Tailwind CSS Login Modal Example
Tailwind CSS 3 Overlay Image Example
Tailwind CSS Thank You Page Example
Tailwind CSS Timeline UI Example
Tailwind CSS Responsive Footer Section Example
Tailwind CSS Background Image Header Example
