Компонент навигации по цепочке навигации
Адаптивный компонент навигации по хлебной цепочке, использующий стиль дизайна Neumorphism с пастельной цветовой схемой и поддержкой темной темы, созданный с использованием Tailwind CSS.
HTML-код
<nav class="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-lg dark:shadow-sm transition duration-300">
<ol class="list-reset flex">
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Home</a>
<svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
</svg>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Category</a>
<svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
</svg>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Subcategory</a>
<svg class="w-3 h-3 mx-2 text-gray-400 dark:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 12h12M6 12l6-6m-6 6l6 6" />
</svg>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 font-bold hover:underline">Current Page</a>
</li>
</ol>
</nav>
<!-- Example of how you can use it within a blog content -->
<div class="mt-4 dark:bg-gray-800 rounded-lg p-4 overflow-hidden shadow-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h1>
<p class="text-gray-600 dark:text-gray-400 mt-2">This is a paragraph of content where the blog post starts. It should be engaging and informative to keep readers on the page.</p>
<div class="mt-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/25.jpg" alt="Avatar" class="w-10 h-10 rounded-full">
<span class="ml-2 text-gray-700 dark:text-gray-300">Author Name</span>
</div>
</div>Связанные компоненты
Компонент навигации по цепочке навигации
Адаптивный навигационный компонент хлебной цепочки, выполненный в стиле Neumorphism, поддерживающий темный режим, созданный с использованием Tailwind CSS.
Компонент навигации по цепочке навигации
Компонент навигации Tailwind CSS Breadcrumb с поддержкой темного режима.
Компонент навигации по цепочке навигации
Адаптивный навигационный компонент навигационной цепочки, стилизованный под Material Design и Tailwind CSS, с поддержкой темных тем и триадической цветовой схемой.