CCHub Logo CCHub Tailwind Collection
Komponenten Landkarten Maps-Komponente

Maps-Komponente

Eine Maps-Komponente mit Glassmorphism-Design mit responsiven Effekten und Unterstützung für dunkle Themen, die Tailwind CSS verwendet.

Vorschau

HTML-Code 

<div class="flex justify-center items-center h-screen bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 bg-opacity-30 backdrop-blur-md rounded-lg shadow-lg p-6 max-w-lg w-full">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-4">Our Locations</h2>
    <div class="relative">
      <img src="https://picsum.photos/600/400?random=1" alt="Map Image" class="rounded-lg" />
      <div class="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
        <p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location A</p>
      </div>
      <div class="absolute top-1/4 right-1/4 w-full h-full flex flex-col justify-center items-center">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
        <p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location B</p>
      </div>
      <div class="absolute bottom-0 left-1/4 w-full h-full flex flex-col justify-center items-center">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-white shadow-lg" />
        <p class="text-sm text-gray-800 dark:text-gray-200 mt-2">Location C</p>
      </div>
    </div>
    <div class="flex justify-between mt-4">
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">View More</button>
      <button class="bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-800 dark:text-gray-200 font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Contact Us</button>
    </div>
  </div>
</div>

Verwandte Komponenten

Minimalistische monochromatische Business Maps-Komponente

Eine reaktionsschnelle und interaktive Kartenkomponente, die für Geschäfts- und Unternehmenswebsites entwickelt wurde und sich durch ein minimalistisches, flaches Design, ein monochromatisches Farbschema und Unterstützung für den Dunkelmodus auszeichnet. Enthält einen Platzhalter, ein Kartenbild und Platzhalter für Kontaktdetails.

Offen

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

IndustrieVibrantMapsComponent

Eine reaktionsschnelle und interaktive Kartenkomponente mit einer industriellen, rohen Ästhetik und einem lebendigen Farbschema, geeignet für Technologie-/SaaS-Anwendungen. Enthält Unterstützung für den Dunkelmodus.

Offen