レトロなビンテージナビゲーションコンポーネント
80年代/90年代のスタイルにインスパイアされたレトロ/ヴィンテージの美学でデザインされたレスポンシブナビゲーションコンポーネントで、パステルカラーの配色が特徴です。ダークモードのサポートを含むソーシャルメディアインターフェースに適しています。
HTMLコード
<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>