Компоненты Карта сайта Компонент карты сайта

Компонент карты сайта

Компонент карты сайта в стиле Material Design для интерфейсов социальных сетей, отличающийся отзывчивостью и поддержкой темного режима с использованием Tailwind CSS. Сочетает в себе земляные тона и среднюю сложность для платформ социальных сетей.

Предварительный просмотр

HTML-код

<div class="bg-stone-100 text-stone-800 p-8 dark:bg-stone-800 dark:text-stone-200">
  <div class="container mx-auto">
    <h2 class="text-3xl font-bold mb-6">Site Map</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <div>
        <h3 class="text-xl font-semibold mb-4">General</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Home</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">About Us</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Contact</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Blog</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Account</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Profile</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Settings</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Privacy</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Security</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Social</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Feed</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Messages</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Friends</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Groups</a></li>
        </ul>
      </div>
      <div>
        <h3 class="text-xl font-semibold mb-4">Resources</h3>
        <ul>
          <li class="mb-2"><a href="#" class="hover:underline">Help Center</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">FAQs</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Terms of Service</a></li>
          <li class="mb-2"><a href="#" class="hover:underline">Privacy Policy</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>

Связанные компоненты

Компонент карты сайта

Компонент карты сайта, разработанный в стиле брутализм с темной темой, идеально подходит для профессиональных бизнес-сайтов. Он отличается смелой планировкой с высокой контрастностью и интерактивными элементами.

Открытый

Компонент карты сайта

Адаптивный компонент карты сайта с микровзаимодействиями, пастельной цветовой гаммой и поддержкой темной темы, подходящий для веб-сайтов электронной коммерции. Он включает в себя заголовок, строку поиска и несколько категорий со ссылками.

Открытый

Компонент карты сайта

Адаптивный компонент карты сайта, разработанный в темном режиме с использованием Tailwind CSS.

Открытый