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.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
<div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white">Featured Content</h2>
<p class="text-gray-700 dark:text-gray-300 mt-2">This is a content display component that utilizes glassmorphism design principles. It features a blurred background and translucent elements for a modern look.</p>
<div class="mt-4">
<img src="https://picsum.photos/300/200" alt="Random Image" class="rounded-lg" />
</div>
<div class="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-white dark:border-gray-800 mr-3" />
<span class="text-gray-600 dark:text-gray-300">John Doe</span>
</div>
</div>
</div>Componentes relacionados
Memphis_Content_Display_Component
Un componente de visualización de contenido complejo y receptivo para plataformas de entretenimiento/medios, con un estilo de diseño Memphis con un esquema de color en blanco y negro y un color de acento brillante (fucsia). Incluye soporte para modo oscuro e imágenes de marcador de posición.
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 de visualización de contenido
Un componente de visualización de contenido responsivo que incorpora microinteracciones con animaciones atractivas centradas en las acciones del usuario. Incluye soporte para el modo oscuro y marcadores de posición para imágenes y avatares.