Componente de visualización de contenido
Un componente con estilo glassmorphism para mostrar contenido de portafolio con elementos interactivos, compatible con el modo oscuro.
Código HTML
<div class="flex flex-col items-center justify-center p-5 bg-gray-900 min-h-screen">
<div class="bg-white dark:bg-gray-800 backdrop-blur-lg bg-opacity-30 rounded-lg shadow-lg p-6 max-w-md w-full">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Portfolio Showcase</h2>
<p class="text-gray-600 dark:text-gray-400 mb-6">Explore my recent work and projects in this beautifully designed portfolio section.</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=1" alt="Project Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
<div class="mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=2" alt="Project Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
<div class="mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=3" alt="Project Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
<div class="mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
</div>
</div>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-700 rounded-lg overflow-hidden shadow-md">
<img class="w-full h-40 object-cover" src="https://picsum.photos/400/200?random=4" alt="Project Image">
<div class="p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Project Title 4</h3>
<p class="text-gray-600 dark:text-gray-400">A brief description of the project.</p>
<div class="mt-2">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar">
</div>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
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 responsivo con un estilo de diseño minimalista y plano, ideal para blogs y consumo de contenido. Tiene un esquema de color en escala de grises y está equipado con elementos interactivos a la vez que admite el modo oscuro.
Componente Componentes de visualización de contenido
Un componente de visualización de contenido con microinteracciones, diseño responsivo y compatibilidad con temas oscuros mediante Tailwind CSS. Cuenta con efectos de desplazamiento sutiles y animaciones de enfoque en elementos interactivos.