ArtDeco_Neon_Photography_Navigation
写真ポートフォリオ用のシンプルでレスポンシブなナビゲーションコンポーネントで、アールデコ風の幾何学模様と、ダークモードをサポートする鮮やかなネオン/エレクトリックカラースキームが特徴です。
HTMLコード
<nav class="bg-gradient-to-r from-purple-900 via-pink-800 to-indigo-900 dark:from-purple-950 dark:via-pink-900 dark:to-indigo-950 p-4 shadow-xl font-['Georgia',_serif]">
<div class="container mx-auto flex flex-wrap items-center justify-between">
<a href="#" class="text-white tracking-widest text-3xl font-bold uppercase select-none relative group">
<span class="relative z-10">LUMINA</span>
<span class="absolute inset-0 bg-gradient-to-br from-pink-500 to-blue-500 blur-sm opacity-0 group-hover:opacity-75 transition-opacity duration-300"></span>
<span class="absolute inset-0 bg-gradient-to-br from-pink-400 to-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform group-hover:scale-105"></span>
</a>
<div class="block lg:hidden">
<button class="flex items-center px-3 py-2 border-2 rounded text-white border-neon-blue-400 hover:text-neon-pink-400 hover:border-neon-pink-400 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-neon-blue-300">
<svg class="fill-current h-6 w-6" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v15z"/>
</svg>
</button>
</div>
<div class="w-full flex-grow lg:flex lg:items-center lg:w-auto hidden lg:block" id="navbar-default">
<ul class="text-sm lg:flex flex-1 items-center lg:justify-end uppercase tracking-wide">
<li>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-blue-300 transition-colors duration-300 px-4 py-2 relative group">
Gallery
<span class="block h-0.5 bg-neon-blue-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
</a>
</li>
<li>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-pink-300 transition-colors duration-300 px-4 py-2 relative group">
Portfolio
<span class="block h-0.5 bg-neon-pink-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
</a>
</li>
<li>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-green-300 transition-colors duration-300 px-4 py-2 relative group">
About
<span class="block h-0.5 bg-neon-green-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
</a>
</li>
<li>
<a href="#" class="block mt-4 lg:inline-block lg:mt-0 text-white font-semibold hover:text-neon-yellow-300 transition-colors duration-300 px-4 py-2 relative group">
Contact
<span class="block h-0.5 bg-neon-yellow-400 group-hover:scale-x-100 scale-x-0 transition-transform duration-300 origin-left absolute bottom-0 left-0 right-0"></span>
</a>
</li>
</ul>
</div>
</div>
</nav>関連コンポーネント
Monospace_Booking_Navigation_Complex_Triadic
モノスペース/開発者の美学を備えた複雑な予約/予約ナビゲーションコンポーネント。トライアドカラースキーム、レスポンシブデザイン、ダークモードのサポートが特徴で、アポイントメントシステムに最適です。
農業ニュースカードナビゲーション
紙や印刷物にインスパイアされたシンプルなナビゲーションコンポーネントで、農業や農業のウェブサイト用のニュースカードが特徴で、類似の配色が使用されています。ダークモードのサポートにより、完全にレスポンシブです。