Composants multimédias Composant avec Glassmorphism
Composant avec conception Glassmorphism, prise en charge du mode réactif et sombre
HTML Code
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="container mx-auto p-4">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card 1 -->
<div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo1/400/300" alt="Card image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 1. It provides some details about the content.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">John Doe</p>
<p class="text-gray-600 dark:text-gray-400"> pêøvêl</p>
</div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo2/400/300" alt="Card image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 2. More details about the content can be found here.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Designer</p>
</div>
</div>
</div>
</div>
<!-- Card 3 -->
<div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg overflow-hidden dark:bg-gray-800 dark:bg-opacity-20">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/photo3/400/300" alt="Card image">
<div class="p-6">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 3</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">This is a description for card 3, providing additional information.</p>
<div class="mt-4 flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
<div class="text-sm">
<p class="text-gray-900 dark:text-white leading-none">Peter Jones</p>
<p class="text-gray-600 dark:text-gray-400">Developer</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant multimédia de voyage Art déco
Il s’agit d’un composant multimédia complexe d’inspiration Art déco pour les sites Web de voyage et de tourisme, mettant en vedette les points forts de la destination avec des tons sépia/bruns et des motifs géométriques. Entièrement réactif avec prise en charge du mode sombre.
Brutalisme Pastel Media Composante
Un composant médiatique simple et brutaliste avec une palette de couleurs pastel, conçu pour un blog. Réactif avec prise en charge du mode sombre.
Composant Composants multimédias
Un composant de médias sociaux complexe, réactif et compatible avec le mode sombre avec un style Glassmorphism utilisant des couleurs vives.