ecommerce / page-examples / checkout-pages
Split With Order Summary
07-split-with-order-summary.jsx
const products = [
{
id: 1,
name: 'High Wall Tote',
href: '#',
price: '$210.00',
color: 'White and black',
size: '15L',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/checkout-page-07-product-01.jpg',
imageAlt: 'Front of zip tote bag with white canvas, white handles, and black drawstring top.',
},
{
id: 2,
name: 'Flap Stuff Satchel',
href: '#',
price: '$330.00',
color: 'Sand',
size: '11L',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/checkout-page-07-product-02.jpg',
imageAlt: 'Front of satchel with light brown canvas body, flap top, and matching straps and handle.',
},
{
id: 3,
name: 'Wrap Clutch',
href: '#',
price: '$30.00',
color: 'Light gray',
size: '0.3L',
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/checkout-page-07-product-03.jpg',
imageAlt: 'Light grey canvas pouch with leather wrap strap and fold flap.',
},
]
export default function Example() {
return (
<div className="bg-white">
{/* Background color split screen for large screens */}
<div aria-hidden="true" className="fixed top-0 left-0 hidden h-full w-1/2 bg-white lg:block" />
<div aria-hidden="true" className="fixed top-0 right-0 hidden h-full w-1/2 bg-indigo-900 lg:block" />
<header className="relative mx-auto max-w-7xl bg-indigo-900 py-6 lg:grid lg:grid-cols-2 lg:gap-x-16 lg:bg-transparent lg:px-8 lg:pt-16 lg:pb-10">
<div className="mx-auto flex max-w-2xl px-4 lg:w-full lg:max-w-lg lg:px-0">
<a href="#">
<span className="sr-only">Your Company</span>
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=300"
className="h-8 w-auto lg:hidden"
/>
<img
alt=""
src="https://tailwindcss.com/plus-assets/img/logos/mark.svg?color=indigo&shade=600"
className="hidden h-8 w-auto lg:block"
/>
</a>
</div>
</header>
<main className="relative mx-auto grid max-w-7xl grid-cols-1 gap-x-16 lg:grid-cols-2 lg:px-8">
<h1 className="sr-only">Checkout</h1>
<section
aria-labelledby="summary-heading"
className="bg-indigo-900 pt-6 pb-12 text-indigo-300 md:px-10 lg:col-start-2 lg:row-start-1 lg:mx-auto lg:w-full lg:max-w-lg lg:bg-transparent lg:px-0 lg:pt-0 lg:pb-24"
>
<div className="mx-auto max-w-2xl px-4 lg:max-w-none lg:px-0">
<h2 id="summary-heading" className="sr-only">
Order summary
</h2>
<dl>
<dt className="text-sm font-medium">Amount due</dt>
<dd className="mt-1 text-3xl font-bold tracking-tight text-white">$232.00</dd>
</dl>
<ul role="list" className="divide-y divide-white/10 text-sm font-medium">
{products.map((product) => (
<li key={product.id} className="flex items-start space-x-4 py-6">
<img
alt={product.imageAlt}
src={product.imageSrc}
className="size-20 flex-none rounded-md object-cover"
/>
<div className="flex-auto space-y-1">
<h3 className="text-white">{product.name}</h3>
<p>{product.color}</p>
<p>{product.size}</p>
</div>
<p className="flex-none text-base font-medium text-white">{product.price}</p>
</li>
))}
</ul>
<dl className="space-y-6 border-t border-white/10 pt-6 text-sm font-medium">
<div className="flex items-center justify-between">
<dt>Subtotal</dt>
<dd>$570.00</dd>
</div>
<div className="flex items-center justify-between">
<dt>Shipping</dt>
<dd>$25.00</dd>
</div>
<div className="flex items-center justify-between">
<dt>Taxes</dt>
<dd>$47.60</dd>
</div>
<div className="flex items-center justify-between border-t border-white/10 pt-6 text-white">
<dt className="text-base">Total</dt>
<dd className="text-base">$642.60</dd>
</div>
</dl>
</div>
</section>
<section
aria-labelledby="payment-and-shipping-heading"
className="py-16 lg:col-start-1 lg:row-start-1 lg:mx-auto lg:w-full lg:max-w-lg lg:pt-0 lg:pb-24"
>
<h2 id="payment-and-shipping-heading" className="sr-only">
Payment and shipping details
</h2>
<form>
<div className="mx-auto max-w-2xl px-4 lg:max-w-none lg:px-0">
<div>
<h3 id="contact-info-heading" className="text-lg font-medium text-gray-900">
Contact information
</h3>
<div className="mt-6">
<label htmlFor="email-address" className="block text-sm/6 font-medium text-gray-700">
Email address
</label>
<div className="mt-2">
<input
id="email-address"
name="email-address"
type="email"
autoComplete="email"
className="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
/>
</div>
</div>
</div>
<div className="mt-10">
<h3 id="payment-heading" className="text-lg font-medium text-gray-900">
Payment details
</h3>
<div className="mt-6 grid grid-cols-3 gap-x-4 gap-y-6 sm:grid-cols-4">
<div className="col-span-3 sm:col-span-4">
<label htmlFor="card-number" className="block text-sm/6 font-medium text-gray-700">
Card number
</label>
<div className="mt-2">
<input
id="card-number"
name="card-number"
type="text"
autoComplete="cc-number"
className="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
/>
</div>
</div>
<div className="col-span-2 sm:col-span-3">
<label htmlFor="expiration-date" className="block text-sm/6 font-medium text-gray-700">
Expiration date (MM/YY)
</label>
<div className="mt-2">
<input
id="expiration-date"
name="expiration-date"
type="text"
autoComplete="cc-exp"
className="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
/>
</div>
</div>
<div>
<label htmlFor="cvc" className="block text-sm/6 font-medium text-gray-700">
CVC
</label>
<div className="mt-2">
<input
id="cvc"
name="cvc"
type="text"
autoComplete="csc"
className="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
/>
</div>
</div>
</div>
</div>
<div className="mt-10">
<h3 id="shipping-heading" className="text-lg font-medium text-gray-900">
Shipping address
</h3>
<div className="mt-6 grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-3">
<div className="sm:col-span-3">
<label htmlFor="address" className="block text-sm/6 font-medium text-gray-700">
Address
</label>
<div className="mt-2">
<input
id="address"
name="address"
type="text"
autoComplete="street-address"
className="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
/>
</div>
</div>
<div>
<label htmlFor="city" className="block text-sm/6 font-medium text-gray-700">
City
</label>
<div className="mt-2">
<input
id="city"
name="city"
type="text"
autoComplete="address-level2"
className="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
/>
</div>
</div>
<div>
<label htmlFor="region" className="block text-sm/6 font-medium text-gray-700">
State / Province
</label>
<div className="mt-2">
<input
id="region"
name="region"
type="text"
autoComplete="address-level1"
className="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
/>
</div>
</div>
<div>
<label htmlFor="postal-code" className="block text-sm/6 font-medium text-gray-700">
Postal code
</label>
<div className="mt-2">
<input
id="postal-code"
name="postal-code"
type="text"
autoComplete="postal-code"
className="block w-full rounded-md bg-white px-3 py-2 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"
/>
</div>
</div>
</div>
</div>
<div className="mt-10">
<h3 className="text-lg font-medium text-gray-900">Billing information</h3>
<div className="mt-6 flex gap-3">
<div className="flex h-5 shrink-0 items-center">
<div className="group grid size-4 grid-cols-1">
<input
defaultChecked
id="same-as-shipping"
name="same-as-shipping"
type="checkbox"
className="col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
/>
<svg
fill="none"
viewBox="0 0 14 14"
className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25"
>
<path
d="M3 8L6 11L11 3.5"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="opacity-0 group-has-checked:opacity-100"
/>
<path
d="M3 7H11"
strokeWidth={2}
strokeLinecap="round"
strokeLinejoin="round"
className="opacity-0 group-has-indeterminate:opacity-100"
/>
</svg>
</div>
</div>
<label htmlFor="same-as-shipping" className="text-sm font-medium text-gray-900">
Same as shipping information
</label>
</div>
</div>
<div className="mt-10 flex justify-end border-t border-gray-200 pt-6">
<button
type="submit"
className="rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-xs hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 focus:outline-hidden"
>
Pay now
</button>
</div>
</div>
</form>
</section>
</main>
</div>
)
}