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 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.
Componente Mapas
Un componente de mapas responsivo con estilo Material Design y soporte para temas oscuros, creado con Tailwind CSS.
Componente Mapas
Un componente de Maps con diseño de glassmorphism con efectos responsivos y compatibilidad con temas oscuros, que utiliza Tailwind CSS.