サイドバーナビゲーションコンポーネント
Brutalismスタイルで設計されたレスポンシブなサイドバーナビゲーションコンポーネントで、eコマースアプリケーションに最適です。鮮やかな色、ハイコントラスト、さまざまなショッピングカテゴリへのリンク、ユーザーアカウントオプション、ショッピングカートにアクセスするための鮮やかな召喚状ボタンなど、複数のインタラクティブ要素を備えています。デザインはダークモードにも適応します。
HTMLコード
<div class="flex flex-col w-64 h-screen p-4 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700">
<h1 class="text-3xl font-bold text-vibrant-500 dark:text-vibrant-300">Shop Sidebar</h1>
<ul class="mt-6 space-y-4">
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Home</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Products</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Categories</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Deals</span>
</a>
</li>
<li>
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://picsum.photos/20/20" alt="Category Icon" class="mr-3">
<span>Account</span>
</a>
</li>
</ul>
<div class="mt-6">
<a href="#" class="flex items-center justify-center h-12 bg-vibrant-500 text-white font-bold rounded-lg shadow-lg hover:bg-vibrant-600 transition ease-in-out duration-150">
<span>View Cart</span>
</a>
</div>
<div class="mt-auto">
<a href="#" class="flex items-center p-2 text-gray-900 dark:text-gray-100 hover:bg-vibrant-500 hover:text-white dark:hover:bg-vibrant-600 rounded-lg transition ease-in-out duration-150">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="rounded-full w-8 h-8 mr-3">
<span>Profile</span>
</a>
</div>
</div>
関連コンポーネント
Eコマースサイドバーナビゲーション
Tailwind CSSで構築された、トライアドカラースキーム、ホバー時のマイクロインタラクション、ダークモードのサポートを特徴とする、eコマースWebサイト用のシンプルでレスポンシブなサイドバーナビゲーションコンポーネント。
サイドバーナビゲーションコンポーネント
ソーシャルメディアアプリケーション用のシンプルでレスポンシブなサイドバーナビゲーションで、類似の配色でダークモード用に最適化されています。アバターとユーザー名、ナビゲーションリンクを含むプロファイルセクションが含まれています。このデザインは、スタイリングと応答性にTailwind CSSを使用しており、Tailwindの組み込みdark:プレフィックスによるダークモードのサポートを特徴としています。
サイドバーナビゲーションコンポーネント
3Dデザイン要素、類似の配色、インタラクティブ機能を備えた中程度の複雑さを備えたレスポンシブサイドバーナビゲーションコンポーネント。ブログやコンテンツWebサイトに適しています。