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.
HTML Code
<nav class="bg-pink-700 dark:bg-pink-800 p-4">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<div class="flex items-center space-x-4">
<img src="https://picsum.photos/50/50" alt="Logo" class="rounded-full">
<span class="text-yellow-300 dark:text-yellow-200 text-2xl font-bold">MyCompany</span>
</div>
<div class="hidden md:flex space-x-6 text-white dark:text-gray-300">
<a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Home</a>
<a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">About</a>
<a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Services</a>
<a href="#" class="hover:text-yellow-300 dark:hover:text-yellow-200 transition">Contact</a>
</div>
<div class="relative">
<button class="bg-yellow-300 dark:bg-yellow-200 text-black dark:text-black px-4 py-2 rounded-md hover:shadow-lg transition">Login</button>
<div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-md shadow-lg hidden group-hover:block">
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Profile</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Settings</a>
<a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700">Logout</a>
</div>
</div>
<div class="md:hidden">
<button class="text-white dark:text-gray-300 focus:outline-none">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 6h16M4 12h16m-7 6h7" /></svg>
</button>
</div>
</div>
</nav>
<section class="bg-gray-100 dark:bg-gray-900 py-10">
<div class="max-w-7xl mx-auto text-center">
<h1 class="text-4xl font-bold text-green-500 dark:text-green-400">Welcome to our Retro Business</h1>
<p class="mt-2 text-gray-700 dark:text-gray-400">Bringing you the best services with a touch of nostalgia.</p>
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=1" alt="Service 1" class="rounded-lg mb-4">
<h2 class="text-xl font-semibold">Service One</h2>
<p class="text-gray-600 dark:text-gray-300">Description of service 1.</p>
</div>
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=2" alt="Service 2" class="rounded-lg mb-4">
<h2 class="text-xl font-semibold">Service Two</h2>
<p class="text-gray-600 dark:text-gray-300">Description of service 2.</p>
</div>
<div class="p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
<img src="https://picsum.photos/200/200?random=3" alt="Service 3" class="rounded-lg mb-4">
<h2 class="text-xl font-semibold">Service Three</h2>
<p class="text-gray-600 dark:text-gray-300">Description of service 3.</p>
</div>
</div>
</div>
</section>Composants associés
Industrial_Monochromatic_Navigation
Il s’agit d’un composant de navigation complexe, axé sur le mode sombre, pour les entreprises industrielles et manufacturières, doté d’un design monochrome et de plusieurs éléments interactifs adaptés aux tableaux de bord et aux interfaces opérationnelles.
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.
Navigation gouvernementale inspirée du papier et de l’impression
Un composant de navigation complexe, inspiré du papier/de l’impression pour les sites Web gouvernementaux/publics, avec des tons sépia/bruns, une réactivité et une prise en charge du mode sombre. Il comprend la navigation principale, la recherche et une section « liens rapides » ou « services ».