CCHub Logo CCHub Tailwind Collection
Komponenten Komponenten zur Verbesserung der Navigation Komponente zur Verbesserung der Navigation

Komponente zur Verbesserung der Navigation

Eine von Glassmorphism inspirierte Navigationskomponente für die Präsentation von Portfolioarbeiten und Produkten mit Erdtönen und Unterstützung für den Dunkelmodus. Die Komponente verfügt über einen Milchglaseffekt, ein responsives Design und minimale Elemente.

Vorschau

HTML-Code 

<nav class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg border-b border-gray-300 dark:border-gray-700 rounded-lg p-4 shadow-lg">
  <div class="container mx-auto flex justify-between items-center">
    <div class="flex items-center">
      <img src="https://picsum.photos/40" alt="Logo" class="rounded-full mr-2">
      <span class="text-xl font-semibold text-gray-900 dark:text-gray-100">Portfolio</span>
    </div>
    <ul class="flex space-x-4">
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Home</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Gallery</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">About</a></li>
      <li><a href="#" class="text-gray-700 dark:text-gray-200 hover:text-gray-900 dark:hover:text-gray-300">Contact</a></li>
    </ul>
  </div>
</nav>

<section class="p-8 bg-gray-50 dark:bg-gray-900">
  <h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">My Work</h2>
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    <div class="bg-white bg-opacity-30 dark:bg-gray-800 backdrop-blur-lg rounded-lg overflow-hidden shadow-lg">
      <img src="https://picsum.photos/400/300" alt="Project Image" class="w-full h-48 object-cover">
      <div class="p-4">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100">Project Title</h3>
        <p class="text-gray-700 dark:text-gray-300">Brief description of the project goes here. Showcasing work effectively.</p>
      </div>
    </div>
    <!-- Repeat similar divs for more projects -->
  </div>
</section>

Verwandte Komponenten

Komponenten zur Verbesserung der Navigation

Eine Navigationskomponente, die mit Skeuomorphismus entwickelt wurde und digitale Elemente enthält, die reale Gegenstücke nachahmen. Es wird mit Tailwind CSS mit responsiven Effekten und Unterstützung für dunkle Themen gestaltet.

Offen

Papier-/Print-inspirierte Navigation für Unterhaltungsplattformen

Eine einfache, reaktionsschnelle Navigationskomponente für Unterhaltungsplattformen, die einen Papier-/Druckstil mit einer waldgrünen Farbpalette nachahmt. Enthält Unterstützung für den Dunkelmodus und verwendet semantisches HTML.

Offen

Komponenten zur Verbesserung der Navigation

Eine responsive Navigationskomponente, die mit Material Design-Konzepten unter Verwendung von Tailwind CSS entwickelt wurde, mit Unterstützung für dunkle Designs und Platzhalterbildern.

Offen