CCHub Logo CCHub Tailwind Collection
Komponenten Landkarten Maps-Komponente

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.

Vorschau

HTML-Code 

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

Verwandte Komponenten

Maps-Komponente

Eine reaktionsschnelle, kartenähnliche Komponente, die für Bildungsplattformen entwickelt wurde, mit interaktiven Elementen und sanften Pastellfarben mit Unterstützung für den Dunkelmodus. Konzentriert sich auf Mikrointeraktionen wie subtile Schwebevorgänge und aktive Zustände.

Offen

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

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