Rechercher des composants

Catégories

Cartes

Cartes géographiques interactives

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.

Ouvrir Aperçu

                
<div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-8 font-mono border-4 border-gray-900 dark:border-gray-100">

  <h2 class="text-3xl font-bold mb-6 border-b-4 border-gray-900 dark:border-gray-100 pb-2">Store Locations</h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-8">

    <!-- Map Area - Placeholder for Map Integration -->
    <div class="bg-gray-300 dark:bg-gray-700 h-96 border-4 border-gray-900 dark:border-gray-100 flex items-center justify-center text-center">
      <p class="text-xl font-bold">Map Integration Area</p>
      <!-- In a real application, a map library (like Leaflet or Google Maps) would be initialized here -->
    </div>

    <!-- Location List -->
    <div class="space-y-6">

      <!-- Location Item 1 -->
      <div class="border-4 border-gray-900 dark:border-gray-100 p-4 bg-white dark:bg-gray-800">
        <h3 class="text-xl font-bold mb-2">Brutalist Boutique - Downtown</h3>
        <p class="mb-2">123 Raw Street, Suite 101</p>
        <p class="mb-2">Concrete City, CA 90210</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Open: 10:00 AM - 8:00 PM</p>
        <button class="mt-4 px-6 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-gray-100 hover:bg-gray-700 dark:hover:bg-gray-300">View Details</button>
      </div>

      <!-- Location Item 2 -->
      <div class="border-4 border-gray-900 dark:border-gray-100 p-4 bg-white dark:bg-gray-800">
        <h3 class="text-xl font-bold mb-2">Monochromatic Mall Spot</h3>
        <p class="mb-2">456 High Contrast Avenue, Kiosk 7</p>
        <p class="mb-2">Shadowsburgh, NY 10001</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Open: 11:00 AM - 7:00 PM</p>
        <button class="mt-4 px-6 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-gray-100 hover:bg-gray-700 dark:hover:bg-gray-300">View Details</button>
      </div>

      <!-- Location Item 3 -->
      <div class="border-4 border-gray-900 dark:border-gray-100 p-4 bg-white dark:bg-gray-800">
        <h3 class="text-xl font-bold mb-2">The Crude Corner Shop</h3>
        <p class="mb-2">789 Uneven Road, Unit B</p>
        <p class="mb-2">Roughville, TX 75001</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Open: 9:00 AM - 6:00 PM</p>
        <button class="mt-4 px-6 py-2 bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-bold border-2 border-gray-900 dark:border-gray-100 hover:bg-gray-700 dark:hover:bg-gray-300">View Details</button>
      </div>

    </div>

  </div>

</div>

Composant Retro Maps

Un composant de cartes simple et réactif avec un design rétro/vintage, une palette de couleurs analogue et une prise en charge du thème sombre, utilisant Tailwind CSS. Convient aux blogs ou aux sites Web de contenu.

Ouvrir Aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-4 rounded-lg">
  <div class="aspect-w-16 aspect-h-9">
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.7108355932566!2d144.963735!3d-37.814107!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642b8c21cb29b%3A0x5045675218da3d1!2sMelbourne%20VIC%2C%20Australia!5e0!3m2!1sen!2sus!4v1646014098405!5m2!1en!2sus" 
            width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" class="rounded-lg"></iframe>
  </div>
</div>

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.

