Componente Mapas de Glassmorphism
Componente de mapas de glassmorphism para redes sociales
Código HTML
<div class="glassmorphism-maps-component relative h-96 overflow-hidden rounded-lg shadow-xl bg-white bg-opacity-20 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg">
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('https://picsum.photos/800/600');"></div>
<div class="relative h-full flex flex-col justify-between p-6 bg-white bg-opacity-10 dark:bg-gray-900 dark:bg-opacity-10">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
<div>
<p class="text-gray-800 dark:text-white font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-300 text-sm">📍 On an adventure</p>
</div>
</div>
<div class="text-right">
<button class="px-4 py-2 bg-blue-500 text-white rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-50 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">
View Location
</button>
</div>
</div>
</div>Componentes relacionados
Componente de mapas lúdicos para juegos
Un componente de mapa simple, divertido y receptivo adecuado para sitios web de juegos, con tonos joya brillantes, elementos redondeados y soporte para modo oscuro.
Componente Mapas
Un componente web diseñado para interfaces de redes sociales, con un diseño brutalista con un esquema de color en escala de grises, adecuado para mostrar mapas con ubicaciones marcadas.
Cyberpunk_Gaming_Maps_Component
Un componente de mapas simple y receptivo con temática cyberpunk para interfaces de juegos, con fondos oscuros, acentos de neón y una combinación de colores análoga. Incluye soporte para modo oscuro.