ブレッドクラムナビゲーションコンポーネント
ミニマリストのフラットスタイルで設計されたレスポンシブなパンくずリストナビゲーションコンポーネントで、ブログやコンテンツの消費に適しています。ナビゲーションを容易にするためのインタラクティブな要素が含まれており、ダークモードをサポートしています。
HTMLコード
<nav class="bg-white dark:bg-gray-800 p-4 rounded-lg shadow-md">
<ol class="list-none flex space-x-4">
<li class="text-gray-700 dark:text-gray-300">
<a href="/" class="hover:text-blue-600 dark:hover:text-blue-300">Home</a>
</li>
<li class="text-gray-700 dark:text-gray-300">
<span>/</span>
</li>
<li class="text-gray-700 dark:text-gray-300">
<a href="/category" class="hover:text-blue-600 dark:hover:text-blue-300">Category</a>
</li>
<li class="text-gray-700 dark:text-gray-300">
<span>/</span>
</li>
<li class="text-gray-700 dark:text-gray-300">
<a href="/category/post" class="hover:text-blue-600 dark:hover:text-blue-300">Post Title</a>
</li>
</ol>
</nav>
<div class="mt-4 space-y-2">
<div class="flex items-center space-x-2">
<img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/thumb/men/1.jpg" alt="User Avatar">
<span class="text-gray-800 dark:text-gray-200">Author Name</span>
</div>
<p class="text-gray-600 dark:text-gray-400">
This is a brief description meant for content consumption. It should be concise and engaging.
</p>
</div>
<div class="flex items-center mt-4">
<img class="h-32 w-full rounded-lg" src="https://picsum.photos/800/400" alt="Blog Post Image">
</div>関連コンポーネント
Paper_Jewel_Tone_Breadcrumb_Navigation
複雑な紙/印刷物にインスパイアされたパンくずリストナビゲーションコンポーネントで、ジュエルトーンで、コンサルティング/サービスWebサイトに適しています。豊富なインタラクティブ要素を備えており、完全な応答性とダークモードをサポートします。
Earth_Tones_Gradient_Breadcrumb_Navigation
ニュース/ジャーナリズムのWebサイト向けに設計された、複雑で応答性の高いブレッドクラムナビゲーションコンポーネントで、アースグラデーショントランジションと完全なダークモードのサポートを特徴としています。