Ouvrir Aperçu

                <div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-xl">
  <div class="relative rounded-lg overflow-hidden shadow-inner-lg">
    <img src="https://picsum.photos/800/400?random=1" alt="Map" class="w-full h-full object-cover filter grayscale contrast-125">
    <div class="absolute inset-0 bg-gradient-to-br from-blue-500 via-green-500 to-red-500 opacity-50"></div>
    <div class="absolute inset-0 flex items-center justify-center">
      <div class="bg-white dark:bg-gray-900 p-4 rounded-full shadow-lg transform scale-110">
        <svg class="h-8 w-8 text-gray-700 dark:text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"/>
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
        </svg>
      </div>
    </div>
  </div>
  <div class="mt-4 flex items-center justify-between">
    <div class="flex items-center space-x-2">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white shadow">
      <div>
        <p class="font-bold text-gray-800 dark:text-white">John Doe</p>
        <p class="text-sm text-gray-600 dark:text-gray-400">Exploring New York</p>
      </div>
    </div>
    <div class="flex space-x-2">
      <button class="flex items-center space-x-1 px-3 py-1 bg-blue-500 text-white text-sm rounded-full shadow-lg hover:bg-blue-600 transition duration-300">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.64-.149-1.285-.451-1.8-.9a1.998 1.998 0 00-.682-.715l-3.5-3.5a2 2 0 00-2.828 0c-.5.5-.766 1.12-.766 1.727v0l-1.5.5a2 2 0 01-2 2.457v0A2 2 0 015 21H3v-3.5z"/>
        </svg>
        <span>Like</span>
      </button>
      <button class="flex items-center space-x-1 px-3 py-1 bg-green-500 text-white text-sm rounded-full shadow-lg hover:bg-green-600 transition duration-300">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.986 9.986 0 01-4.196-1.183c-.348-.252-.698-.48-.997-.716l-.006-.007C3.529 16.418 2 13.938 2 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
        </svg>
        <span>Comment</span>
      </button>
      <button class="flex items-center space-x-1 px-3 py-1 bg-red-500 text-white text-sm rounded-full shadow-lg hover:bg-red-600 transition duration-300">
        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.865 13.586 9 13.93 9 14.292V16H4.091C5.524 17.18 7.208 18 9 18h.083A6.001 6.001 0 0017 12c0-2.879-1.647-5.334-4-6.632V7c0 .456-.213.875-.568 1.1L9 10H6v2l4.515-.324c.142.3.335.591.576.865z"/>
        </svg>
        <span>Share</span>
      </button>
    </div>
  </div>
</div>

Composant Cartes 3D

Composant de carte 3D réactif pour les sites Web d’entreprise avec prise en charge du mode sombre.

Ouvrir Aperçu

                <section class="py-10 text-gray-700 bg-gray-100 dark:bg-gray-800 dark:text-gray-300">
      <div class="map-container container mx-auto px-4 relative" style="perspective: 1000px;">
        <div class="map-element" style="transform: rotateX(20deg) rotateZ(-10deg);">
          <!-- Replace with an actual map embed or a static image that looks like a map -->
          <img src="https://picsum.photos/seed/map/800/600" alt="Company Location Map" class="w-full h-auto shadow-lg rounded-lg">
        </div>
        <div class="map-overlay absolute top-0 left-0 w-full h-full flex items-center justify-center">
          <div class="bg-white dark:bg-gray-900 p-6 rounded-lg shadow-xl text-center" style="transform: translateZ(50px);">
            <h3 class="text-xl font-bold mb-2">Find Us</h3>
            <p class="text-gray-600 dark:text-gray-400">123 Business St, Corporate City</p>
            <a href="#" class="mt-4 inline-block bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded">Get Directions</a>
          </div>
        </div>
      </div>
    </section>

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.

Ouvrir Aperçu

                <div class="bg-gray-900 text-white p-5 rounded-lg shadow-lg dark:bg-gray-800 max-w-2xl mx-auto">
  <h2 class="text-2xl font-bold mb-4">Maps Component</h2>
  <div class="relative mb-5">
    <img src="https://picsum.photos/600/400" alt="Map" class="w-full h-64 object-cover rounded-md mb-2">
    <div class="absolute left-4 top-4 bg-black bg-opacity-50 p-2 rounded">Location 1</div>
    <div class="absolute left-24 top-20 bg-black bg-opacity-50 p-2 rounded">Location 2</div>
    <div class="absolute left-10 top-36 bg-black bg-opacity-50 p-2 rounded">Location 3</div>
  </div>
  <div class="flex flex-col space-y-3">
    <h3 class="text-lg font-semibold">Locations</h3>
    <div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">User 1</p>
        <p class="text-sm">Location 1 Description</p>
      </div>
    </div>
    <div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
      <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">User 2</p>
        <p class="text-sm">Location 2 Description</p>
      </div>
    </div>
    <div class="flex items-center bg-gray-700 p-3 rounded shadow dark:bg-gray-600">
      <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User 3" class="w-10 h-10 rounded-full mr-3">
      <div>
        <p class="font-bold">User 3</p>
        <p class="text-sm">Location 3 Description</p>
      </div>
    </div>
  </div>
  <button class="mt-5 bg-gray-800 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded dark:bg-gray-700 dark:hover:bg-gray-600">View More</button>
</div>

Composant Cartes

