Composants multimédias Composante 39
Un composant multimédia conçu avec l’interface utilisateur du mode sombre, avec des effets réactifs et la prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-gray-900 text-white p-6 rounded-lg shadow-md max-w-md mx-auto mt-10">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div class="ml-4">
<h2 class="text-xl font-bold">John Doe</h2>
<p class="text-gray-400">Posted 2 hours ago</p>
</div>
</div>
<img class="w-full rounded-lg mb-4" src="https://picsum.photos/600/400" alt="Media Content">
<h3 class="text-lg font-semibold mb-2">Amazing Scenery</h3>
<p class="text-gray-300">This is a beautiful representation of nature that showcases the stunning landscapes we often take for granted.</p>
<div class="mt-4 flex justify-between">
<button class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 focus:outline-none focus:ring focus:ring-red-300">Like</button>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring focus:ring-blue-300">Comment</button>
</div>
</div>Composants associés
Composants multimédias
Un composant de style Neumorphism pour l’affichage multimédia avec un design réactif et une prise en charge du thème sombre.
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.
Composant Composants multimédias
Composant multimédia complexe et réactif pour la consommation de contenu de blog, stylisé en mode sombre avec une palette de couleurs monochromatiques. Il comprend une image, un titre, une description et un avatar de l’auteur.