Componente Mapas
Un componente de mapas responsivo con estilo de neumorfismo, compatible con el tema oscuro y con imágenes de marcador de posición.
Código HTML
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg flex flex-col items-center">
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Maps Component</h2>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4 shadow-xl w-full md:w-96">
<img src="https://picsum.photos/400/300" alt="Placeholder Map" class="rounded-lg w-full h-auto" />
</div>
<div class="flex mt-4">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-white dark:border-gray-800 shadow-md" />
<div class="ml-3">
<p class="text-sm text-gray-700 dark:text-gray-300">User Name</p>
<p class="text-xs text-gray-500 dark:text-gray-400">Location</p>
</div>
</div>
</div>Componentes relacionados
Componente Mapas
Un componente de mapa complejo y vibrante para redes sociales, con microinteracciones, diseño responsivo y compatibilidad con el modo oscuro mediante Tailwind CSS.
Componente Mapas
Un componente de mapas complejo diseñado en estilo Material Design, adecuado para cuadros de mando. Integra elementos responsivos, funciones interactivas y admite la estética del modo oscuro utilizando un esquema de color análogo.
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.