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
RétroNav
Un composant de navigation simple, réactif et compatible avec le mode sombre avec un design rétro/vintage, une palette de couleurs vives et des éléments minimaux, adapté aux sites Web de commerce électronique.
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 dans les médias sociaux
Un composant de navigation réactif conçu pour les interfaces de médias sociaux, avec une esthétique Material Design utilisant un thème sombre avec Tailwind CSS.