Composant de navigation rétro vintage
Un composant de navigation au design rétro/vintage avec une palette de couleurs monochromatiques pour un tableau de bord. Il inclut des liens et prend en charge le mode sombre.
HTML Code
<nav class="bg-gray-800 p-4 shadow-md">
<div class="flex justify-between items-center">
<div class="text-white text-lg font-bold">Retro Dashboard</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-gray-300 hover:text-white">Home</a>
<a href="#" class="text-gray-300 hover:text-white">Data</a>
<a href="#" class="text-gray-300 hover:text-white">Settings</a>
<a href="#" class="text-gray-300 hover:text-white">Profile</a>
</div>
<div class="md:hidden">
<button class="text-gray-300 hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" 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="mt-4 md:hidden">
<a href="#" class="block text-gray-300 hover:text-white">Home</a>
<a href="#" class="block text-gray-300 hover:text-white">Data</a>
<a href="#" class="block text-gray-300 hover:text-white">Settings</a>
<a href="#" class="block text-gray-300 hover:text-white">Profile</a>
</div>
</nav>
<div class="p-4">
<h2 class="text-white text-2xl mb-4">Dashboard Overview</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-gray-700 p-4 rounded-md shadow-md">
<img src="https://picsum.photos/400/300?random=1" alt="Random Image" class="w-full h-32 object-cover rounded-md">
<h3 class="text-white mt-2">Data Point 1</h3>
<p class="text-gray-300">Description of data point 1.</p>
</div>
<div class="bg-gray-700 p-4 rounded-md shadow-md">
<img src="https://picsum.photos/400/300?random=2" alt="Random Image" class="w-full h-32 object-cover rounded-md">
<h3 class="text-white mt-2">Data Point 2</h3>
<p class="text-gray-300">Description of data point 2.</p>
</div>
<div class="bg-gray-700 p-4 rounded-md shadow-md">
<img src="https://picsum.photos/400/300?random=3" alt="Random Image" class="w-full h-32 object-cover rounded-md">
<h3 class="text-white mt-2">Data Point 3</h3>
<p class="text-gray-300">Description of data point 3.</p>
</div>
</div>
</div>Composants associés
Navigation sur les réseaux sociaux Monospace
Il s’agit d’un composant de navigation complexe et réactif pour les applications de médias sociaux, doté d’une esthétique monospace/développeur avec des couleurs sourdes et une prise en charge du mode sombre. Comprend le profil utilisateur, la recherche, les notifications et les liens de navigation principaux.
Navigation brutaliste dans le commerce électronique
Un composant de navigation de style brutaliste pour le commerce électronique, doté d’une palette de couleurs en niveaux de gris, d’une mise en page complexe, d’une réactivité et d’une prise en charge du mode sombre, construit avec Tailwind CSS.
Composant de navigation par neumorphisme
Composant de navigation Neumorphism optimisé pour les sites Web de portfolio. Il présente une mise en page complexe avec plusieurs éléments interactifs, un design réactif et une prise en charge du mode sombre à l’aide de Tailwind CSS. La palette de couleurs est analogue.