Componente Mapas
Un componente de mapas responsivo diseñado en un estilo skeuomórfico con un esquema de color monocromático para un tablero, compatible con el modo oscuro.
Código HTML
<div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-gray-800 dark:text-gray-200 text-xl font-semibold mb-4">Maps Dashboard</h2>
<div class="relative w-full h-64 rounded-lg overflow-hidden shadow-md">
<img src="https://picsum.photos/500/300?random=1" alt="Map Image" class="w-full h-full object-cover rounded-lg" />
<div class="absolute bottom-2 left-2 bg-gray-100 dark:bg-gray-700 bg-opacity-75 rounded-lg p-2">
<p class="text-gray-800 dark:text-gray-200">Location: New York City</p>
</div>
</div>
<div class="mt-4">
<div class="flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
<div>
<p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400 text-sm">Map Editor</p>
</div>
</div>
<div class="mt-2 flex justify-between">
<button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 py-1 px-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition">Edit</button>
<button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 py-1 px-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition">View</button>
</div>
</div>
</div>Componentes relacionados
Neon_Glow_Maps_Component
Un componente de mapa simple y receptivo con un efecto de neón/resplandor, diseñado para portafolios de fotografía. Cuenta con colores neutros fríos, compatibilidad con el modo oscuro e imagen de mapa de marcador de posición.
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.
IndustrialVibrantMapsComponent
Un componente de mapa interactivo y receptivo con una estética industrial y cruda y un esquema de color vibrante, adecuado para aplicaciones de tecnología/SaaS. Incluye soporte para modo oscuro.