Componentes funcionales Componente
Un componente funcional con diseño 3D, efectos responsivos y compatibilidad con el modo oscuro, implementado con Tailwind CSS.
Código HTML
<div class="flex flex-wrap justify-center items-center h-screen bg-gray-200 dark:bg-gray-800">
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl transform transition-transform duration-500 hover:scale-105 perspective-1000 group w-64 m-6">
<div class="relative transform transition-transform duration-500 rotate-y-0 group-hover:rotate-y-10 h-40 bg-gray-300 dark:bg-gray-600 rounded-t-lg">
<img src="https://picsum.photos/id/237/200/300" alt="Placeholder image" class="w-full h-full object-cover rounded-t-lg">
</div>
<div class="p-6 transform transition-transform duration-500 translate-z-20">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Component Title</h2>
<p class="text-gray-700 dark:text-gray-300">This is a description of the component, showcasing its features and design.</p>
</div>
</div>
<div class="bg-white dark:bg-gray-700 rounded-lg shadow-xl transform transition-transform duration-500 hover:scale-105 perspective-1000 group w-64 m-6">
<div class="relative transform transition-transform duration-500 rotate-y-0 group-hover:rotate-y-10 h-40 bg-gray-300 dark:bg-gray-600 rounded-t-lg">
<img src="https://picsum.photos/id/238/200/300" alt="Placeholder image" class="w-full h-full object-cover rounded-t-lg">
</div>
<div class="p-6 transform transition-transform duration-500 translate-z-20">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">Component Title</h2>
<p class="text-gray-700 dark:text-gray-300">This is a description of the component, showcasing its features and design.</p>
</div>
</div>
</div>Componentes relacionados
Componente de documentación Art Deco Purple
Un componente de documentación/wiki de complejidad moderada con un tema de diseño Art Deco, con patrones geométricos y un estilo lujoso utilizando un espectro de colores púrpura/violeta. Totalmente receptivo con soporte para modo oscuro.
Blog Componente Funcional
Componentes funcionales Componente con diseño 3D, combinación de colores complementaria, complejidad moderada para blogs, responsivo con soporte para temas oscuros. No hay JS, solo HTML y Tailwind.
Componentes funcionales Componente
Componente funcional para comercio electrónico con diseño responsivo y soporte de tema oscuro.