Retro Social Media Navigation
Responsive Navigation Component with Dark Mode for Social Media (Retro/Vintage, Earth Tones, Moderate Complexity)
HTML Code
<nav class="bg-stone-200 dark:bg-stone-800 p-4">
<div class="container mx-auto flex items-center justify-between">
<div class="text-xl font-bold text-stone-800 dark:text-stone-200">SocialApp</div>
<ul class="flex space-x-4">
<li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Feed</a></li>
<li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Profile</a></li>
<li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Messages</a></li>
<li><a href="#" class="text-stone-600 dark:text-stone-400 hover:text-stone-800 dark:hover:text-stone-200">Settings</a></li>
</ul>
</div>
</nav>Related Components
Brutalism Navigation Component
A responsive navigation component designed in a brutalist style, showcasing a monochromatic color scheme, ideal for a portfolio website. Features include a bold layout with high contrast, dark mode support using Tailwind CSS, and interactive elements like dropdowns or button links.
Skeuomorphic Navigation Component
A navigation component designed with skeuomorphic style, featuring a complementary color scheme, suitable for a dashboard with data visualization and control panels. It includes interactive elements for user engagement.
Brutalist Social Media Navigation
A responsive navigation component designed in a brutalist style for social media applications, utilizing a complementary color scheme and minimal elements.