CCHub Logo CCHub Tailwind Collection
Komponenten Landkarten Maps-Komponente

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.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Maps-Komponente

Eine responsive Kartenkomponente, die mit Neumorphismus formatiert ist, dunkles Design unterstützt und Platzhalterbilder enthält.

Offen

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

Brutalism_Photography_Maps_Component

Eine einfache, brutalistische Kartenkomponente für Fotografie-Portfolios mit einem kräftigen violetten Farbschema mit hohem Kontrast und Unterstützung für den Dunkelmodus.

Offen