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 - 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 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.
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.