Componente de visualización de contenido
Un componente responsivo para mostrar trabajos o productos en un estilo de modo oscuro con una combinación de colores pastel.
Código HTML
<div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-2xl font-bold text-pink-300 dark:text-pink-200 mb-4">Project Title</h2>
<img src="https://picsum.photos/400/200" alt="Project Image" class="rounded-lg mb-4 shadow-md">
<p class="text-gray-300 dark:text-gray-200 mb-4">This is a brief description of the project. It showcases the unique features and the value it brings to users.</p>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2 shadow-lg">
<span class="text-gray-400 dark:text-gray-200">Posted by John Doe</span>
</div>
<a href="#" class="inline-block bg-pink-500 hover:bg-pink-400 text-white font-semibold py-2 px-4 rounded mt-2">View More</a>
</div>Componentes relacionados
Componente de visualización de contenido
Un componente de pantalla nostálgico con diseño retro, con efectos responsivos y soporte para temas oscuros.
Componente de visualización de contenido
Un componente de visualización de contenido diseñado en un estilo skeuomórfico para el comercio electrónico con un tema oscuro. Exhibe productos con elementos mínimos, utilizando un esquema de color análogo para una estética agradable.
Componente de visualización de contenido
Un componente de visualización de contenido con diseño de glassmorphism con diseño responsivo y soporte de temas oscuros.