Composant d’intégration de média
Un composant d’intégration multimédia réactif doté d’une esthétique rétro/vintage, prenant en charge le thème sombre et présentant des images et des avatars de remplacement.
HTML Code
<div class="max-w-lg mx-auto bg-white rounded-lg shadow-lg overflow-hidden dark:bg-gray-800">
<div class="relative">
<img class="w-full h-48 object-cover" src="https://picsum.photos/600/400?random=1" alt="Retro Media">
<div class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 p-4">
<h2 class="text-white text-xl font-bold">Retro Media Title</h2>
<p class="text-gray-300">This is a description of the retro media.</p>
</div>
</div>
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Posted by</h3>
<div class="flex items-center mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div class="ml-3">
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-500 dark:text-gray-400 text-sm">5 minutes ago</p>
</div>
</div>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-white {background-color: #1a202c;}
.text-gray-800 {color: #e2e8f0;}
.text-gray-300 {color: #edf2f7;}
}
.bg-black { background-color: rgba(0, 0, 0, 0.8); }
.rounded-lg { border-radius: 0.5rem; }
.shadow-lg { box-shadow: 0 10px 15px rgba(0,0,0,0.2); }
.text-xl { font-size: 1.25rem; }
.text-lg { font-size: 1.125rem; }
.text-sm { font-size: 0.875rem; }
@media (max-width: 640px) {
.h-48 { height: 12rem; }
}
</style>
</div>Composants associés
Composant d’intégration de média
Un composant d’intégration multimédia réactif conçu dans le style Glassmorphism, avec des éléments interactifs pour la consommation de contenu.
Composant d’intégration de média
Un composant d’intégration multimédia rétro/vintage conçu avec la nostalgie des années 80 et 90. Il dispose d’un style réactif et d’une prise en charge du mode sombre avec Tailwind CSS.
Composant d’intégration de média skeuomorphe
Un composant d’intégration multimédia réactif avec une conception Skeuomorphism, une palette de couleurs analogue et une complexité modérée pour les sites Web d’entreprise. Inclut la prise en charge du mode sombre à l’aide de Tailwind CSS.