Healthcare_Form_Gradient_Neon
Un composant de formulaire de soins de santé complexe et réactif avec des dégradés de couleurs néon/électriques et des transitions fluides, prenant en charge le mode sombre. Conçu pour les applications médicales avec de multiples éléments interactifs.
HTML Code
<div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-900 via-zinc-950 to-blue-900 dark:from-zinc-950 dark:via-blue-950 dark:to-purple-950 text-white font-sans overflow-hidden">
<div class="max-w-4xl mx-auto bg-gradient-to-br from-purple-700 via-pink-700 to-blue-700 dark:from-zinc-800 dark:via-purple-800 dark:to-blue-800 rounded-3xl shadow-xl p-8 sm:p-10 lg:p-12 border border-purple-500 dark:border-blue-700 transform transition-all duration-500 hover:shadow-2xl hover:scale-[1.01]">
<h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-10 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 via-pink-300 to-lime-300 dark:from-teal-400 dark:via-pink-400 dark:to-lime-400 drop-shadow-lg animate-pulse-light">
Patient Registration Form
</h2>
<form class="space-y-8">
<!-- Personal Information Section -->
<fieldset class="border-t-2 border-b-2 border-indigo-400 dark:border-teal-600 pt-6 pb-8 space-y-6">
<legend class="text-2xl sm:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-lime-300 to-pink-300 dark:from-lime-400 dark:to-pink-400 px-3 -mt-6 ml-4 drop-shadow-md">Personal Information</legend>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="full-name" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Full Name</label>
<input type="text" name="full-name" id="full-name" autocomplete="name" placeholder="John Doe" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
</div>
<div>
<label for="dob" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Date of Birth</label>
<input type="date" name="dob" id="dob" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="email" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Email Address</label>
<input type="email" name="email" id="email" autocomplete="email" placeholder="[email protected]" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
</div>
<div>
<label for="phone" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Phone Number</label>
<input type="tel" name="phone" id="phone" autocomplete="tel" placeholder="(123) 456-7890" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
</div>
</div>
<div>
<label for="address" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Street Address</label>
<input type="text" name="address" id="address" autocomplete="street-address" placeholder="123 Main St" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
</div>
<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
<div>
<label for="city" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">City</label>
<input type="text" name="city" id="city" autocomplete="address-level2" placeholder="Anytown" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
</div>
<div>
<label for="state" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">State</label>
<input type="text" name="state" id="state" autocomplete="address-level1" placeholder="CA" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
</div>
<div>
<label for="zip" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">ZIP Code</label>
<input type="text" name="zip" id="zip" autocomplete="postal-code" placeholder="90210" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
</div>
</div>
</fieldset>
<!-- Medical History Section -->
<fieldset class="border-t-2 border-b-2 border-indigo-400 dark:border-teal-600 pt-6 pb-8 space-y-6">
<legend class="text-2xl sm:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-lime-300 to-pink-300 dark:from-lime-400 dark:to-pink-400 px-3 -mt-6 ml-4 drop-shadow-md">Medical History</legend>
<div>
<label class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-3">Are you currently taking any medications?</label>
<div class="flex flex-wrap gap-x-6 gap-y-3">
<div class="flex items-center">
<input id="meds-yes" name="medications" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
<label for="meds-yes" class="ml-2 block text-base text-white">Yes</label>
</div>
<div class="flex items-center">
<input id="meds-no" name="medications" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
<label for="meds-no" class="ml-2 block text-base text-white">No</label>
</div>
</div>
</div>
<div>
<label for="past-conditions" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Please list any significant past medical conditions or surgeries:</label>
<textarea id="past-conditions" name="past-conditions" rows="4" placeholder="e.g., Hypertension, Appendectomy (2010)" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300"></textarea>
</div>
<div>
<label class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-3">Do you have any known allergies?</label>
<div class="flex flex-wrap gap-x-6 gap-y-3 pb-2">
<div class="flex items-center">
<input id="allergies-yes" name="allergies" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
<label for="allergies-yes" class="ml-2 block text-base text-white">Yes</label>
</div>
<div class="flex items-center">
<input id="allergies-no" name="allergies" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
<label for="allergies-no" class="ml-2 block text-base text-white">No</label>
</div>
</div>
<textarea id="allergy-details" name="allergy-details" rows="2" placeholder="If yes, please specify (e.g., Penicillin, Peanuts)" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300"></textarea>
</div>
<div>
<label class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-3">Immunization Status (check all that apply):</label>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="flex items-center">
<input id="immunization-flu" name="immunizations[]" type="checkbox" value="flu" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
<label for="immunization-flu" class="ml-2 block text-base text-white">Annual Flu Shot</label>
</div>
<div class="flex items-center">
<input id="immunization-tetanus" name="immunizations[]" type="checkbox" value="tetanus" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
<label for="immunization-tetanus" class="ml-2 block text-base text-white">Tetanus (last 10 yrs)</label>
</div>
<div class="flex items-center">
<input id="immunization-hpv" name="immunizations[]" type="checkbox" value="hpv" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
<label for="immunization-hpv" class="ml-2 block text-base text-white">HPV</label>
</div>
<div class="flex items-center">
<input id="immunization-covid" name="immunizations[]" type="checkbox" value="covid" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
<label for="immunization-covid" class="ml-2 block text-base text-white">COVID-19</label>
</div>
<div class="flex items-center">
<input id="immunization-mmr" name="immunizations[]" type="checkbox" value="mmr" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
<label for="immunization-mmr" class="ml-2 block text-base text-white">MMR</label>
</div>
<div class="flex items-center">
<input id="immunization-other" name="immunizations[]" type="checkbox" value="other" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
<label for="immunization-other" class="ml-2 block text-base text-white mb-2">Other (specify below)</label>
</div>
</div>
<textarea id="immunization-details" name="immunization-details" rows="2" placeholder="Specify other immunizations" class="w-full mt-2 px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300"></textarea>
</div>
</fieldset>
<!-- Emergency Contact Section -->
<fieldset class="border-t-2 border-b-2 border-emerald-400/50 dark:border-cyan-600/50 pt-6 pb-8 space-y-6">
<legend class="text-2xl sm:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-300 to-cyan-300 dark:from-orange-400 dark:to-cyan-400 px-3 -mt-6 ml-4 drop-shadow-md">Emergency Contact</legend>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<label for="ec-name" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Full Name</label>
<input type="text" name="ec-name" id="ec-name" autocomplete="name" placeholder="Jane Doe" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
</div>
<div>
<label for="ec-relationship" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Relationship</label>
<input type="text" name="ec-relationship" id="ec-relationship" placeholder="Spouse, Parent, Friend" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
</div>
</div>
<div>
<label for="ec-phone" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Phone Number</label>
<input type="tel" name="ec-phone" id="ec-phone" autocomplete="tel" placeholder="(987) 654-3210" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
</div>
</fieldset>
<div class="flex justify-end pt-4">
<button type="submit" class="w-full sm:w-auto px-8 py-4 rounded-xl font-bold text-lg bg-gradient-to-r from-teal-400 to-lime-400 dark:from-sky-400 dark:to-cyan-400 text-zinc-900 shadow-lg hover:from-teal-300 hover:to-lime-300 dark:hover:from-sky-300 dark:hover:to-cyan-300 focus:outline-none focus:ring-4 focus:ring-teal-500/50 dark:focus:ring-cyan-500/50 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 active:scale-95 glow-on-hover">
Submit Registration
</button>
</div>
</form>
</div>
<style>
@keyframes pulse-light {
0%, 100% { filter: brightness(1); }
50% { filter: brightness(1.2); }
}
.animate-pulse-light {
animation: pulse-light 3s infinite ease-in-out;
}
.glow-on-hover {
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.glow-on-hover::before {
content: '';
background: linear-gradient(45deg, #00C9FF, #92FE9D, #00FFC0, #FFD700, #FF4500, #FF0077, #FF00C1, #A020F0, #00C9FF);
position: absolute;
top: -2px;
left: -2px;
background-size: 400%;
z-index: -1;
filter: blur(8px);
width: calc(100% + 4px);
height: calc(100% + 4px);
animation: glowing 20s linear infinite;
opacity: 0;
transition: opacity .3s ease-in-out;
border-radius: 20px;
}
.glow-on-hover:active {
color: #000
}
.glow-on-hover:active:after {
background: transparent;
}
.glow-on-hover:hover:before {
opacity: 1;
}
.glow-on-hover::after {
z-index: -1;
content: '';
position: absolute;
width: 100%;
height: 100%;
background: inherit; /* inherit the background of the button */
left: 0;
top: 0;
border-radius: inherit;
}
@keyframes glowing {
0% { background-position: 0 0; }
50% { background-position: 400% 0; }
100% { background-position: 0 0; }
}
</style>
</div>Composants associés
Composant Formulaires
Un composant de formulaires complexe, réactif et à thème sombre pour les interfaces de médias sociaux avec un design monochrome 3D. Utilise Tailwind CSS avec les préfixes dark : pour le mode sombre et inclut des exemples d’éléments de formulaire.
JobApplicationForm_WatercolorArtistic
Un formulaire de candidature complexe et réactif avec un style aquarelle/design artistique et une palette de couleurs arc-en-ciel dégradée. Comprend des sections pour les détails personnels, l’expérience, l’éducation et les téléchargements de fichiers, avec prise en charge du mode sombre, adaptées aux sites d’emploi et aux plateformes de carrière.
Skeuomorphic_Social_Media_Form_Complex
Un composant de formulaire de réseau social complexe et skeuomorphe avec des couleurs complémentaires, un design réactif et une prise en charge du mode sombre. Imite les sensations et les textures des boutons du monde réel.