Componente de contenedor 21
Un componente contenedor receptivo de estilo retro/vintage con soporte para temas oscuros.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-md mx-auto">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Welcome to Nostalgia</h2>
<p class="text-gray-600 dark:text-gray-300 mb-4">Experience the charm of the 80s and 90s with our carefully curated content. Dive into the vintage vibes that bring back fond memories.</p>
<img class="rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image" />
<div class="flex items-center">
<img class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" />
<div class="ml-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h3>
<p class="text-gray-500 dark:text-gray-400">Retro Enthusiast</p>
</div>
</div>
<button class="mt-6 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full transition duration-300 ease-in-out">
Explore More
</button>
</div>
Componentes relacionados
Contenedor de redes sociales
Un componente contenedor responsivo con colores vibrantes, microinteracciones atractivas y compatibilidad con temas oscuros, adecuado para interfaces de redes sociales. Las características incluyen sutiles efectos de desplazamiento y un diseño limpio.
Componente de contenedor
Un contenedor de modo oscuro responsivo para el contenido del blog con un diseño simple en escala de grises.
Componente de contenedor de comercio electrónico
Componente contenedor de comercio electrónico Glassmorphism con esquema de color triádico y diseño complejo, incluida la compatibilidad con el modo oscuro