Componente de insignias
Un componente de insignias receptivo diseñado con estilo Glassmorphism, con elementos translúcidos similares al vidrio esmerilado y efectos de desenfoque, con soporte para el modo oscuro.
Código HTML
<div class="flex flex-wrap justify-center space-x-4 mt-10">
<!-- Badge 1 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/50" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">John Doe</h3>
<p class="text-gray-500 dark:text-gray-400">Web Developer</p>
</div>
<!-- Badge 2 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/51" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Jane Smith</h3>
<p class="text-gray-500 dark:text-gray-400">Graphic Designer</p>
</div>
<!-- Badge 3 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/52" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mike Lee</h3>
<p class="text-gray-500 dark:text-gray-400">UX Designer</p>
</div>
<!-- Badge 4 -->
<div class="bg-white bg-opacity-30 backdrop-filter backdrop-blur-md rounded-lg border border-gray-200 dark:bg-gray-800 dark:bg-opacity-50 p-4 shadow-lg hover:shadow-xl transition-shadow duration-300 ease-in-out">
<img src="https://picsum.photos/50/53" alt="Avatar" class="rounded-full mb-2">
<h3 class="text-lg font-semibold text-gray-900 dark:text-white">Emily Clark</h3>
<p class="text-gray-500 dark:text-gray-400">Product Manager</p>
</div>
</div>Componentes relacionados
Componente de insignias
Un componente de insignias responsivo con microinteracciones y soporte para temas oscuros, diseñado con Tailwind CSS. Este componente incluye efectos de desplazamiento y utiliza imágenes de marcador de posición para avatares.
Componente de insignias
Un componente de insignias responsivo diseñado con un estilo 3D utilizando tonos Tierra, con elementos interactivos adecuados para un tablero.
Componente de insignias
Un componente de insignias responsivo con microinteracciones atractivas, diseñado con Tailwind CSS. Admite el modo oscuro e incluye marcadores de posición de imagen.