Formulaire de paiement Neumorphism
Composant Neumorphism Checkout Form avec une palette de couleurs analogue pour un site Web Portfolio. Il a un design réactif avec prise en charge du mode sombre. Aucun code JavaScript n’est inclus, seulement du HTML avec des classes Tailwind.
HTML Code
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8 flex items-center justify-center">
<div class="max-w-md w-full space-y-8 bg-gray-200 dark:bg-gray-800 p-10 rounded-xl shadow-xl">
<div>
<h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900 dark:text-white">
Checkout
</h2>
</div>
<form class="mt-8 space-y-6" action="#" method="POST">
<input type="hidden" name="remember" value="true">
<div class="rounded-md shadow-sm -space-y-px">
<div>
<label for="email-address" class="sr-only">Email address</label>
<input id="email-address" name="email" type="email" autocomplete="email" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 text-gray-900 dark:text-white rounded-t-md focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm bg-gray-100 dark:bg-gray-700"
placeholder="Email address">
</div>
<div>
<label for="card-number" class="sr-only">Card number</label>
<input id="card-number" name="card-number" type="text" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 text-gray-900 dark:text-white focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm bg-gray-100 dark:bg-gray-700"
placeholder="Card number">
</div>
<div class="flex">
<div class="w-1/2">
<label for="expiration-date" class="sr-only">Expiration date</label>
<input id="expiration-date" name="expiration-date" type="text" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 text-gray-900 dark:text-white rounded-bl-md focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm bg-gray-100 dark:bg-gray-700"
placeholder="MM/YY">
</div>
<div class="w-1/2">
<label for="cvc" class="sr-only">CVC</label>
<input id="cvc" name="cvc" type="text" required class="appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 dark:border-gray-700 placeholder-gray-500 text-gray-900 dark:text-white rounded-br-md focus:outline-none focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm bg-gray-100 dark:bg-gray-700"
placeholder="CVC">
</div>
</div>
</div>
<div>
<button type="submit" class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700专注:outline-none focus:ring-2 focus:ring- offset-2 focus:ring-cyan-500 shadow-md">
Pay Now
</button>
</div>
</form>
</div>
</div>Composants associés
Composant du formulaire de paiement
Un composant de formulaire de paiement minimaliste et plat pour un portfolio, avec des tons de terre, un design réactif, la prise en charge du mode sombre et de multiples éléments interactifs. Utilise HTML et Tailwind CSS.
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.
Composant du formulaire de paiement
Un formulaire de paiement réactif avec un design glassmorphism, avec des éléments translucides semblables à du verre dépoli et une prise en charge du mode sombre.