Componentes funcionales
Un componente funcional con diseño esqueuomórfico, efectos responsivos y compatibilidad con temas oscuros mediante Tailwind CSS.
Código HTML
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 max-w-lg mx-auto">
<div class="flex items-center mb-4">
<img src="https://picsum.photos/50" alt="Avatar" class="rounded-full w-12 h-12 border-4 border-white dark:border-gray-900 shadow-md">
<h2 class="ml-4 text-xl font-semibold text-gray-800 dark:text-gray-200">User Name</h2>
</div>
<div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-4 shadow-inner">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">About</h3>
<p class="text-gray-600 dark:text-gray-400">
A brief description of the user or content, styled in a way that mimics a card.
</p>
</div>
<div class="mt-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Photos</h3>
<div class="grid grid-cols-2 gap-2 mt-2">
<img src="https://picsum.photos/200?random=1" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200?random=2" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200?random=3" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
<img src="https://picsum.photos/200?random=4" alt="Random" class="rounded-lg shadow-md transform transition-transform duration-300 hover:scale-105">
</div>
</div>
</div>Componentes relacionados
Componente gubernamental monocromático inspirado en el papel/impresión
Un componente de complejidad media que imita el papel físico y los materiales de impresión, diseñado para sitios web gubernamentales/de servicio público con un esquema de color monocromático y capacidad de respuesta completa, incluida la compatibilidad con el modo oscuro.
Componentes funcionales Componente
Un componente web que imita a sus homólogos del mundo real en un estilo empresarial-corporativo con una combinación de colores complementaria, un diseño sencillo y un diseño responsivo con soporte para el modo oscuro.
Tarjeta de Listado de Propiedades Inmobiliarias
Una compleja tarjeta de listado de propiedades inmobiliarias inspirada en papel / impresión con tonos azules corporativos, diseñada para plataformas de listado de propiedades. Cuenta con un diseño responsivo, compatibilidad con el modo oscuro y múltiples detalles sobre una propiedad.