Cerca componenti

Categorie

Mappe

Mappe geografiche interattive

Componente Mappe Brutaliste

Un complesso componente di mappa per l'e-commerce in stile brutalista con colori monocromatici e supporto per la modalità oscura utilizzando Tailwind CSS. Mostra le posizioni dei prodotti con elementi di design brutalisti.

Aperto Anteprima

                
<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>

Componente Mappe retrò

Un componente di mappe semplice e reattivo con un design retrò/vintage, una combinazione di colori analoga e il supporto per temi scuri, che utilizza Tailwind CSS. Adatto per blog o siti Web di contenuti.

Aperto Anteprima

                <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>

Componente Mappe

Componente Mappe con design Skeuomorphism, combinazione di colori triadica, complessità moderata e scopo per i social media. Design reattivo con supporto per temi scuri utilizzando Tailwind CSS.

Aperto Anteprima

                <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>

Componente Mappe 3D

Componente mappa 3D reattiva per siti Web aziendali con supporto per la modalità scura.

Aperto Anteprima

                <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>

Componente Mappe

Un componente web progettato per le interfacce dei social media, caratterizzato da un design brutalista con una combinazione di colori in scala di grigi, adatto per la visualizzazione di mappe con posizioni contrassegnate.

Aperto Anteprima

                <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>

Componente Mappe

Componente Mappe reattive con supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto Anteprima

                <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>

Componente Mappe

Un componente di mappe reattivo progettato in uno stile scheumorfico con una combinazione di colori monocromatica per una dashboard, che supporta la modalità oscura.

Aperto Anteprima

                <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>

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.

Aperto Anteprima

                <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>

Componente Mappe

Un componente di mappe complesso progettato in stile Material Design, adatto per dashboard. Integra elementi reattivi, funzionalità interattive e supporta l'estetica della modalità oscura utilizzando una combinazione di colori analoga.

Aperto Anteprima

                <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>

Componente Mappe

Un componente di mappa complesso e vibrante per i social media, con microinterazioni, design reattivo e supporto per la modalità oscura utilizzando Tailwind CSS.

Aperto Anteprima

                <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>