Composant Glassmorphism Maps
Glassmorphism Maps Component pour les médias sociaux
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>Composants associés
Composant Cartes
Un composant Maps réactif avec le style Neumorphism, la prise en charge du mode sombre et l’image de remplacement.
Composant Cartes
Un composant de cartes complexe conçu dans le style Material Design, adapté aux tableaux de bord. Il intègre des éléments réactifs, des fonctionnalités interactives et prend en charge l’esthétique du mode sombre à l’aide d’un schéma de couleurs analogue.
Composant Cartes
Un composant Web conçu pour les interfaces de médias sociaux, doté d’un design brutaliste avec une palette de couleurs en niveaux de gris, adapté à l’affichage de cartes avec des emplacements marqués.