Grille de soins de santé vibrante inspirée du papier
Un composant de mise en page de grille simple, inspiré du papier/de l’impression avec des couleurs vives, conçu pour les applications médicales/de santé. Il est entièrement réactif, inclut la prise en charge du mode sombre et utilise le HTML sémantique.
HTML Code
<div class="p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-purple-950 dark:via-indigo-950 dark:to-blue-950 font-sans">
<div class="max-w-7xl mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">
<!-- Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
border-4 border-indigo-500 dark:border-indigo-600
relative pb-6 md:pb-8 lg:pb-10">
<div class="absolute inset-0 bg-gradient-to-tr from-indigo-100 to-purple-100 dark:from-indigo-900 dark:to-purple-900 opacity-20"></div>
<div class="relative p-6 sm:p-8 z-10">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/1005/60/60" alt="Microscope" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
<h3 class="text-2xl font-extrabold text-indigo-700 dark:text-indigo-400 ml-4">Lab Results</h3>
</div>
<p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Access your latest diagnostic reports and detailed analysis from our state-of-the-art laboratory.</p>
<a href="#" class="inline-flex items-center px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-800">
View Details
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
border-4 border-sky-500 dark:border-sky-600
relative pb-6 md:pb-8 lg:pb-10">
<div class="absolute inset-0 bg-gradient-to-tr from-sky-100 to-cyan-100 dark:from-sky-900 dark:to-cyan-900 opacity-20"></div>
<div class="relative p-6 sm:p-8 z-10">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/177/60/60" alt="Pills and Stethoscope" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
<h3 class="text-2xl font-extrabold text-sky-700 dark:text-sky-400 ml-4">Medication Refills</h3>
</div>
<p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Easily request prescription refills and manage your current medication schedule online.</p>
<a href="#" class="inline-flex items-center px-5 py-2 bg-sky-600 hover:bg-sky-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-800">
Order Refill
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
border-4 border-emerald-500 dark:border-emerald-600
relative pb-6 md:pb-8 lg:pb-10">
<div class="absolute inset-0 bg-gradient-to-tr from-emerald-100 to-lime-100 dark:from-emerald-900 dark:to-lime-900 opacity-20"></div>
<div class="relative p-6 sm:p-8 z-10">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/id/453/60/60" alt="Heart Monitor" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
<h3 class="text-2xl font-extrabold text-emerald-700 dark:text-emerald-400 ml-4">Health Records</h3>
</div>
<p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Keep track of your complete medical history, immunizations, and past appointments securely.</p>
<a href="#" class="inline-flex items-center px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-800">
Access Records
<svg class="ml-2 -mr-1 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</a>
</div>
</div>
</div>
</div>Composants associés
Travel_Booking_Grid_Layout_Component
Il s’agit d’un composant de mise en page de grille complexe et réactif pour un site Web de réservation de voyages avec un design d’entreprise/professionnel, une palette de couleurs analogue et une prise en charge du mode sombre. Comprend des cartes de destination, une entrée de recherche et une barre latérale.
Disposition de la grille de conception matérielle
Composant de mise en page de grille réactif avec le style Material Design, y compris les effets d’ombre et la prise en charge du mode sombre.
Composant de mise en page de grille
Un composant de mise en page de grille réactif pour les interfaces de médias sociaux conçu avec un style skeuomorphe, avec des couleurs triadiques, plusieurs éléments interactifs et la prise en charge des thèmes sombres.