Componente de diseño 3D
Un componente de diseño 3D receptivo con imágenes atractivas, que incorpora profundidad a través de sombras y capas. Incluye soporte para el modo oscuro y presenta imágenes y avatares aleatorios.
Código HTML
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="max-w-4xl w-full p-6 rounded-lg shadow-2xl bg-white dark:bg-gray-800 transform transition-transform duration-300 hover:scale-105">
<h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">3D Layout Component</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="p-4 bg-gray-50 dark:bg-gray-700 shadow-lg rounded-lg hover:shadow-2xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=1" alt="Random Image 1" class="w-full h-48 object-cover rounded-lg mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 1</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the first card item. It's designed to entice the user.</p>
</div>
<div class="p-4 bg-gray-50 dark:bg-gray-700 shadow-lg rounded-lg hover:shadow-2xl transition-shadow duration-300">
<img src="https://picsum.photos/300/200?random=2" alt="Random Image 2" class="w-full h-48 object-cover rounded-lg mb-4">
<h2 class="text-xl font-semibold text-gray-800 dark:text-white">Card Title 2</h2>
<p class="text-gray-600 dark:text-gray-300">This is a brief description of the second card item. It's designed to entice the user.</p>
</div>
</div>
<div class="mt-6">
<h3 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Featured Users</h3>
<div class="flex flex-wrap">
<div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-12 h-12 object-cover rounded-full">
</div>
<div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-12 h-12 object-cover rounded-full">
</div>
<div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-12 h-12 object-cover rounded-full">
</div>
<div class="bg-gray-50 dark:bg-gray-700 rounded-full p-2 shadow-lg m-2">
<img src="https://randomuser.me/api/portraits/women/2.jpg" alt="User 4" class="w-12 h-12 object-cover rounded-full">
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente Componentes de diseño
Un componente de diseño responsivo que muestra microinteracciones a través de animaciones atractivas que responden a las acciones del usuario, con soporte para el modo oscuro y utilizando Tailwind CSS.
Componente de diseño 3D
Un componente de diseño de redes sociales de diseño 3D receptivo con un esquema de color en escala de grises. Adecuado para interfaces de redes sociales.
Diseño de Portafolio
Un componente de diseño responsivo simple para un portafolio que se centra en microinteracciones con colores complementarios, compatibilidad con modo oscuro y elementos mínimos.