Healthcare_Form_Gradient_Neon
ネオン/エレクトリックカラーグラデーションとスムーズなトランジションを備えた複雑で応答性の高いヘルスケアフォームコンポーネントで、ダークモードをサポートします。複数のインタラクティブ要素を持つ医療アプリケーション向けに設計されています。
HTMLコード
<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>関連コンポーネント
フォームコンポーネント
ミニマリストスタイルでデザインされたレスポンシブフォームコンポーネントで、ソーシャルメディアインターフェイスに適しており、鮮やかな色、ダークモードのサポート、複雑なインタラクションを特徴としています。
ミニマリストフォームコンポーネント
ポートフォリオに合わせたミニマリストフォームコンポーネントで、パステルカラーの配色、シンプルなレイアウト、レスポンシブデザイン、Tailwind CSSを使用したダークモードのサポートが特徴です。
3Dフォームコンポーネント
3D デザイン要素とソーシャル メディア インターフェイス用のパステル カラーを備えたシンプルでレスポンシブなフォーム コンポーネントで、ダーク モードをサポートします。