ソーシャルメディアナビゲーション
レスポンシブレイアウトとダークモード用に設計された、フォレストグリーンのパレットを備えた、すっきりとしたミニマリストのソーシャルメディアナビゲーションコンポーネント。メインナビゲーション、ユーザープロファイル、検索機能を備えています。
HTMLコード
<nav class="bg-emerald-50 dark:bg-gray-900 shadow-sm dark:shadow-lg transition-colors duration-300 md:sticky md:top-0 md:z-50">
<div class="container mx-auto px-4 sm:px-6 lg:px-8 py-3 flex flex-col md:flex-row items-center justify-between">
<!-- Logo/Brand Name -->
<div class="flex items-center justify-between w-full md:w-auto mb-3 md:mb-0">
<a href="#" class="text-xl md:text-2xl font-bold text-emerald-800 dark:text-emerald-300 tracking-tight flex items-center group">
<svg class="h-7 w-7 md:h-8 md:w-8 mr-2 text-emerald-600 dark:text-emerald-400 group-hover:rotate-12 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H2v-2a3 3 0 015.356-1.857M17 20v-2c0-.181-.018-.359-.05-.532a2.997 2.997 0 01-2.976-2.976 2.997 2.997 0 01-2.976 2.976 2.997 2.997 0 01-2.976-2.976A2.997 2.997 0 01-2.976 2.976 2.997 2.997 0 01-2.976 2.976-.05-.532C2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976 2.976Z" style="transform: scaleX(-1) translate(24px, 0)"></path>
</svg>
Connectify
</a>
<!-- Mobile Menu Button (Hamburger) -->
<button class="md:hidden flex items-center text-emerald-700 dark:text-emerald-300 hover:text-emerald-900 dark:hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md" aria-label="Toggle navigation menu">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<!-- Main Navigation & Search (Hidden on Mobile by default, can be toggled via JS) -->
<div class="hidden md:flex flex-col md:flex-row items-center flex-grow w-full md:w-auto" id="main-nav-menu">
<ul class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-8 lg:space-x-12 mr-0 md:mr-8 lg:mr-12 text-center md:text-left w-full md:w-auto">
<li>
<a href="#" class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 font-medium tracking-wide transition-colors duration-200 flex items-center justify-center md:justify-start py-2 group">
<svg class="h-5 w-5 mr-2 text-emerald-600 dark:text-emerald-300 group-hover:text-emerald-800 dark:group-hover:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
Home
</a>
</li>
<li>
<a href="#" class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 font-medium tracking-wide transition-colors duration-200 flex items-center justify-center md:justify-start py-2 group">
<svg class="h-5 w-5 mr-2 text-emerald-600 dark:text-emerald-300 group-hover:text-emerald-800 dark:group-hover:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
Messages
</a>
</li>
<li>
<a href="#" class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 font-medium tracking-wide transition-colors duration-200 flex items-center justify-center md:justify-start py-2 group">
<svg class="h-5 w-5 mr-2 text-emerald-600 dark:text-emerald-300 group-hover:text-emerald-800 dark:group-hover:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path></svg>
Notifications
<span class="ml-1 px-2 py-0.5 text-xs font-semibold rounded-full bg-red-500 text-white dark:bg-red-600">3</span>
</a>
</li>
</ul>
<div class="relative w-full md:w-64 lg:w-80 mt-4 md:mt-0">
<input type="text" placeholder="Search Connectify..." class="w-full py-2 pl-10 pr-4 rounded-full bg-emerald-100 dark:bg-gray-800 text-emerald-800 dark:text-emerald-100 placeholder-emerald-500 dark:placeholder-emerald-400 focus:outline-none focus:ring-2 focus:ring-emerald-400 dark:focus:ring-emerald-600 text-sm md:text-base transition-all duration-200 border border-emerald-200 dark:border-gray-700">
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-emerald-500 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
</div>
</div>
</div>
<!-- User Profile & Settings -->
<div class="flex items-center space-x-4 mt-3 md:mt-0 ml-0 md:ml-8 lg:ml-12">
<button aria-label="User profile settings" class="hidden sm:block">
<img class="h-9 w-9 md:h-10 md:w-10 rounded-full object-cover ring-2 ring-emerald-300 dark:ring-emerald-600 hover:ring-emerald-500 dark:hover:ring-emerald-400 transition-all duration-200" src="https://randomuser.me/api/portraits/women/68.jpg" alt="User Avatar">
</button>
<button class="text-emerald-700 dark:text-emerald-200 hover:text-emerald-900 dark:hover:text-emerald-500 focus:outline-none focus:ring-2 focus:ring-emerald-500 rounded-md p-1 md:p-2" aria-label="More options">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
</button>
</div>
</div>
</nav>関連コンポーネント
ダークモードポートフォリオナビゲーション
ポートフォリオ Web サイト用の複雑でレスポンシブなナビゲーション コンポーネントで、類似色のダーク モード UI が特徴で、作業や製品を紹介するように設計されています。デスクトップ、タブレット、モバイルのレイアウトとドロップダウンとユーザーアバターが含まれます。
ソーシャル メディア ナビゲーション コンポーネント
ソーシャルメディアアプリケーション向けのシンプルでレスポンシブなナビゲーションコンポーネントで、ダークテーマとマテリアルデザインにインスパイアされた補色スキームを備えています。これには、ロゴ、ナビゲーションリンク、およびユーザーアバターが含まれています。
ナビゲーションコンポーネントコンポーネント
Tailwind CSSを使用したダークモードをサポートするレスポンシブナビゲーションコンポーネント。ロゴ、ナビゲーションリンク、コールトゥアクションボタンが含まれています。