Luxury_SaaS_Navigation_Candy
SaaSアプリケーション向けのラグジュアリー/プレミアムスタイルのナビゲーションコンポーネントで、キャンディーをテーマにした配色(バブルガムピンク、ミントグリーン)と洗練されたタイポグラフィが特徴です。レスポンシブで、ダークモードのサポートが含まれており、インタラクティブな要素があります。
HTMLコード
<nav class="relative bg-white dark:bg-gray-900 shadow-lg font-['Quicksand',_sans-serif]" x-data="{ open: false }">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-20">
<div class="flex">
<div class="flex-shrink-0 flex items-center">
<a href="#" class="text-pink-500 dark:text-pink-400 text-3xl font-extrabold tracking-tight">
SaaS<span class="text-teal-400 dark:text-teal-300">Flow</span>
</a>
</div>
<div class="hidden sm:ml-6 sm:flex sm:space-x-8 items-center">
<a href="#" class="border-b-2 border-transparent hover:border-pink-300 dark:hover:border-pink-500 text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Features</a>
<a href="#" class="border-b-2 border-transparent hover:border-teal-300 dark:hover:border-teal-500 text-gray-700 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Pricing</a>
<a href="#" class="border-b-2 border-transparent hover:border-pink-300 dark:hover:border-pink-500 text-gray-700 dark:text-gray-300 hover:text-pink-500 dark:hover:text-pink-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Solutions</a>
<a href="#" class="border-b-2 border-transparent hover:border-teal-300 dark:hover:border-teal-500 text-gray-700 dark:text-gray-300 hover:text-teal-500 dark:hover:text-teal-400 px-3 py-2 rounded-md text-lg font-medium transition duration-300 ease-in-out">Contact</a>
</div>
</div>
<div class="hidden sm:ml-6 sm:flex sm:items-center">
<button class="p-2 rounded-full text-pink-400 dark:text-pink-300 hover:text-pink-600 dark:hover:text-pink-500 hover:bg-pink-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition duration-300 ease-in-out">
<span class="sr-only">View notifications</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
</svg>
</button>
<button x-on:click="$store.darkMode.toggle()" class="ml-4 p-2 rounded-full text-teal-400 dark:text-teal-300 hover:text-teal-600 dark:hover:text-teal-500 hover:bg-teal-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition duration-300 ease-in-out">
<span class="sr-only">Toggle dark mode</span>
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path x-show="$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.575l.707-.707M6.025 18.025l-.707.707M18.025 6.025l.707-.707M6.025 6.025l-.707-.707M12 7a5 5 0 110 10 5 5 0 010-10z" />
<path x-show="!$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
<button type="button" class="ml-4 inline-flex items-center px-5 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-pink-400 to-pink-600 hover:from-pink-500 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition duration-300 ease-in-out">
Sign Up
</button>
</div>
<div class="-mr-2 flex items-center sm:hidden">
<!-- Mobile menu button -->
<button x-on:click="open = !open" type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 dark:text-gray-300 hover:text-gray-500 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-pink-500 transition duration-300 ease-in-out" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg x-show="!open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
<svg x-show="open" class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Mobile menu, show/hide based on menu state. -->
<div x-show="open" x-transition:enter="duration-200 ease-out" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="duration-100 ease-in" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="sm:hidden absolute inset-x-0 top-full z-10 bg-white dark:bg-gray-900 shadow-md transform origin-top-right" id="mobile-menu">
<div class="pt-2 pb-3 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-pink-50 dark:hover:bg-gray-800 hover:text-pink-500 dark:hover:text-pink-400 transition duration-300 ease-in-out">Features</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-teal-50 dark:hover:bg-gray-800 hover:text-teal-500 dark:hover:text-teal-400 transition duration-300 ease-in-out">Pricing</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-pink-50 dark:hover:bg-gray-800 hover:text-pink-500 dark:hover:text-pink-400 transition duration-300 ease-in-out">Solutions</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-teal-50 dark:hover:bg-gray-800 hover:text-teal-500 dark:hover:text-teal-400 transition duration-300 ease-in-out">Contact</a>
<div class="flex items-center justify-between px-3 py-2">
<button class="flex-shrink-0 p-2 rounded-full text-pink-400 dark:text-pink-300 hover:text-pink-600 dark:hover:text-pink-500 hover:bg-pink-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transition duration-300 ease-in-out">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
<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" />
</svg>
</button>
<button x-on:click="$store.darkMode.toggle()" class="ml-4 flex-shrink-0 p-2 rounded-full text-teal-400 dark:text-teal-300 hover:text-teal-600 dark:hover:text-teal-500 hover:bg-teal-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 transition duration-300 ease-in-out">
<svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path x-show="$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2m15.325-4.575l.707-.707M6.025 18.025l-.707.707M18.025 6.025l.707-.707M6.025 6.025l-.707-.707M12 7a5 5 0 110 10 5 5 0 010-10z" />
<path x-show="!$store.darkMode.on" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
</div>
<a href="#" class="block w-full text-center px-4 py-2 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-pink-400 to-pink-600 hover:from-pink-500 hover:to-pink-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-pink-500 transform hover:scale-105 transition duration-300 ease-in-out mt-4 mx-3">Sign Up</a>
</div>
</div>
</nav>
<script>
// This Alpine.js store provides dark mode functionality.
// It's a simple example and can be extended for persistence.
// Required for Alpine.js to function
document.addEventListener('alpine:init', () => {
Alpine.store('darkMode', {
on: localStorage.getItem('darkMode') === 'true' || (localStorage.getItem('darkMode') === null && window.matchMedia('(prefers-color-scheme: dark)').matches),
toggle() {
this.on = !this.on;
localStorage.setItem('darkMode', this.on);
document.documentElement.classList.toggle('dark', this.on);
}
});
// Initialize dark mode class on html tag based on store value
Alpine.effect(() => {
if (Alpine.store('darkMode').on) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
});
});
</script>関連コンポーネント
ブルータリズムEコマースナビゲーションコンポーネント
Tailwind CSSを使用した複雑で残忍なeコマースナビゲーションコンポーネントで、ハイコントラスト(ブラック/ホワイト)のトライアドカラースキーム(イエロー、シアン、フクシア)、CSSのみのメガメニュー、CSSのみの検索表示、CSSのみのレスポンシブモバイルメニュー、ダークモードのサポートを備えています。HTMLのみ、JavaScriptは使用しません。
ニューモーフィズム ナビゲーション コンポーネント
Neumorphism Navigation Componentは、PortfolioのWebサイト用に最適化されています。複数のインタラクティブ要素を備えた複雑なレイアウト、レスポンシブデザイン、Tailwind CSSを使用したダークモードのサポートが特徴です。配色は類似です。
ブルータリズムEコマースナビゲーション
Tailwind CSSで構築された、グレースケールの配色、複雑なレイアウト、応答性、ダークモードのサポートを特徴とする、eコマース用のブルータリズムスタイルのナビゲーションコンポーネント。