Columnas Componente 49
Un componente de columnas responsivo con un diseño esqueuomórfico que imita elementos del mundo real, con soporte para temas oscuros y uso de Tailwind CSS.
Código HTML
<div class="container mx-auto px-4 py-8">
<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 overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="p-4">
<img src="https://picsum.photos/300/200?random=1" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column One</h2>
<p class="text-gray-700 dark:text-gray-300">This is a sample text for the first column. It describes the content inside.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
<span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="p-4">
<img src="https://picsum.photos/300/200?random=2" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Two</h2>
<p class="text-gray-700 dark:text-gray-300">This is a sample text for the second column. It describes the content inside.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
<span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
<div class="p-4">
<img src="https://picsum.photos/300/200?random=3" alt="Column Image" class="w-full h-32 object-cover rounded-md shadow-md mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Column Three</h2>
<p class="text-gray-700 dark:text-gray-300">This is a sample text for the third column. It describes the content inside.</p>
</div>
<div class="p-4 border-t border-gray-200 dark:border-gray-700">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-8 h-8 rounded-full inline-block">
<span class="text-sm text-gray-600 dark:text-gray-400">Author Name</span>
</div>
</div>
</div>
</div>Componentes relacionados
Neumorfismo de los componentes de las columnas
Nemorfismo de los componentes de las columnas: un estilo de interfaz de usuario suave que crea elementos que parecen sobresalir del fondo mediante sombras sutiles. Este componente es responsivo y tiene soporte para temas oscuros. No se necesita código JavaScript. Para el modo oscuro, la compatibilidad con CSS es suficiente.
Componente Columnas
Un componente de columnas responsivo con elementos de diseño 3D y soporte de temas oscuros mediante Tailwind CSS.