Composant de navigation rétro vintage
Un composant de navigation réactif conçu avec une esthétique rétro/vintage inspirée des styles des années 80/90, avec une palette de couleurs pastel. Convient aux interfaces de médias sociaux, y compris la prise en charge du mode sombre.
HTML Code
<nav class="bg-pink-100 dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<div class="flex items-center justify-between">
<div class="text-xl font-bold text-gray-800 dark:text-white">
RetroSocial
</div>
<div class="hidden md:flex space-x-4">
<a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
<a href="#" class="text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
</div>
<button class="md:hidden bg-pink-600 text-white p-2 rounded-lg hover:bg-pink-500 transition duration-200">
Menu
</button>
</div>
<div class="mt-2 md:hidden">
<a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Home</a>
<a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Profile</a>
<a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Messages</a>
<a href="#" class="block text-gray-800 dark:text-white hover:text-pink-600 dark:hover:text-pink-400 transition duration-200">Settings</a>
</div>
</nav>
<div class="bg-pink-50 dark:bg-gray-900 p-6 mt-4 rounded-lg">
<h2 class="text-2xl text-gray-800 dark:text-white font-bold">Welcome to RetroSocial</h2>
<p class="text-gray-600 dark:text-gray-300 mt-2">
Connect with friends, share memories, and explore the past with our vintage-inspired social media platform.
</p>
<div class="mt-4 flex space-x-4">
<img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
<img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
<img src="https://picsum.photos/50/50" alt="Random user avatar" class="rounded-full border-2 border-pink-500">
</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 3D
Un composant de navigation 3D réactif conçu avec Tailwind CSS, avec la prise en charge des thèmes sombres et des éléments tridimensionnels attrayants.
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.