Componentes de visualización de contenido
Un portafolio de diseño 3D que muestra trabajos o productos con un esquema de color en escala de grises y un diseño receptivo, compatible con el modo oscuro.
Código HTML
<div class="min-h-screen bg-gray-100 dark:bg-gray-900 p-10 flex flex-col items-center justify-center">
<h1 class="text-3xl font-bold mb-5 text-gray-800 dark:text-gray-200">Portfolio</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
<img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=1" alt="Artwork 1">
<div class="p-5">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
<img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=2" alt="Artwork 2">
<div class="p-5">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
<img class="w-full h-48 rounded-t-lg" src="https://picsum.photos/300/200?random=3" alt="Artwork 3">
<div class="p-5">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h2>
<p class="text-gray-600 dark:text-gray-400">Short description of the project goes here.</p>
</div>
</div>
</div>
<footer class="w-full text-center mt-10 text-gray-600 dark:text-gray-400">
<p>© 2023 Your Name. All rights reserved.</p>
</footer>
</div>Componentes relacionados
Memphis_Muted_Consulting_Content_Display
Un componente de visualización de contenido para consultoría/servicios, inspirado en el diseño de Memphis con colores apagados y patrones geométricos. Responsivo con soporte para modo oscuro.
Componentes de visualización de contenido Componente 11
Un componente de visualización de contenido de estilo retro/vintage con diseños nostálgicos de los años 80/90, con efectos responsivos y compatibilidad con temas oscuros.
Industrial_3D_Content_Display
Un componente de visualización de contenido simple y receptivo para empresas manufactureras/industriales, con un sutil diseño 3D que utiliza colores apagados y compatibilidad con el modo oscuro.