Composant Responsive Maps avec prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="bg-gray-900 text-gray-200 p-8 min-h-screen flex flex-col items-center justify-center">
  <h2 class="text-2xl font-bold mb-6 text-teal-300">My Location</h2>
  <div class="w-full max-w-md rounded-lg shadow-lg overflow-hidden">
    <div class="relative" style="padding-bottom: 56.25%;"><!-- 16:9 Aspect Ratio -->
      <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1dYOUR_LATITUDE_LONGITUDE!2dYOUR_LONGITUDE!3dYOUR_LATITUDE!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zM8KwMDAnMDAuMCJTIDc4wrAwMCcwMC4wIlc!5e0!3m2!1sen!2sus!4vYOUR_GENERATED_ID"
        width="100%" 
        height="100%" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy" 
        class="absolute top-0 left-0"
      ></iframe>
    </div>
  </div>
  <p class="mt-4 text-sm text-gray-400">Replace "YOUR_LATITUDE_LONGITUDE" and "YOUR_LONGITUDE" and "YOUR_LATITUDE" and "YOUR_GENERATED_ID" with your actual map details.</p>
</div>

Composant Cartes

Un composant de cartes réactives conçu dans un style skeuomorphe avec une palette de couleurs monochromatiques pour un tableau de bord, prenant en charge le mode sombre.

Ouvrir Aperçu

                <div class="bg-gray-200 dark:bg-gray-800 p-5 rounded-lg shadow-lg max-w-md mx-auto">
    <h2 class="text-gray-800 dark:text-gray-200 text-xl font-semibold mb-4">Maps Dashboard</h2>
    <div class="relative w-full h-64 rounded-lg overflow-hidden shadow-md">
        <img src="https://picsum.photos/500/300?random=1" alt="Map Image" class="w-full h-full object-cover rounded-lg" />
        <div class="absolute bottom-2 left-2 bg-gray-100 dark:bg-gray-700 bg-opacity-75 rounded-lg p-2">
            <p class="text-gray-800 dark:text-gray-200">Location: New York City</p>
        </div>
    </div>
    <div class="mt-4">
        <div class="flex items-center">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3" />
            <div>
                <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Map Editor</p>
            </div>
        </div>
        <div class="mt-2 flex justify-between">
            <button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 py-1 px-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition">Edit</button>
            <button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-gray-200 py-1 px-3 rounded-lg hover:bg-gray-400 dark:hover:bg-gray-500 transition">View</button>
        </div>
    </div>
</div>

Composant Cartes

Un composant de cartes réactives conçu avec un style skeuomorphe, avec des couleurs pastel douces et une interface riche adaptée aux réseaux sociaux. Le composant prend en charge les modes clair et sombre et comprend plusieurs éléments interactifs.

Ouvrir Aperçu

                <div class="flex flex-col items-center justify-center bg-white dark:bg-gray-800 rounded-lg shadow-lg w-full max-w-xl p-6">
  <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Explore the Map</h2>
  <div class="relative w-full h-64 rounded-lg overflow-hidden shadow-md transition-transform transform hover:scale-105">
    <img src="https://picsum.photos/400/300?random=1" alt="Map" class="w-full h-full object-cover">
    <div class="absolute inset-0 flex items-center justify-center">
      <span class="bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold px-2 py-1 rounded-full shadow-md">Current Location</span>
    </div>
  </div>
  <div class="mt-4 w-full">
    <h3 class="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">Connect with Friends</h3>
    <div class="flex flex-wrap justify-between">
      <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-3 flex items-center mb-2 w-1/2 shadow-md">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
          <p class="text-gray-800 dark:text-gray-200 font-bold">John Doe</p>
          <p class="text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-3 flex items-center mb-2 w-1/2 shadow-md">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
          <p class="text-gray-800 dark:text-gray-200 font-bold">Jane Smith</p>
          <p class="text-gray-600 dark:text-gray-400">@janesmith</p>
        </div>
      </div>
      <div class="bg-gray-100 dark:bg-gray-900 rounded-lg p-3 flex items-center mb-2 w-1/2 shadow-md">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
          <p class="text-gray-800 dark:text-gray-200 font-bold">Alice Johnson</p>
          <p class="text-gray-600 dark:text-gray-400">@alicejohnson</p>
        </div>
      </div>
    </div>
  </div>
</div>

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.

