Complexe monochromatique skeuomorphe Formulaire de paiement
Un formulaire de paiement skeuomorphe complexe et réactif au design monochromatique, adapté à un portfolio. Inclut la prise en charge du thème sombre à l’aide de Tailwind CSS. Utilise des arrière-plans dégradés, des ombres subtiles et des champs de saisie qui ressemblent à des éléments physiques.
HTML Code
<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>Composants associés
Composant du formulaire de paiement - Neumorphic Corporate Blues
Un composant de formulaire de paiement complexe et réactif avec un style de conception neumorphique, utilisant des tons bleus d’entreprise. Il prend en charge le mode sombre et convient aux sites Web d’entreprise.
Composant du formulaire de paiement
Un composant de formulaire de paiement complexe et réactif avec les principes de conception matérielle, la palette de couleurs en niveaux de gris et la prise en charge du mode sombre, mis en œuvre à l’aide de Tailwind CSS pour les interfaces de médias sociaux.
Composant du formulaire de paiement
Un formulaire de paiement réactif avec un style monochrome noir et blanc, une couleur d’accentuation vive, des transitions dégradées et une prise en charge du mode sombre, adapté aux applications de sport/fitness.