Перейти к компоненту Ссылка на контент
Неоморфный компонент ссылки «Перейти к содержимому» для специальных возможностей в приложениях Technology/SaaS, отличающийся фиолетово-фиолетовой цветовой схемой и полной отзывчивостью с поддержкой темного режима.
HTML-код
<a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 focus:z-50 focus:px-6 focus:py-3 focus:rounded-xl focus:font-semibold focus:text-purple-800 focus:bg-purple-200 focus:shadow-neumorphic-light dark:focus:text-purple-200 dark:focus:bg-purple-800 dark:focus:shadow-neumorphic-dark motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-purple-950 focus:ring-offset-purple-50">Skip to Main Content</a>
<style>
.shadow-neumorphic-light {
box-shadow: 6px 6px 12px #b0a1c6, -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 6px 6px 12px #4a148c,
-6px -6px 12px #9c27b0;
}
</style>Связанные компоненты
Перейти к ссылке на содержание
Компонент Skip to Content Link, стилизованный в соответствии с принципами Material Design, монохроматической цветовой схемой и поддерживающий темный режим. Он подходит для сайтов электронной коммерции и построен с использованием Tailwind CSS без JavaScript.
Перейти к ссылке на содержание
Адаптивный компонент ссылки "Skip to Content", стилизованный под Glassmorphism, реализующий дополнительную цветовую схему, умеренную сложность и поддержку темного режима, подходящий для бизнес/корпоративных сайтов. Этот компонент реализован исключительно в HTML с помощью CSS-классов Tailwind, не требуя JavaScript.
Перейти к компоненту Ссылка на контент
Компонент Skip to Content Link, разработанный с использованием 3D-элементов, земляных тонов и адаптированный для интерфейсов приборной панели. Он включает в себя стили как для светлой, так и для темной тем.