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.
HTML-Code
<nav class="bg-white dark:bg-gray-800 shadow-lg">
<div class="max-w-7xl mx-auto px-2 sm:px-6 lg:px-8">
<div class="relative flex items-center justify-between h-16">
<div class="absolute inset-y-0 left-0 flex items-center sm:hidden">
<!-- Mobile menu button -->
<button class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
<svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
<div class="flex-shrink-0">
<img class="h-8 w-8" src="https://picsum.photos/40/40" alt="Logo" />
</div>
<div class="hidden sm:block sm:ml-6">
<div class="flex space-x-4">
<a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">About</a>
<a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Services</a>
<a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact</a>
</div>
</div>
</div>
</div>
</div>
<div class="sm:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1">
<a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">About</a>
<a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Services</a>
<a href="#" class="text-gray-900 hover:bg-gray-300 hover:text-black dark:text-gray-100 dark:hover:bg-gray-700 dark:hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact</a>
</div>
</div>
</nav>
<section class="bg-gray-50 dark:bg-gray-900">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h1 class="text-3xl font-semibold text-gray-900 dark:text-white">Welcome to Our Website</h1>
<div class="mt-4 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<img class="rounded-md" src="https://picsum.photos/500/300" alt="Placeholder Image" />
<h2 class="mt-2 text-lg font-medium text-gray-900 dark:text-white">Section 1</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description for section 1.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<img class="rounded-md" src="https://picsum.photos/500/301" alt="Placeholder Image" />
<h2 class="mt-2 text-lg font-medium text-gray-900 dark:text-white">Section 2</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description for section 2.</p>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-4">
<img class="rounded-md" src="https://picsum.photos/500/302" alt="Placeholder Image" />
<h2 class="mt-2 text-lg font-medium text-gray-900 dark:text-white">Section 3</h2>
<p class="text-gray-600 dark:text-gray-300">This is a description for section 3.</p>
</div>
</div>
</div>
</section>Verwandte Komponenten
E-Commerce Industrielle Navigation
Eine komplexe, industrielle E-Commerce-Navigationskomponente mit ästhetischen Rohstoffen und freiliegenden Elementen. Verfügt über ein monochromes Schwarz-Weiß-Schema mit hellem Akzent, vollständig reaktionsschnell mit Unterstützung des Dunkelmodus.
Komponenten zur Verbesserung der Navigation
Eine 3D-entworfene Navigationskomponente mit einem analogen Farbschema, mittlerer Komplexität, geeignet für die Visualisierung von Dashboard-Daten und Bedienfeldern.
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.