Componentes de medios Componente 39
Un componente multimedia diseñado con la interfaz de usuario del modo oscuro, con efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Código HTML
<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>Componentes relacionados
Neumorfismo simple Componente de medios de comercio electrónico
Componente de medios de estilo neumorfismo con tonos tierra, complejidad simple, para sitio de comercio electrónico, con diseño receptivo y soporte de tema oscuro. Utiliza picsum.photos para las imágenes.
Componente de componentes de medios
Un componente multimedia diseñado en el estilo brutalista, que muestra un diseño audaz con alto contraste, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Componente de componentes de medios
Un componente de componentes multimedia receptivo con un diseño brutalista, colores vibrantes y un diseño complejo para un tablero, con soporte para temas oscuros y sin JavaScript. Utiliza picsum.photos para las imágenes y randomuser.me para los avatares.