Перейти к компоненту ссылки на контент - скевоморфизм в оттенках серого
Простая, отзывчивая ссылка "Перейти к содержимому" со скевоморфным дизайном в оттенках серого для содержимого блога. Включает поддержку темного режима.
HTML-код
<a href="#main-content" class="skip-to-content-link sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:bg-gray-200 focus:text-gray-900 focus:px-4 focus:py-2 focus:rounded focus:shadow-lg dark:focus:bg-gray-700 dark:focus:text-gray-100 dark:focus:shadow-xl">Skip to content</a>
<main id="main-content" class="p-4">
<!-- Your main content goes here -->
<h1 class="text-2xl font-bold mb-4 text-gray-800 dark:text-gray-200">Main Content Area</h1>
<p class="text-gray-700 dark:text-gray-300">This is the main content of the page. The "Skip to content" link will bring you here.</p>
</main>Связанные компоненты
Перейти к компоненту Ссылка на контент
Визуально привлекательная ссылка «Перейти к содержимому» в 3D-стиле, которая помогает пользователям обойти навигационные меню в интерфейсе социальных сетей. Компонент использует дополнительную цветовую схему (синий и оранжевый) с 3D-эффектом, достигаемым за счет теней и преобразований. Отличается адаптивным дизайном и поддержкой темных тем. Ссылка отображается в левом верхнем углу окна просмотра, когда она сфокусирована или активна, что делает ее легко доступной для навигации с помощью клавиатуры, оставаясь незаметной, когда она не используется.
Перейти к ссылке на содержание
Компонент Skip to Content Link с 3D-дизайном в оттенках серого для бизнес-сайтов. Он адаптивный и поддерживает темный режим с использованием Tailwind CSS. Нет JavaScript.
Перейти к компоненту Ссылка на контент
Адаптивный компонент ссылки «Перейти к содержимому» для панели управления в стиле «Неоморфизм» и цветовой схеме «Земляные тона».