Composant du formulaire de paiement Glassmorphism
Composant de formulaire de paiement Glassmorphism avec palette de couleurs Earth Tones, complexité modérée et conception réactive avec prise en charge du thème sombre. Convient à des fins de blog/contenu.
HTML Code
<div class="min-h-screen bg-stone-100 py-6 flex flex-col justify-center sm:py-12 dark:bg-stone-900">
<div class="relative py-3 sm:max-w-xl sm:mx-auto">
<div class="absolute inset-0 bg-gradient-to-r from-stone-400 to-stone-600 shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"></div>
<div class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20 dark:bg-stone-800 dark:text-stone-200 backdrop-filter backdrop-blur-xl bg-opacity-20 dark:bg-opacity-10">
<div class="max-w-md mx-auto">
<div>
<h1 class="text-2xl font-semibold text-stone-800 dark:text-stone-100">Checkout Form</h1>
</div>
<div class="divide-y divide-stone-200">
<div class="py-8 text-base leading-6 space-y-4 text-stone-700 sm:text-lg sm:leading-7 dark:text-stone-300">
<div class="relative">
<input autocomplete="off" id="email" name="email" type="text" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-Rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Email address" />
<label for="email" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Email Address</label>
</div>
<div class="relative">
<input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
<label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Card Number</label>
</div>
<div class="relative">
<input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
<label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">Expiry Date</label>
</div>
<div class="relative">
<input autocomplete="off" id="password" name="password" type="password" class="peer placeholder-transparent h-10 w-full border-b-2 border-stone-300 text-stone-900 focus:outline-none focus:borer-rose-600 dark:text-stone-100 dark:border-stone-700 dark:focus:border-stone-600 bg-transparent" placeholder="Password" />
<label for="password" class="absolute left-0 -top-3.5 text-stone-600 text-sm peer-placeholder-shown:text-base peer-placeholder-shown:text-stone-400 peer-placeholder-shown:top-2 transition-all dark:text-stone-400 dark:peer-placeholder-shown:text-stone-600">CVV</label>
</div>
<div class="relative">
<button class="bg-stone-600 text-white rounded-md px-6 py-2 dark:bg-stone-700">Submit</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant du formulaire de paiement
Un formulaire de paiement en mode sombre avec des couleurs vives, une complexité modérée et un design réactif, adapté aux interfaces de médias sociaux.
Composant du formulaire de paiement
Un composant de formulaire de paiement réactif avec des couleurs vives et des micro-interactions, prenant en charge le thème sombre. Il comprend des sections pour l’adresse de livraison, les détails de paiement et le récapitulatif de la commande, le tout stylisé avec Tailwind CSS pour une expérience de commerce électronique complexe.
Composant du formulaire de paiement
Un composant de formulaire de paiement simple et réactif avec un design Glassmorphism, une palette de couleurs monochromatiques et une prise en charge du thème sombre, conçu à l’aide de Tailwind CSS.