Komponenten suchen

Kategorien

Landkarten

Interaktive geografische Karten

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.

Offen Vorschau

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

Retro Maps-Komponente

Eine einfache, reaktionsschnelle Kartenkomponente mit Retro-/Vintage-Design, analogem Farbschema und Unterstützung für dunkle Themen unter Verwendung von Tailwind CSS. Geeignet für Blog- oder Content-Websites.

Offen Vorschau

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

Maps-Komponente

Kartenkomponente mit Skeuomorphismus-Design, triadischem Farbschema, mittlerer Komplexität und Social-Media-Zweck. Responsives Design mit Unterstützung für dunkle Themen mit Tailwind CSS.

Offen Vorschau

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

Komponente "3D-Karten"

Responsive 3D-Kartenkomponente für Unternehmenswebsites mit Unterstützung des Dunkelmodus.

Offen Vorschau

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

Maps-Komponente

Eine Webkomponente, die für Social-Media-Schnittstellen entwickelt wurde, mit einem brutalistischen Design mit einem Graustufen-Farbschema, das sich für die Anzeige von Karten mit markierten Standorten eignet.

Offen Vorschau

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

Maps-Komponente

Responsive Maps Component mit Unterstützung für den Dunkelmodus unter Verwendung von Tailwind CSS.

Offen Vorschau

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

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.

Offen Vorschau

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

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.

Offen Vorschau

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

Maps-Komponente

Eine komplexe Kartenkomponente, die im Material Design-Stil entworfen wurde und für Dashboards geeignet ist. Es integriert reaktionsschnelle Elemente, interaktive Funktionen und unterstützt die Ästhetik des Dunkelmodus mit einem analogen Farbschema.

Offen Vorschau

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

Maps-Komponente

Eine komplexe und lebendige Kartenkomponente für soziale Medien mit Mikrointeraktionen, responsivem Design und Unterstützung für den Dunkelmodus mit Tailwind CSS.

Offen Vorschau

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