Бруталистский переход к ссылке на содержание (лес/зеленый)
Грубый, смелый компонент ссылок «Перейти к содержимому», выполненный в брутальном стиле с лесной/зеленой цветовой палитрой, подходит для систем бронирования/бронирования. Он отзывчив и поддерживает темный режим.
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:text-lg focus:font-extrabold focus:uppercase focus:tracking-wider focus:bg-emerald-600 focus:text-lime-50 focus:ring-4 focus:ring-lime-300 focus:ring-offset-4 focus:ring-offset-emerald-900 dark:focus:bg-emerald-800 dark:focus:text-lime-200 dark:focus:ring-lime-600 dark:focus:ring-offset-emerald-950 dark:focus:ring-offset-8 transition-all duration-300 ease-in-out">Skip to Main Content</a>
<main id="main-content" class="min-h-screen bg-lime-50 text-emerald-900 dark:bg-emerald-950 dark:text-lime-50 p-8 container mx-auto flex items-center justify-center">
<h1 class="text-4xl md:text-6xl font-black uppercase tracking-widest text-center leading-tight">Main Booking Content Starts Here</h1>
</main>Связанные компоненты
Перейти к ссылке на содержание
Отзывчивый компонент Skip to Content Link, выполненный в скевоморфном стиле с пастельной цветовой гаммой. Этот компонент предназначен для использования блогов и контента, а также включает поддержку темного режима.
Перейти к компоненту Ссылка на контент
Простой, доступный компонент ссылок для перехода к содержимому, разработанный для веб-сайтов о путешествиях и туризме, с цветовой гаммой сепия/коричневый цвет и поддержкой темного режима для снижения нагрузки на глаза.
Перейти к ссылке на содержание
Перейдите к компоненту Content Link, соответствующему принципам Material Design, с адаптивным дизайном, поддержкой темного режима и простой монохроматической цветовой схемой для приложений социальных сетей.