Componente de insignias
Un componente de insignias neumórfico diseñado para el consumo de contenido de blog con elementos interactivos y diseño receptivo que admite el modo oscuro.
Código HTML
<div class="flex flex-col items-center justify-center p-4 bg-white dark:bg-gray-800 rounded-lg shadow-neumorphism">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Badges</h2>
<div class="grid grid-cols-3 gap-4">
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">
<img src="https://picsum.photos/100/100" alt="Badge 1" class="rounded-full">
<p class="text-center text-gray-800 dark:text-white mt-2">Badge 1</p>
</div>
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">
<img src="https://picsum.photos/100/101" alt="Badge 2" class="rounded-full">
<p class="text-center text-gray-800 dark:text-white mt-2">Badge 2</p>
</div>
<div class="flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded-full shadow-neumorphism w-24 h-24">
<img src="https://picsum.photos/100/102" alt="Badge 3" class="rounded-full">
<p class="text-center text-gray-800 dark:text-white mt-2">Badge 3</p>
</div>
</div>
<div class="grid grid-cols-1 gap-4 mt-8">
<div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">John Doe</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">Contributor</p>
</div>
<button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>
</div>
<div class="flex items-center justify-between p-4 bg-gray-200 dark:bg-gray-700 rounded-lg shadow-neumorphism">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="rounded-full w-12 h-12">
<div class="ml-4">
<h3 class="text-lg font-medium text-gray-800 dark:text-white">Jane Smith</h3>
<p class="text-sm text-gray-600 dark:text-gray-300">Editor</p>
</div>
<button class="bg-blue-500 text-white rounded-md px-3 py-1 shadow-neumorphism hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Follow</button>
</div>
</div>
</div>Componentes relacionados
Componente de insignias
Un componente de insignias versátil diseñado para sitios web comerciales / corporativos, que utiliza tonos tierra en una interfaz de usuario de modo oscuro para mejorar la experiencia del usuario. El componente presenta capacidad de respuesta con algunos elementos interactivos.
Componente de insignias
Un componente de insignias receptivo diseñado para interfaces de redes sociales, con microinteracciones atractivas y un esquema de color complementario, compatible con el modo oscuro.
Componente de insignias
Un componente de insignias de temática retro con un esquema de color en escala de grises, adecuado para un blog o un sitio de contenido. Cuenta con múltiples elementos interactivos y una capacidad de respuesta completa, con soporte para modo oscuro. El diseño evita JavaScript, confiando únicamente en HTML y Tailwind CSS.