226 lines
10 KiB
JavaScript
226 lines
10 KiB
JavaScript
/*
|
|
This example requires some changes to your config:
|
|
|
|
```
|
|
// tailwind.config.js
|
|
module.exports = {
|
|
// ...
|
|
plugins: [
|
|
// ...
|
|
require('@tailwindcss/forms'),
|
|
],
|
|
}
|
|
```
|
|
*/
|
|
import { UserIcon } from '@heroicons/react/24/outline'
|
|
|
|
const products = [
|
|
{
|
|
id: 1,
|
|
name: "Women's Basic Tee",
|
|
href: '#',
|
|
price: '$32.00',
|
|
color: 'Gray',
|
|
size: 'S',
|
|
imageSrc: 'https://tailwindui.com/img/ecommerce-images/checkout-page-05-product-01.jpg',
|
|
imageAlt: "Front of women's basic tee in heather gray.",
|
|
},
|
|
// More products...
|
|
]
|
|
|
|
export default function Example() {
|
|
return (
|
|
<div className="bg-white">
|
|
<header className="flex items-center justify-between px-4 py-10 sm:px-6 sm:py-8 lg:px-8">
|
|
<a href="#">
|
|
<span className="sr-only">Your Company</span>
|
|
<img src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600" alt="" className="h-8 w-auto" />
|
|
</a>
|
|
<div className="hidden sm:flex sm:items-center sm:space-x-8">
|
|
<a href="#" className="text-sm font-medium text-gray-700">
|
|
Contact support
|
|
</a>
|
|
<a href="#" className="-m-2 p-2 text-gray-400 hover:text-gray-500">
|
|
<span className="sr-only">Account</span>
|
|
<UserIcon className="h-6 w-6" aria-hidden="true" />
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="mx-auto max-w-7xl px-4 pb-16 pt-4 sm:px-6 sm:pb-24 sm:pt-8 lg:px-8 xl:px-2 xl:pt-14">
|
|
<h1 className="sr-only">Checkout</h1>
|
|
|
|
<div className="mx-auto grid max-w-lg grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-2">
|
|
<div className="mx-auto w-full max-w-lg">
|
|
<h2 className="sr-only">Order summary</h2>
|
|
|
|
<div className="flow-root">
|
|
<ul role="list" className="-my-6 divide-y divide-gray-200">
|
|
{products.map((product) => (
|
|
<li key={product.id} className="flex space-x-6 py-6">
|
|
<img
|
|
src={product.imageSrc}
|
|
alt={product.imageAlt}
|
|
className="h-24 w-24 flex-none rounded-md bg-gray-100 object-cover object-center"
|
|
/>
|
|
<div className="flex-auto">
|
|
<div className="space-y-1 sm:flex sm:items-start sm:justify-between sm:space-x-6">
|
|
<div className="flex-auto space-y-1 text-sm font-medium">
|
|
<h3 className="text-gray-900">
|
|
<a href={product.href}>{product.name}</a>
|
|
</h3>
|
|
<p className="text-gray-900">{product.price}</p>
|
|
<p className="hidden text-gray-500 sm:block">{product.color}</p>
|
|
<p className="hidden text-gray-500 sm:block">{product.size}</p>
|
|
</div>
|
|
<div className="flex flex-none space-x-4">
|
|
<button type="button" className="text-sm font-medium text-indigo-600 hover:text-indigo-500">
|
|
Edit
|
|
</button>
|
|
<div className="flex border-l border-gray-300 pl-4">
|
|
<button type="button" className="text-sm font-medium text-indigo-600 hover:text-indigo-500">
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<dl className="mt-10 space-y-6 text-sm font-medium text-gray-500">
|
|
<div className="flex justify-between">
|
|
<dt>Subtotal</dt>
|
|
<dd className="text-gray-900">$104.00</dd>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<dt>Taxes</dt>
|
|
<dd className="text-gray-900">$8.32</dd>
|
|
</div>
|
|
<div className="flex justify-between">
|
|
<dt>Shipping</dt>
|
|
<dd className="text-gray-900">$14.00</dd>
|
|
</div>
|
|
<div className="flex justify-between border-t border-gray-200 pt-6 text-gray-900">
|
|
<dt className="text-base">Total</dt>
|
|
<dd className="text-base">$126.32</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div className="mx-auto w-full max-w-lg">
|
|
<button
|
|
type="button"
|
|
className="flex w-full items-center justify-center rounded-md border border-transparent bg-black py-2 text-white hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2"
|
|
>
|
|
<span className="sr-only">Pay with Apple Pay</span>
|
|
<svg className="h-5 w-auto" fill="currentColor" viewBox="0 0 50 20">
|
|
<path d="M9.536 2.579c-.571.675-1.485 1.208-2.4 1.132-.113-.914.334-1.884.858-2.484C8.565.533 9.564.038 10.374 0c.095.951-.276 1.884-.838 2.579zm.829 1.313c-1.324-.077-2.457.751-3.085.751-.638 0-1.6-.713-2.647-.694-1.362.019-2.628.79-3.323 2.017-1.429 2.455-.372 6.09 1.009 8.087.676.99 1.485 2.075 2.552 2.036 1.009-.038 1.409-.656 2.628-.656 1.228 0 1.58.656 2.647.637 1.104-.019 1.8-.99 2.475-1.979.771-1.122 1.086-2.217 1.105-2.274-.02-.019-2.133-.828-2.152-3.263-.02-2.036 1.666-3.007 1.742-3.064-.952-1.408-2.437-1.56-2.951-1.598zm7.645-2.76v14.834h2.305v-5.072h3.19c2.913 0 4.96-1.998 4.96-4.89 0-2.893-2.01-4.872-4.885-4.872h-5.57zm2.305 1.941h2.656c2 0 3.142 1.066 3.142 2.94 0 1.875-1.142 2.95-3.151 2.95h-2.647v-5.89zM32.673 16.08c1.448 0 2.79-.733 3.4-1.893h.047v1.779h2.133V8.582c0-2.14-1.714-3.52-4.351-3.52-2.447 0-4.256 1.399-4.323 3.32h2.076c.171-.913 1.018-1.512 2.18-1.512 1.41 0 2.2.656 2.2 1.865v.818l-2.876.171c-2.675.162-4.123 1.256-4.123 3.159 0 1.922 1.495 3.197 3.637 3.197zm.62-1.76c-1.229 0-2.01-.59-2.01-1.494 0-.933.752-1.475 2.19-1.56l2.562-.162v.837c0 1.39-1.181 2.379-2.743 2.379zM41.1 20c2.247 0 3.304-.856 4.227-3.454l4.047-11.341h-2.342l-2.714 8.763h-.047l-2.714-8.763h-2.409l3.904 10.799-.21.656c-.352 1.114-.923 1.542-1.942 1.542-.18 0-.533-.02-.676-.038v1.779c.133.038.705.057.876.057z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div className="relative mt-8">
|
|
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
|
<div className="w-full border-t border-gray-200" />
|
|
</div>
|
|
<div className="relative flex justify-center">
|
|
<span className="bg-white px-4 text-sm font-medium text-gray-500">or</span>
|
|
</div>
|
|
</div>
|
|
|
|
<form className="mt-6">
|
|
<h2 className="text-lg font-medium text-gray-900">Contact information</h2>
|
|
|
|
<div className="mt-6">
|
|
<label htmlFor="email-address" className="block text-sm font-medium text-gray-700">
|
|
Email address
|
|
</label>
|
|
<div className="mt-1">
|
|
<input
|
|
type="email"
|
|
id="email-address"
|
|
name="email-address"
|
|
autoComplete="email"
|
|
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6">
|
|
<label htmlFor="phone" className="block text-sm font-medium text-gray-700">
|
|
Phone number
|
|
</label>
|
|
<div className="mt-1">
|
|
<input
|
|
type="text"
|
|
name="phone"
|
|
id="phone"
|
|
autoComplete="tel"
|
|
className="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 flex space-x-2">
|
|
<div className="flex h-5 items-center">
|
|
<input
|
|
id="terms"
|
|
name="terms"
|
|
type="checkbox"
|
|
className="h-4 w-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500"
|
|
/>
|
|
</div>
|
|
<label htmlFor="terms" className="text-sm text-gray-500">
|
|
I have read the terms and conditions and agree to the sale of my personal information to the highest
|
|
bidder.
|
|
</label>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled
|
|
className="mt-6 w-full rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500"
|
|
>
|
|
Continue
|
|
</button>
|
|
</form>
|
|
|
|
<div className="mt-10 divide-y divide-gray-200 border-b border-t border-gray-200">
|
|
<button
|
|
type="button"
|
|
disabled
|
|
className="w-full cursor-auto py-6 text-left text-lg font-medium text-gray-500"
|
|
>
|
|
Payment details
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled
|
|
className="w-full cursor-auto py-6 text-left text-lg font-medium text-gray-500"
|
|
>
|
|
Shipping address
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled
|
|
className="w-full cursor-auto py-6 text-left text-lg font-medium text-gray-500"
|
|
>
|
|
Billing address
|
|
</button>
|
|
<button
|
|
type="button"
|
|
disabled
|
|
className="w-full cursor-auto py-6 text-left text-lg font-medium text-gray-500"
|
|
>
|
|
Review
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|