Neon_Glow_Healthcare_Container_Component
Un composant de conteneur complexe et réactif pour les applications de soins de santé avec une palette de couleurs néon/noir et blanc et un accent vibrant. Dispose de plusieurs éléments interactifs, de la prise en charge du mode sombre et du HTML sémantique.
HTML Code
<div class="min-h-screen bg-gray-950 text-gray-200 dark:bg-black dark:text-gray-100 p-4 sm:p-8 flex items-center justify-center font-sans tracking-wide">
<div class="w-full max-w-6xl bg-gray-900 border border-purple-700 rounded-xl shadow-2xl dark:bg-gray-950 dark:border-purple-600 overflow-hidden
relative
before:content-[''] before:absolute before:inset-0 before:blur-3xl before:bg-gradient-to-br before:from-purple-900 before:to-fuchsia-900 before:opacity-20 before:z-0
after:content-[''] after:absolute after:inset-0 after:blur-3xl after:bg-gradient-to-tl after:from-cyan-900 after:to-teal-900 after:opacity-20 after:z-0
hover:shadow-[0_0_80px_rgba(128,0,128,0.7),_0_0_120px_rgba(255,0,255,0.7)] transition-all duration-500 will-change-transform transform hover:-translate-y-1">
<div class="relative z-10 p-6 sm:p-10 lg:p-12">
<!-- Header Section -->
<div class="text-center mb-10">
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white mb-4 leading-tight tracking-tighter
text-shadow-neon-purple drop-shadow-[0_0_15px_rgba(255,0,255,0.8)] dark:drop-shadow-[0_0_20px_rgba(238,130,238,0.9)] transition-colors duration-300">
<span class="block">Precision Health Portal</span>
</h1>
<p class="text-purple-300 text-lg sm:text-xl font-light leading-relaxed
text-shadow-neon-cyan drop-shadow-[0_0_10px_rgba(0,255,255,0.5)] dark:drop-shadow-[0_0_15px_rgba(0,191,255,0.7)] transition-colors duration-300">
Advanced Diagnostics & Personalized Care
</p>
</div>
<!-- Main Content Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
<!-- Card 1: Patient Overview -->
<div class="col-span-1 rounded-lg p-5 bg-gray-800 border border-purple-800 shadow-lg dark:bg-gray-850 dark:border-purple-700
relative overflow-hidden group
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-transparent before:via-purple-900/10 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
hover:shadow-purple-glow-sm transform hover:-translate-y-1 transition-all duration-300">
<h2 class="text-2xl font-bold text-purple-400 mb-3 tracking-wide
text-shadow-neon-purple-xs">Patient Summary</h2>
<p class="text-gray-300 mb-4 text-sm">Quick glance at essential patient data.</p>
<div class="flex items-center space-x-4 mb-4">
<img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Patient Avatar" class="w-16 h-16 rounded-full border-2 border-purple-500 shadow-md group-hover:border-cyan-400 transition-colors duration-300">
<div>
<p class="text-lg text-white font-semibold">John Doe</p>
<p class="text-purple-300 text-sm">DOB: 12/05/1980</p>
</div>
</div>
<ul class="list-none space-y-2 text-sm text-gray-300">
<li class="flex items-center text-cyan-300 group-hover:text-cyan-400"><svg class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 9a1 1 0 11-2 0 1 1 0 012 0zm5-1a1 1 0 10-2 0 1 1 0 002 0zm-3 4a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>Allergies: Penicillin</li>
<li class="flex items-center text-cyan-300 group-hover:text-cyan-400"><svg class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2h4a2 2 0 012 2v2H4V5zm3 4h4a1 1 0 011 1v7a1 1 0 01-1 1H7a1 1 0 01-1-1v-7a1 1 0 011-1z" clip-rule="evenodd"></path></svg>Medications: Simvastatin</li>
<li class="flex items-center text-cyan-300 group-hover:text-cyan-400"><svg class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>Last Visit: 2023-10-26</li>
</ul>
<button class="mt-6 w-full py-2 px-4 rounded-md bg-purple-700 text-white font-semibold transform hover:scale-105
shadow-md shadow-purple-900 group-hover:bg-purple-600 transition-all duration-300
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:animate-shimmer">
<span class="relative z-10">View Full Record</span>
</button>
</div>
<!-- Card 2: Upcoming Appointments -->
<div class="col-span-1 rounded-lg p-5 bg-gray-800 border border-cyan-800 shadow-lg dark:bg-gray-850 dark:border-cyan-700
relative overflow-hidden group
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-transparent before:via-cyan-900/10 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
hover:shadow-cyan-glow-sm transform hover:-translate-y-1 transition-all duration-300">
<h2 class="text-2xl font-bold text-cyan-400 mb-3 tracking-wide
text-shadow-neon-cyan-xs">Appointments</h2>
<p class="text-gray-300 mb-4 text-sm">Your next medical consultations.</p>
<ul class="space-y-4">
<li class="flex items-start bg-gray-700 p-3 rounded-md border border-cyan-700 group-hover:border-cyan-600 transition-colors duration-300">
<div class="flex-shrink-0 mr-3 text-cyan-300 group-hover:text-cyan-400"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg></div>
<div>
<p class="font-semibold text-white">Cardiology Checkup</p>
<p class="text-sm text-cyan-200">Dec 15, 2023 | 10:00 AM</p>
<p class="text-xs text-gray-400">Dr. Emily Chen - Clinic B</p>
</div>
</li>
<li class="flex items-start bg-gray-700 p-3 rounded-md border border-cyan-700 group-hover:border-cyan-600 transition-colors duration-300">
<div class="flex-shrink-0 mr-3 text-cyan-300 group-hover:text-cyan-400"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg></div>
<div>
<p class="font-semibold text-white">Radiology Scan</p>
<p class="text-sm text-cyan-200">Jan 05, 2024 | 02:30 PM</p>
<p class="text-xs text-gray-400">Imaging Dept.</p>
</div>
</li>
</ul>
<button class="mt-6 w-full py-2 px-4 rounded-md bg-cyan-700 text-white font-semibold transform hover:scale-105
shadow-md shadow-cyan-900 group-hover:bg-cyan-600 transition-all duration-300
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:animate-shimmer">
<span class="relative z-10">Schedule New Appointment</span>
</button>
</div>
<!-- Card 3: Recent Test Results -->
<div class="col-span-1 rounded-lg p-5 bg-gray-800 border border-purple-800 shadow-lg dark:bg-gray-850 dark:border-purple-700
relative overflow-hidden group
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-transparent before:via-purple-900/10 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
hover:shadow-purple-glow-sm transform hover:-translate-y-1 transition-all duration-300">
<h2 class="text-2xl font-bold text-purple-400 mb-3 tracking-wide
text-shadow-neon-purple-xs">Test Results</h2>
<p class="text-gray-300 mb-4 text-sm">View your latest lab results.</p>
<ul class="space-y-4">
<li class="flex items-start bg-gray-700 p-3 rounded-md border border-purple-700 group-hover:border-purple-600 transition-colors duration-300">
<div class="flex-shrink-0 mr-3 text-purple-300 group-hover:text-purple-400"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 01-3 3H7a3 3 0 01-3-3V4a3 3 0 013-3h6a3 3 0 013 3v1a3 3 0 01-3 3h-2.1l-.85 2.1c-.24.58-.69 1.03-1.27 1.27L9 14.15V19a1 1 0 11-2 0v-4.85l-.85-2.1c-.24-.58-.69-1.03-1.27-1.27L4 8a3 3 0 01-3-3V4a3 3 0 013-3h6a3 3 0 013 3v1a3 3 0 01-3 3h-2.1z M13 4a1 1 0 10-2 0V3a1 1 0 102 0v1z" clip-rule="evenodd"></path></svg></div>
<div>
<p class="font-semibold text-white">Complete Blood Count</p>
<p class="text-sm text-purple-200">Result: Normal</p>
<p class="text-xs text-gray-400">Date: 2023-11-20</p>
</div>
</li>
<li class="flex items-start bg-gray-700 p-3 rounded-md border border-purple-700 group-hover:border-purple-600 transition-colors duration-300">
<div class="flex-shrink-0 mr-3 text-purple-300 group-hover:text-purple-400"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 01-3 3H7a3 3 0 01-3-3V4a3 3 0 013-3h6a3 3 0 013 3v1a3 3 0 01-3 3h-2.1l-.85 2.1c-.24.58-.69 1.03-1.27 1.27L9 14.15V19a1 1 0 11-2 0v-4.85l-.85-2.1c-.24-.58-.69-1.03-1.27-1.27L4 8a3 3 0 01-3-3V4a3 3 0 013-3h6a3 3 0 013 3v1a3 3 0 01-3 3h-2.1z M13 4a1 1 0 10-2 0V3a1 1 0 102 0v1z" clip-rule="evenodd"></path></svg></div>
<div>
<p class="font-semibold text-white">Thyroid Panel</p>
<p class="text-sm text-purple-200">Result: TSH Elevated</p>
<p class="text-xs text-gray-400">Date: 2023-11-15</p>
</div>
</li>
</ul>
<button class="mt-6 w-full py-2 px-4 rounded-md bg-purple-700 text-white font-semibold transform hover:scale-105
shadow-md shadow-purple-900 group-hover:bg-purple-600 transition-all duration-300
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:animate-shimmer">
<span class="relative z-10">Download All Results</span>
</button>
</div>
<!-- Card 4: Health Articles (Full Width on Small Screens) -->
<div class="lg:col-span-2 col-span-1 md:col-span-2 rounded-lg p-5 bg-gray-800 border border-cyan-800 shadow-lg dark:bg-gray-850 dark:border-cyan-700
relative overflow-hidden group
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-transparent before:via-cyan-900/10 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
hover:shadow-cyan-glow-sm transform hover:-translate-y-1 transition-all duration-300">
<h2 class="text-2xl font-bold text-cyan-400 mb-3 tracking-wide
text-shadow-neon-cyan-xs">Health Insights</h2>
<p class="text-gray-300 mb-4 text-sm">Stay informed with our latest health articles.</p>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<article class="bg-gray-700 p-4 rounded-md border border-cyan-700 group-hover:border-cyan-600 transition-colors duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Healthy eating" class="w-full h-32 object-cover rounded-md mb-3 border border-cyan-800">
<h3 class="font-semibold text-white mb-1">The Benefits of Mindful Eating</h3>
<p class="text-sm text-gray-300 mb-2">Learn how mindful eating can improve your digestion and overall well-being.</p>
<a href="#" class="text-purple-400 hover:text-purple-300 font-medium text-sm transition-colors duration-200">Read More <span class="ml-1">></span></a>
</article>
<article class="bg-gray-700 p-4 rounded-md border border-cyan-700 group-hover:border-cyan-600 transition-colors duration-300">
<img src="https://picsum.photos/300/200?random=2" alt="Exercise" class="w-full h-32 object-cover rounded-md mb-3 border border-cyan-800">
<h3 class="font-semibold text-white mb-1">Effective Home Workouts for Heart Health</h3>
<p class="text-sm text-gray-300 mb-2">Simple exercises you can do at home to boost your cardiovascular health.</p>
<a href="#" class="text-purple-400 hover:text-purple-300 font-medium text-sm transition-colors duration-200">Read More <span class="ml-1">></span></a>
</article>
</div>
<button class="mt-6 w-full py-2 px-4 rounded-md bg-cyan-700 text-white font-semibold transform hover:scale-105
shadow-md shadow-cyan-900 group-hover:bg-cyan-600 transition-all duration-300
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:animate-shimmer">
<span class="relative z-10">Explore All Articles</span>
</button>
</div>
<!-- Card 5: Emergency Contacts (Smaller Card) -->
<div class="col-span-1 rounded-lg p-5 bg-gray-800 border border-purple-800 shadow-lg dark:bg-gray-850 dark:border-purple-700
relative overflow-hidden group
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-transparent before:via-purple-900/10 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
hover:shadow-purple-glow-sm transform hover:-translate-y-1 transition-all duration-300">
<h2 class="text-2xl font-bold text-purple-400 mb-3 tracking-wide
text-shadow-neon-purple-xs">Emergency</h2>
<p class="text-gray-300 mb-4 text-sm">Important contacts for emergencies.</p>
<ul class="space-y-3">
<li class="flex items-center text-gray-300 group-hover:text-white transition-colors duration-200">
<svg class="w-5 h-5 mr-3 text-red-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 102 0V8a1 1 0 00-.445-.832l-1-.5z" clip-rule="evenodd"></path></svg>
<a href="tel:911" class="font-semibold text-purple-300 hover:text-purple-200 transition-colors duration-200">Emergency Services: 911</a>
</li>
<li class="flex items-center text-gray-300 group-hover:text-white transition-colors duration-200">
<svg class="w-5 h-5 mr-3 text-cyan-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.774a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
<span class="font-semibold text-purple-300">Family Contact:</span> <a href="tel:+15551234567" class="ml-1 hover:text-purple-200 transition-colors duration-200">+1 (555) 123-4567</a>
</li>
</ul>
<button class="mt-6 w-full py-2 px-4 rounded-md bg-purple-700 text-white font-semibold transform hover:scale-105
shadow-md shadow-purple-900 group-hover:bg-purple-600 transition-all duration-300
relative overflow-hidden
before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:animate-shimmer">
<span class="relative z-10">Call Now</span>
</button>
</div>
</div>
<!-- Footer for additional navigation or information -->
<div class="mt-12 text-center text-gray-400">
<p class="mb-4">© 2023 Precision Health Solutions. All rights reserved.</p>
<nav class="flex justify-center space-x-6">
<a href="#privacy" class="text-purple-400 hover:text-purple-300 font-medium transition-colors duration-200">Privacy Policy</a>
<a href="#terms" class="text-purple-400 hover:text-purple-300 font-medium transition-colors duration-200">Terms of Service</a>
<a href="#support" class="text-purple-400 hover:text-purple-300 font-medium transition-colors duration-200">Support</a>
</nav>
</div>
</div>
</div>
</div>
<style>
/* Custom Tailwind CSS classes for animations and glow effects (add to your CSS or use JIT mode for arbitrary values) */
@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}
.animate-shimmer {
animation: shimmer 1.5s infinite linear;
}
.text-shadow-neon-purple {
text-shadow:
0 0 7px #a78bfa,
0 0 10px #a78bfa,
0 0 21px #a78bfa,
0 0 42px #c084fc,
0 0 62px #c084fc,
0 0 82px #c084fc,
0 0 92px #c084fc,
0 0 102px #c084fc;
}
.text-shadow-neon-cyan {
text-shadow:
0 0 7px #67e8f9,
0 0 10px #67e8f9,
0 0 21px #67e8f9,
0 0 42px #22d3ee,
0 0 62px #22d3ee,
0 0 82px #22d3ee,
0 0 92px #22d3ee,
0 0 102px #22d3ee;
}
.text-shadow-neon-purple-xs {
text-shadow:
0 0 3px #a78bfa,
0 0 5px #a78bfa,
0 0 7px #a78bfa;
}
.text-shadow-neon-cyan-xs {
text-shadow:
0 0 3px #67e8f9,
0 0 5px #67e8f9,
0 0 7px #67e8f9;
}
.shadow-purple-glow-sm {
box-shadow: 0 0 20px rgba(162, 28, 255, 0.4),
0 0 30px rgba(162, 28, 255, 0.3);
}
.shadow-cyan-glow-sm {
box-shadow: 0 0 20px rgba(0, 255, 255, 0.4),
0 0 30px rgba(0, 255, 255, 0.3);
}
</style>Composants associés
Composant de récipient Glassmorphism
Un composant de conteneur Glassmorphism réactif avec une palette de couleurs triadique, conçu pour les portefeuilles. Prend en charge le mode sombre.
Composant de conteneur
Un composant de conteneur réactif avec des micro-interactions qui présente des animations attrayantes réagissant aux actions de l’utilisateur, prend en charge le mode sombre et utilise Tailwind CSS.