Composant d’amélioration de la navigation
Un composant de navigation réactif conçu dans le style Material Design à l’aide de Tailwind CSS, avec prise en charge du thème sombre et des effets réactifs.
HTML Code
<nav class="bg-white dark:bg-gray-800 shadow-md">
<div class="max-w-6xl mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50" alt="Logo" class="h-10 w-10 rounded-full">
<a href="#" class="text-gray-800 dark:text-white font-semibold text-lg">Brand</a>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Home</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">About</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Services</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Contact</a>
</div>
<div class="md:hidden flex items-center">
<button class="text-gray-800 dark:text-white focus:outline-none">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
</svg>
</button>
</div>
</div>
<div class="px-4 md:hidden">
<div class="py-4 flex flex-col space-y-2">
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Home</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">About</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Services</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-blue-600">Contact</a>
</div>
</div>
</nav>
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 p-8">
<h1 class="text-3xl font-bold mb-4">Welcome to Our Website</h1>
<p class="mb-4">This is a responsive navigation enhancement component made using Tailwind CSS with Material Design principles.</p>
<img src="https://picsum.photos/800/400" alt="Placeholder" class="rounded shadow-lg mb-4">
<div class="flex">
<div class="w-1/3">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full h-16 w-16 shadow">
</div>
<div class="w-2/3 pl-4">
<h2 class="text-xl font-semibold">John Doe</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lacinia bibendum nulla sed consectetur.</p>
</div>
</div>
</div>Composants associés
Composant d’amélioration de la navigation
Un composant de navigation inspiré du glassmorphisme conçu pour présenter des travaux et des produits de portfolio avec prise en charge des tons de terre et du mode sombre. Le composant présente un effet de verre givré, un design réactif et des éléments minimaux.
Composant Composants d’amélioration de la navigation
Un composant de navigation réactif avec prise en charge du mode sombre pour les sites Web de commerce électronique. Il présente une palette de couleurs triadique avec un fond sombre pour réduire la fatigue oculaire.
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.