CCHub Logo CCHub Tailwind Collection
Komponenten Landkarten Maps-Komponente

Maps-Komponente

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

Vorschau

HTML-Code 

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

Verwandte Komponenten

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

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

Maps-Komponente

Eine responsive Maps-Komponente mit Material Design-Styling und Unterstützung für dunkle Themen, die mit Tailwind CSS erstellt wurde.

Offen