Componente Columnas
Componente de columnas responsivas con soporte para modo oscuro
Código HTML
<div class="dark:bg-gray-900 min-h-screen p-8">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- Column 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 relative" style="box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Article Title 1</h2>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-semibold">Read More</a>
</div>
<div class="absolute inset-0 border-4 border-blue-300 dark:border-blue-700 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(-10px);"></div>
</div>
<!-- Column 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 relative" style="box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Article Title 2</h2>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-semibold">Read More</a>
</div>
<div class="absolute inset-0 border-4 border-red-300 dark:border-red-700 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(-10px);"></div>
</div>
<!-- Column 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-2xl overflow-hidden transform hover:scale-105 transition-transform duration-300 relative" style="box-shadow: 5px 5px 15px rgba(0,0,0,0.3);">
<div class="p-6">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Article Title 3</h2>
<p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline font-semibold">Read More</a>
</div>
<div class="absolute inset-0 border-4 border-green-300 dark:border-green-700 rounded-lg opacity-0 hover:opacity-100 transition-opacity duration-300" style="transform: translateZ(-10px);"></div>
</div>
</div>
</div>Componentes relacionados
Componente Columnas
Un componente de columnas responsivo diseñado con los principios de Material Design, que utiliza Tailwind CSS para el estilo, la compatibilidad con temas oscuros y las animaciones receptivas.
Componente Columnas
Componente de columnas para un tablero, con un diseño 3D con colores complementarios. Incluye tres columnas responsivas con un diseño simple, compatibilidad con el modo oscuro y utiliza Tailwind CSS para el estilo. No se incluye JavaScript.
Componente Columnas
Un componente de columnas responsivo diseñado para la presentación de carteras con soporte para modo oscuro, utilizando un esquema de color en escala de grises y Tailwind CSS.