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.
Código HTML
<div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg dark:bg-gray-800 max-w-2xl mx-auto">
<h2 class="text-2xl font-bold mb-4">Maps Component</h2>
<div class="relative mb-5">
<img src="https://picsum.photos/600/400" alt="Map" class="w-full h-64 object-cover rounded-md mb-2">
<div class="absolute left-4 top-4 bg-black bg-opacity-50 p-2 rounded">Location 1</div>
<div class="absolute left-24 top-20 bg-black bg-opacity-50 p-2 rounded">Location 2</div>
<div class="absolute left-10 top-36 bg-black bg-opacity-50 p-2 rounded">Location 3</div>
</div>
<div class="flex flex-col space-y-3">
<h3 class="text-lg font-semibold">Locations</h3>
<div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">User 1</p>
<p class="text-sm">Location 1 Description</p>
</div>
</div>
<div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">User 2</p>
<p class="text-sm">Location 2 Description</p>
</div>
</div>
<div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
<div>
<p class="font-bold">User 3</p>
<p class="text-sm">Location 3 Description</p>
</div>
</div>
</div>
<button class="mt-5 bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded dark:bg-gray-700 dark:hover:bg-gray-600">View More</button>
</div>Componentes relacionados
Componente Mapas 3D
Componente de mapa 3D receptivo para sitios web comerciales con soporte de modo oscuro.
Componente de mapas de negocios monocromático minimalista
Un componente de mapa interactivo y receptivo diseñado para sitios web comerciales y corporativos, con un diseño plano minimalista, combinación de colores monocromática y compatibilidad con el modo oscuro. Incluye un marcador de posición, mapa, imagen y marcadores de posición de detalles de contacto.
Gradient_Forest_Maps_Component
Un componente de mapa simple y receptivo para plataformas educativas, con una paleta de degradados verde bosque y transiciones suaves, con soporte para modo oscuro.