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
Navigation de la carte des nouvelles de l’agriculture
Un composant de navigation simple, inspiré du papier/de l’impression, comprenant une carte d’actualités pour l’agriculture et les sites Web agricoles, utilisant une palette de couleurs analogue. Il est entièrement réactif avec la prise en charge du mode sombre.
Composant d’amélioration de la navigation
Un composant de navigation réactif conçu pour le mode sombre avec Tailwind CSS, avec des espaces réservés pour les logos, les images et les avatars.
Composants d’amélioration de la navigation
Une barre de navigation rétro/vintage avec un design complexe pour les sites Web professionnels, avec une palette de couleurs triadique et une prise en charge réactive du thème sombre.