Componente de nube de etiquetas
Un componente de nube de etiquetas neumórficas diseñado para una cartera, que muestra etiquetas con un esquema de color monocromático, un diseño receptivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Código HTML
<div class="flex flex-col justify-center items-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-neumorphism">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Tag Cloud</h2>
<div class="flex flex-wrap gap-4">
<span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Web Design</span>
<span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">UI/UX</span>
<span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Graphic Design</span>
<span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Development</span>
<span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Branding</span>
<span class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg shadow-lg transition-transform transform hover:scale-105">Photography</span>
</div>
<div class="mt-5 flex gap-4">
<img src="https://picsum.photos/50?random=1" alt="Image 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
<img src="https://picsum.photos/50?random=2" alt="Image 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
<img src="https://picsum.photos/50?random=3" alt="Image 3" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2" class="rounded-full border-2 border-gray-300 dark:border-gray-600 shadow-md">
</div>
</div>Componentes relacionados
Componente de nube de etiquetas
Un componente de nube de etiquetas diseñado con estilo Neumorphism, que utiliza un esquema de color monocromático para fines de comercio electrónico y admite un tema oscuro con un diseño receptivo.
Componente de nube de etiquetas
Un componente de nube de etiquetas 3D con colores vibrantes para paneles de visualización de datos.
Componente de nube de etiquetas de neumorfismo
Un componente de nube de etiquetas receptivo con diseño de neumorfismo, combinación de colores pastel e interacciones complejas, adaptado para el comercio electrónico. Incluye soporte para el modo oscuro y usa Tailwind CSS.