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
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.
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.
Composants d’amélioration de la navigation
Un composant de navigation réactif avec une esthétique rétro/vintage, adapté aux applications de commerce électronique, avec prise en charge du thème sombre et interactivité modérée.