Componente Mappe Glassmorphism
Componente Glassmorphism Maps per i social media
Codice 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>Componenti correlati
Componente minimalista monocromatico delle mappe aziendali
Un componente mappa reattivo e interattivo progettato per siti Web aziendali e aziendali, caratterizzato da un design piatto minimalista, combinazione di colori monocromatica e supporto per la modalità scura. Include un'immagine segnaposto, una mappa e segnaposto con i dettagli di contatto.
3D_Neon_Maps_Component
Un complesso componente di mappe ispirato al 3D con una combinazione di colori neon/elettrico, adatto per un portfolio per mostrare luoghi o progetti. È dotato di elementi luminosi, un'interfaccia utente ricca di interattività e una reattività completa con il supporto della modalità oscura.
Componente Mappe
Un componente di mappe reattivo progettato con uno stile scheumorfico, caratterizzato da tenui colori pastello e un'interfaccia ricca adatta per il social networking. Il componente supporta sia la modalità chiara che quella scura e include più elementi interattivi.