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
Composant Maps avec conception Skeuomorphism, schéma de couleurs triadique, complexité modérée et objectif de médias sociaux. Conception réactive avec prise en charge du thème sombre à l’aide de Tailwind CSS.
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.
Composante Brutalist Maps
Un composant de carte e-commerce complexe, de style brutaliste, avec des couleurs monochromes et une prise en charge du mode sombre à l’aide de Tailwind CSS. Il affiche les emplacements des produits avec des éléments de design brutalistes.