Компонент карты сайта
Адаптивный компонент карты сайта с микровзаимодействиями, монохроматической цветовой схемой, сложным дизайном, поддержкой темных тем и CSS попутного ветра.
HTML-код
<div class="bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen p-8">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold mb-8 text-center">Site Map</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Section 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 1</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 1.3</a>
</li>
</ul>
</div>
<!-- Section 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 2</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 2.3</a>
</li>
</ul>
</div>
<!-- Section 3 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 3</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 3.3</a>
</li>
</ul>
</div>
<!-- Section 4 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 4</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 4.3</a>
</li>
</ul>
</div>
<!-- Section 5 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 5</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 5.3</a>
</li>
</ul>
</div>
<!-- Section 6 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-6 transform transition duration-300 hover:scale-105 hover:shadow-xl">
<h2 class="text-xl font-semibold mb-4 dark:text-white">Section 6</h2>
<ul>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.1</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.2</a>
</li>
<li class="mb-2 transform transition duration-300 hover:translate-x-2">
<a href="#" class="text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400">Link 6.3</a>
</li>
</ul>
</div>
</div>
</div>
</div>
Связанные компоненты
Компонент карты сайта
Сложный компонент карты сайта, реализующий скевоморфизм в стиле дизайна с цветовой гаммой земляных тонов, поддерживающий темную тему. Разработан для блогов/контента с интерактивными элементами, используя Tailwind CSS.
Компонент карты сайта
Адаптивный компонент карты сайта, разработанный с использованием стекломорфизма, с полупрозрачным эффектом, похожим на матовое стекло, и размытием для портфолио, демонстрирующего работу или продукты. Он поддерживает темную тему и использует дополнительные цвета, сохраняя при этом умеренную сложность.
Neon_Glow_Sports_Sitemap_Component
Простой, отзывчивый компонент карты сайта с неоново-светящимися эффектами и высококонтрастными цветами, адаптированный для приложений для спорта и фитнеса. Включает поддержку темного режима.