Ouvrir Aperçu

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">Maps Overview</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=1" alt="Map 1" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">City Map</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Interactive city map visualization.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=2" alt="Map 2" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Terrain Map</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Detailed terrain mapping for analysis.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=3" alt="Map 3" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Traffic Map</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Real-time traffic data and analytics.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=4" alt="Map 4" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Weather Map</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Interactive weather visualization.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=5" alt="Map 5" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Population Density Map</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Visual representation of population spread.</p>
            </div>
        </div>
        <div class="bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden">
            <img src="https://picsum.photos/300/200?random=6" alt="Map 6" class="w-full h-48 object-cover">
            <div class="p-4">
                <h3 class="text-gray-800 dark:text-gray-200 text-md font-medium">Resource Distribution Map</h3>
                <p class="text-gray-600 dark:text-gray-400 text-sm">Distribution of various resources across the region.</p>
            </div>
        </div>
    </div>
</div>

Composant Cartes

Un composant de carte complexe et dynamique pour les médias sociaux, avec des micro-interactions, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS.

Ouvrir Aperçu

                <div class="relative h-screen bg-gray-100 dark:bg-gray-900 overflow-hidden">
  <!-- Map Area -->
  <div class="absolute inset-0">
    <img src="https://picsum.photos/1600/900" alt="Map Background" class="w-full h-full object-cover filter blur-sm opacity-70">
  </div>

  <!-- Content Overlay -->
  <div class="relative z-10 flex items-center justify-center h-full">
    <div class="bg-white dark:bg-gray-800 bg-opacity-90 dark:bg-opacity-90 rounded-lg shadow-xl p-6 max-w-md mx-auto transform transition duration-500 ease-in-out hover:scale-105">
      <div class="text-center">
        <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Explore Connections Nearby</h2>
        
        <!-- User Avatars Grid with Microinteractions -->
        <div class="grid grid-cols-4 gap-4 mb-6">
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-pink-500 dark:border-pink-400 group-hover:border-pink-700 dark:group-hover:border-pink-600 transition duration-300 ease-in-out transform group-hover:scale-110">
            <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500 dark:bg-green-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 group-hover:border-blue-700 dark:group-hover:border-blue-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-yellow-500 dark:bg-yellow-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500 dark:border-purple-400 group-hover:border-purple-700 dark:group-hover:border-purple-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-gray-500 dark:bg-gray-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/women/91.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-500 dark:border-red-400 group-hover:border-red-700 dark:group-hover:border-red-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500 dark:bg-green-400"></span>
          </div>
           <div class="relative group">
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-teal-500 dark:border-teal-400 group-hover:border-teal-700 dark:group-hover:border-teal-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-red-500 dark:bg-red-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-orange-500 dark:border-orange-400 group-hover:border-orange-700 dark:group-hover:border-orange-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500 dark:bg-green-400"></span>
          </div>
           <div class="relative group">
            <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-indigo-500 dark:border-indigo-400 group-hover:border-indigo-700 dark:group-hover:border-indigo-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-gray-500 dark:bg-gray-400"></span>
          </div>
          <div class="relative group">
            <img src="https://randomuser.me/api/portraits/women/23.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-pink-500 dark:border-pink-400 group-hover:border-pink-700 dark:group-hover:border-pink-600 transition duration-300 ease-in-out transform group-hover:scale-110">
             <span class="absolute bottom-0 right-0 block h-3 w-3 rounded-full ring-2 ring-white dark:ring-gray-800 bg-green-500 dark:bg-green-400"></span>
          </div>
        </div>
        
        <!-- Interactive Buttons -->
        <div class="flex justify-center space-x-4">
          <button class="bg-pink-600 dark:bg-pink-700 text-white py-2 px-6 rounded-full font-semibold hover:bg-pink-700 dark:hover:bg-pink-800 transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
            Find Friends
          </button>
          <button class="bg-gray-300 dark:bg-gray-600 text-gray-800 dark:text-white py-2 px-6 rounded-full font-semibold hover:bg-gray-400 dark:hover:bg-gray-700 transition duration-300 ease-in-out transform hover:scale-105 shadow-lg">
            View Map
          </button>
        </div>

        <!-- Status Indicators with Animations -->
        <div class="mt-6 text-sm text-gray-600 dark:text-gray-300">
          <p class="flex items-center justify-center">
            <span class="h-2 w-2 rounded-full bg-green-500 dark:bg-green-400 mr-2 animate-pulse"></span>
            5 friends online nearby
          </p>
        </div>
      </div>
    </div>
  </div>
</div>