Neon_Glow_Healthcare_Container_Component
Un componente contenedor complejo y sensible para aplicaciones sanitarias con un esquema de color en blanco y negro neón/brillo y un acento vibrante. Cuenta con múltiples elementos interactivos, compatibilidad con modo oscuro y HTML semántico.
Código HTML
<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>
Componentes relacionados
Luxury_Container_Component
Un componente de contenedor de lujo y de primera calidad para empresas manufactureras/industriales, con un diseño sofisticado, un diseño receptivo, compatibilidad con el modo oscuro y un esquema de arco iris degradado multicolor.
Componente contenedor de Glassmorphism
Componente contenedor de Glassmorphism con efectos responsivos y soporte para temas oscuros.
Ficha de producto de comercio electrónico neumórfico
Una tarjeta de producto de comercio electrónico simple y receptiva con un estilo de diseño neumórfico en escala de grises, con soporte para modo oscuro.