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 Composants multimédias
Un composant multimédia réactif inspiré des styles de design rétro/vintage, avec une esthétique nostalgique des années 80/90. Il prend en charge le thème sombre avec Tailwind CSS et comprend des images et des avatars de remplacement.
Composants multimédias Composante 2
Un composant multimédia de style rétro/vintage avec un design nostalgique inspiré de l’esthétique des années 80/90, avec des effets réactifs et une prise en charge du thème sombre, en utilisant Tailwind CSS.
Composant Composants multimédias
Un composant multimédia réactif pour le commerce électronique avec Material Design et une palette de couleurs monochromatiques.