拟态单色复合物结帐表
一个复杂的、响应式的拟物化结帐表单，采用单色设计，适用于投资组合。包括使用 Tailwind CSS 的深色主题支持。使用渐变背景、微妙的阴影和类似于物理元素的输入字段。
HTML 代码
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-8 flex items-center justify-center">
<div class="max-w-2xl w-full bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-700 rounded-xl shadow-2xl p-8">
<h2 class="text-3xl font-bold text-gray-800 dark:text-white mb-8 text-center">Complete Your Order</h2>
<form>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
<div class="relative">
<label for="firstName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">First Name</label>
<input type="text" id="firstName" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
placeholder="John">
</div>
<div class="relative">
<label for="lastName" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Last Name</label>
<input type="text" id="lastName" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
placeholder="Doe">
</div>
</div>
<div class="mb-6">
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Email Address</label>
<input type="email" id="email" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
placeholder="[email protected]">
</div>
<div class="mb-6">
<label for="address" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Shipping Address</label>
<input type="text" id="address" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
placeholder="123 Main St">
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
<div>
<label for="city" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">City</label>
<input type="text" id="city" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
placeholder="Anytown">
</div>
<div>
<label for="state" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">State</label>
<input type="text" id="state" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
placeholder="CA">
</div>
<div>
<label for="zip" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Zip Code</label>
<input type="text" id="zip" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
placeholder="90210">
</div>
</div>
<div class="mb-6">
<label for="cardNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Credit Card Number</label>
<input type="text" id="cardNumber" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
placeholder="**** **** **** ****">
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div>
<label for="expiryDate" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Expiry Date</label>
<input type="text" id="expiryDate" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
placeholder="MM/YY">
</div>
<div>
<label for="cvc" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CVC</label>
<input type="text" id="cvc" class="w-full px-4 py-3 rounded-lg shadow-inner border-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-white placeholder-gray-500 dark:placeholder-gray-400"
placeholder="123">
</div>
<div class="flex items-end">
<img src="https://www.picsum.photos/id/1084/100/60" alt="Credit Card Placeholder" class="rounded-lg shadow-md">
</div>
</div>
<button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg shadow-xl transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800">
Place Order
</button>
</form>
</div>
</div>