サイドバーナビゲーションコンポーネント
ブログ用に調整されたサイドバーナビゲーションコンポーネントで、3D要素と鮮やかな色で設計されています。ダークモードをサポートし、レスポンシブで、コンテンツの消費に適したシンプルなレイアウトが特徴です。
HTMLコード
<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg p-6 h-screen sticky top-0">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-4">Navigation</h2>
<ul class="space-y-4">
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Home</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">About</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Blog</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 rounded-lg hover:bg-blue-500 hover:text-white transition ease-in-out duration-150">
<img src="https://picsum.photos/30/30" alt="Avatar" class="rounded-full border border-gray-300 dark:border-gray-700">
<span class="ml-2 font-medium text-gray-700 dark:text-gray-300">Contact</span>
</a>
</li>
</ul>
</div>関連コンポーネント
サイドバーナビゲーションコンポーネント
Tailwind CSS を使用したダーク テーマのサポートを備えた、スキューモーフィックな方法でスタイル設定されたレスポンシブ サイドバー ナビゲーション コンポーネント。
レトロサイドバーナビゲーション
レトロ/ビンテージスタイルのサイドバーナビゲーションコンポーネントで、レスポンシブエフェクトとTailwind CSSを使用したダークテーマのサポートを備えています。
ソーシャルメディアサイドバーナビゲーションコンポーネント
レスポンシブ ソーシャル メディア サイドバー ナビゲーション コンポーネント ダーク テーマ ブルータリズム、アース トーン、および複雑なデザイン原則を使用したサポート。JavaScript は必要ありません。