Glassmorphism-Maps-Komponente
Glassmorphism Maps Komponente für Social Media
HTML-Code
<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>Verwandte Komponenten
Maps-Komponente
Eine reaktionsschnelle Kartenkomponente im skeuomorphen Stil mit sanften Pastellfarben und einer reichhaltigen Benutzeroberfläche, die für soziale Netzwerke geeignet ist. Die Komponente unterstützt sowohl den hellen als auch den dunklen Modus und enthält mehrere interaktive Elemente.
Komponente "Brutalistische Karten"
Eine komplexe E-Commerce-Kartenkomponente im brutalistischen Stil mit monochromen Farben und Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS. Es zeigt Produktstandorte mit brutalistischen Designelementen.
Maps-Komponente
Eine responsive Kartenkomponente, die in einem skeuomorphen Stil mit einem monochromatischen Farbschema für ein Dashboard entworfen wurde und den Dunkelmodus unterstützt.