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 dans le tableau de bord (Material Design)
Composant de navigation de tableau de bord de conception matérielle avec schéma de couleurs triadique et prise en charge du mode sombre.
Composant de navigation rétro
Un composant de navigation de style rétro avec une esthétique vintage des années 80/90, avec un design réactif et une prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant de navigation skeuomorphe
Un composant de navigation skeuomorphe conçu pour imiter des éléments du monde réel tels qu’un panneau de commande physique ou un tableau de bord. Dispose d’un design réactif, d’effets de survol qui simulent l’appui sur des boutons physiques et d’une prise en charge du thème sombre. La navigation comprend des ombres, des dégradés et des textures subtils pour créer une apparence tactile 3D rappelant les interfaces physiques.