Перейти к ссылке на содержание
Отзывчивый компонент Skip to Content Link, выполненный в скевоморфном стиле с пастельной цветовой гаммой. Этот компонент предназначен для использования блогов и контента, а также включает поддержку темного режима.
HTML-код
<a href="#main-content" class="flex items-center justify-center p-4 rounded-full shadow-md bg-gray-200 dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105 sm:bg-pink-200 md:bg-blue-200 lg:bg-green-200 dark:sm:bg-pink-800 dark:md:bg-blue-800 dark:lg:bg-green-800">
<img src="https://picsum.photos/20" alt="Scroll down icon" class="mr-3">
<span class="text-gray-800 dark:text-gray-200 font-semibold">Skip to Content</span>
</a>
<div id="main-content" class="mt-10 p-4 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Welcome to Our Blog</h1>
<p class="text-gray-600 dark:text-gray-300 mt-2">Here you will find various articles and content for your reading pleasure. Enjoy your stay!</p>
</div>Связанные компоненты
Перейти к ссылке на содержание
Компонент Skip to Content Link с 3D-дизайном в оттенках серого для бизнес-сайтов. Он адаптивный и поддерживает темный режим с использованием Tailwind CSS. Нет JavaScript.
Перейти к ссылке на содержание
Компонент Skip to Content Link, стилизованный в соответствии с принципами Material Design, монохроматической цветовой схемой и поддерживающий темный режим. Он подходит для сайтов электронной коммерции и построен с использованием Tailwind CSS без JavaScript.
Перейти к компоненту Ссылка на контент
Визуально привлекательная ссылка «Перейти к содержимому» в 3D-стиле, которая помогает пользователям обойти навигационные меню в интерфейсе социальных сетей. Компонент использует дополнительную цветовую схему (синий и оранжевый) с 3D-эффектом, достигаемым за счет теней и преобразований. Отличается адаптивным дизайном и поддержкой темных тем. Ссылка отображается в левом верхнем углу окна просмотра, когда она сфокусирована или активна, что делает ее легко доступной для навигации с помощью клавиатуры, оставаясь незаметной, когда она не используется.