Компонент формы оформления заказа
Сложный, вдохновленный бумагой/печатью компонент формы оформления заказа с драгоценными тонами, разработанный для документации/вики-сайтов, с полной отзывчивостью и поддержкой темного режима.
HTML-код
<div class="bg-gradient-to-br from-emerald-50 to-teal-100 p-4 sm:p-6 md:p-8 min-h-screen dark:from-slate-900 dark:to-emerald-950">
<!-- Paper Container -->
<div class="max-w-4xl mx-auto bg-white rounded-lg shadow-xl overflow-hidden md:flex md:before:content-[''] md:before:absolute md:before:inset-0 md:before:bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] dark:bg-slate-800 dark:shadow-2xl dark:shadow-emerald-900 border border-t-8 border-gem-blue-500 relative dark:border-gem-blue-700">
<!-- Left Fold / Navigation -->
<div class="md:w-1/3 p-6 bg-gem-navy-800 text-gem-gold-100 flex flex-col justify-between dark:bg-gem-navy-900 border-r border-gem-navy-700">
<div>
<h2 class="text-2xl font-serif mb-4 text-gem-gold-200">Order Summary</h2>
<ul class="space-y-3 text-sm">
<li class="flex justify-between items-center">
<span>Product Name One</span>
<span>$19.99</span>
</li>
<li class="flex justify-between items-center">
<span>Product Name Two</span>
<span>$29.99</span>
</li>
<li class="flex justify-between items-center">
<span>Shipping</span>
<span>$5.00</span>
</li>
<li class="flex justify-between items-center font-bold border-t border-gem-navy-700 pt-3 mt-3">
<span>Total</span>
<span>$54.98</span>
</li>
</ul>
<div class="mt-8">
<h3 class="text-lg font-serif mb-3 text-gem-gold-200">Order Progress</h3>
<div class="space-y-4">
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gem-emerald-500 flex items-center justify-center text-gem-navy-900 font-bold text-sm mr-3 dark:bg-gem-emerald-600">1</div>
<span class="text-gem-gold-500">Personal Details</span>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gem-sapphire-500 flex items-center justify-center text-gem-navy-900 font-bold text-sm mr-3 dark:bg-gem-sapphire-600">2</div>
<span class="text-gem-gold-500">Shipping Address</span>
</div>
<div class="flex items-center">
<div class="w-8 h-8 rounded-full bg-gem-ruby-500 flex items-center justify-center text-gem-navy-900 font-bold text-sm mr-3 dark:bg-gem-ruby-600">3</div>
<span class="text-gem-gold-500">Payment Information</span>
</div>
<div class="flex items-center opacity-60">
<div class="w-8 h-8 rounded-full bg-gray-500 flex items-center justify-center text-gray-900 font-bold text-sm mr-3">4</div>
<span>Review & Confirm</span>
</div>
</div>
</div>
</div>
<div class="mt-8 pt-6 border-t border-gem-navy-700 text-xs text-gem-gold-300">
<p>© 2023 Acme Corp. All rights reserved.</p>
<p class="mt-1">Documentation & Support</p>
</div>
</div>
<!-- Right Page / Form Content -->
<div class="md:w-2/3 p-6 sm:p-8 bg-gem-gold-50 dark:bg-slate-850 dark:text-gray-200 relative">
<div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-[0.03] dark:opacity-5"></div>
<div class="relative z-10">
<h1 class="text-3xl sm:text-4xl font-serif text-gem-ruby-700 mb-6 dark:text-gem-ruby-400">Checkout Details</h1>
<form class="space-y-6">
<!-- Personal Details -->
<fieldset>
<legend class="text-xl font-serif text-gem-emerald-700 mb-4 pb-2 border-b border-gem-emerald-200 dark:text-gem-emerald-400 dark:border-gem-emerald-700">1. Personal Details</legend>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="first_name" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">First Name</label>
<input type="text" id="first_name" name="first_name" autocomplete="given-name" class="w-full p-3 border border-gem-sapphire-300 rounded-md focus:ring-2 focus:ring-gem-sapphire-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-sapphire-600 dark:text-gray-100 dark:focus:ring-gem-sapphire-400 placeholder-gem-sapphire-400" placeholder="John">
</div>
<div>
<label for="last_name" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Last Name</label>
<input type="text" id="last_name" name="last_name" autocomplete="family-name" class="w-full p-3 border border-gem-sapphire-300 rounded-md focus:ring-2 focus:ring-gem-sapphire-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-sapphire-600 dark:text-gray-100 dark:focus:ring-gem-sapphire-400" placeholder="Doe">
</div>
<div class="sm:col-span-2">
<label for="email" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Email Address</label>
<input type="email" id="email" name="email" autocomplete="email" class="w-full p-3 border border-gem-sapphire-300 rounded-md focus:ring-2 focus:ring-gem-sapphire-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-sapphire-600 dark:text-gray-100 dark:focus:ring-gem-sapphire-400" placeholder="[email protected]">
</div>
</div>
</fieldset>
<!-- Shipping Address -->
<fieldset>
<legend class="text-xl font-serif text-gem-sapphire-700 mb-4 pb-2 border-b border-gem-sapphire-200 dark:text-gem-sapphire-400 dark:border-gem-sapphire-700">2. Shipping Address</legend>
<div class="grid grid-cols-1 gap-4">
<div>
<label for="address_line1" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Address Line 1</label>
<input type="text" id="address_line1" name="address_line1" autocomplete="address-line1" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="123 Main St">
</div>
<div>
<label for="address_line2" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Address Line 2 (Optional)</label>
<input type="text" id="address_line2" name="address_line2" autocomplete="address-line2" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="Apt, Suite, Etc.">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div>
<label for="city" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">City</label>
<input type="text" id="city" name="city" autocomplete="address-level2" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="Anytown">
</div>
<div>
<label for="state" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">State / Province</label>
<input type="text" id="state" name="state" autocomplete="address-level1" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="CA">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">ZIP / Postal Code</label>
<input type="text" id="zip" name="zip" autocomplete="postal-code" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" placeholder="90210">
</div>
</div>
<div>
<label for="country" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Country</label>
<select id="country" name="country" autocomplete="country-name" class="w-full p-3 border border-gem-ruby-300 rounded-md focus:ring-2 focus:ring-gem-ruby-500 focus:border-transparent appearance-none bg-no-repeat bg-right-center pr-10 dark:bg-slate-700 dark:border-gem-ruby-600 dark:text-gray-100 dark:focus:ring-gem-ruby-400" style="background-image: url('data:image/svg+xml;utf8,<svg fill="%234F46E5" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/%3E%3C/svg%3E'); background-size: 1.5rem;">
<option value="">Select Country</option>
<option value="US">United States</option>
<option value="CA">Canada</option>
<option value="GB">United Kingdom</option>
</select>
</div>
</div>
</fieldset>
<!-- Payment Information -->
<fieldset>
<legend class="text-xl font-serif text-gem-ruby-700 mb-4 pb-2 border-b border-gem-ruby-200 dark:text-gem-ruby-400 dark:border-gem-ruby-700">3. Payment Information</legend>
<div class="grid grid-cols-1 gap-4">
<div>
<label for="card_number" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Card Number</label>
<input type="text" id="card_number" name="card_number" autocomplete="cc-number" placeholder="XXXX XXXX XXXX XXXX" class="w-full p-3 border border-gem-emerald-300 rounded-md focus:ring-2 focus:ring-gem-emerald-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-emerald-600 dark:text-gray-100 dark:focus:ring-gem-emerald-400">
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
<div class="sm:col-span-2">
<label for="expiry_date" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">Expiry Date (MM/YY)</label>
<input type="text" id="expiry_date" name="expiry_date" autocomplete="cc-exp" placeholder="MM/YY" class="w-full p-3 border border-gem-emerald-300 rounded-md focus:ring-2 focus:ring-gem-emerald-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-emerald-600 dark:text-gray-100 dark:focus:ring-gem-emerald-400">
</div>
<div>
<label for="cvv" class="block text-sm font-medium text-gem-navy-700 mb-1 dark:text-gem-gold-300">CVV</label>
<input type="text" id="cvv" name="cvv" autocomplete="cc-csc" placeholder="123" class="w-full p-3 border border-gem-emerald-300 rounded-md focus:ring-2 focus:ring-gem-emerald-500 focus:border-transparent dark:bg-slate-700 dark:border-gem-emerald-600 dark:text-gray-100 dark:focus:ring-gem-emerald-400">
</div>
</div>
</div>
</fieldset>
<div class="flex justify-end pt-4">
<button type="submit" class="bg-gem-ruby-600 text-gem-gold-50 py-3 px-8 rounded-full font-bold shadow-lg hover:bg-gem-ruby-700 focus:outline-none focus:ring-4 focus:ring-gem-ruby-300 transition duration-300 ease-in-out dark:bg-gem-ruby-700 dark:hover:bg-gem-ruby-800 dark:focus:ring-gem-ruby-500">
Complete Order
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Custom Colors for Jewel Tones (define in your tailwind.config.js) -->
<style>
.text-gem-gold-100 { color: #fdf5e6; }
.text-gem-gold-200 { color: #fcf1d8; }
.text-gem-gold-300 { color: #f7e0b5; }
.text-gem-gold-50 { color: #fffefb; /* Nearly white for contrast */ }
.bg-gem-gold-50 { background-color: #fffefb; /* Nearly white for contrast */ }
.text-gem-emerald-700 { color: #065F46; }
.bg-gem-emerald-500 { background-color: #10B981; }
.border-gem-emerald-200 { border-color: #A7F3D0; }
.border-gem-emerald-300 { border-color: #6EE7B7; }
.focus-ring-gem-emerald-500 { --tw-ring-color: #10B981; }
.dark\:text-gem-emerald-400 { color: #4ade80; }
.dark\:border-gem-emerald-600 { border-color: #059669; }
.dark\:focus\:ring-gem-emerald-400 { --tw-ring-color: #4ade80; }
.dark\:bg-gem-emerald-600 { background-color: #059669; }
.dark\:border-gem-emerald-700 { border-color: #047857; }
.text-gem-sapphire-700 { color: #1e3a8a; }
.bg-gem-sapphire-500 { background-color: #3B82F6; }
.border-gem-sapphire-200 { border-color: #BFDBFE; }
.border-gem-sapphire-300 { border-color: #93C5FD; }
.focus-ring-gem-sapphire-500 { --tw-ring-color: #3B82F6; }
.dark\:text-gem-sapphire-400 { color: #60a5fa; }
.dark\:border-gem-sapphire-600 { border-color: #2563eb; }
.dark\:focus\:ring-gem-sapphire-400 { --tw-ring-color: #60a5fa; }
.dark\:bg-gem-sapphire-600 { background-color: #2563eb; }
.dark\:border-gem-sapphire-700 { border-color: #1d4ed8; }
.text-gem-ruby-700 { color: #991B1B; }
.bg-gem-ruby-500 { background-color: #EF4444; }
.bg-gem-ruby-600 { background-color: #DC2626; }
.hover\:bg-gem-ruby-700:hover { background-color: #B91C1C; }
.border-gem-ruby-200 { border-color: #FECACA; }
.border-gem-ruby-300 { border-color: #FCA5A5; }
.focus-ring-gem-ruby-300 { --tw-ring-color: #FECACA; }
.focus-ring-gem-ruby-500 { --tw-ring-color: #EF4444; }
.dark\:text-gem-ruby-400 { color: #F87171; }
.dark\:border-gem-ruby-600 { border-color: #DC2626; }
.dark\:focus\:ring-gem-ruby-400 { --tw-ring-color: #F87171; }
.dark\:bg-gem-ruby-700 { background-color: #B91C1C; }
.dark\:hover\:bg-gem-ruby-800:hover { background-color: #991B1B; }
.dark\:focus\:ring-gem-ruby-500 { --tw-ring-color: #EF4444;}
.bg-gem-navy-800 { background-color: #1E293B; }
.dark\:bg-gem-navy-900 { background-color: #0F172A; }
.border-gem-navy-700 { border-color: #334155; }
.border-gem-blue-500 { border-color: #3B82F6; }
.dark\:border-gem-blue-700 { border-color: #1D4ED8; }
</style>
</div>Связанные компоненты
Компонент формы оформления заказа
Адаптивный компонент формы оформления заказа с яркими цветами и микровзаимодействиями, поддерживающий темную тему. Он включает в себя разделы с адресом доставки, платежными реквизитами и кратким описанием заказа, и все это стилизовано с помощью Tailwind CSS для сложного взаимодействия с электронной коммерцией.
Компонент формы оформления заказа - здравоохранение/медицина
Сложный, отзывчивый компонент формы оформления заказа с мягкой, художественной акварельной темой дизайна, теплой нейтральной цветовой схемой и поддержкой темного режима, подходящий для здравоохранения и медицинских приложений.
Компонент формы оформления заказа
Отзывчивая форма оформления заказа с черно-белым монохромным стилем, ярким акцентным цветом, градиентными переходами и поддержкой темного режима, подходит для приложений для спорта/фитнеса.