Composants d’amélioration de la navigation
Un composant de navigation réactif conçu avec les concepts de conception matérielle à l’aide de Tailwind CSS, avec la prise en charge du thème sombre et des images de remplacement.
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>Composants associés
Composants d’amélioration de la navigation
Un composant simple d’amélioration de la navigation en mode sombre pour présenter un portfolio, à l’aide de Tailwind CSS.
Composants d’amélioration de la navigation
Un composant de navigation conçu avec le skeuomorphisme, avec des éléments numériques qui imitent leurs homologues du monde réel. Il est stylisé à l’aide de Tailwind CSS avec des effets réactifs et la prise en charge du thème sombre.
Composants d’amélioration de la navigation
Un composant de navigation conçu avec une esthétique brutaliste, avec des designs audacieux, un contraste élevé et des mises en page inhabituelles. Il comprend des effets réactifs et prend en charge les thèmes sombres avec CSS.