コンテンツリンクにスキップ - レトロな単色
レトロ/ビンテージデザイン、単色の配色、シンプルな複雑さのコンテンツリンクコンポーネントにスキップします。
HTMLコード
```html
<a href="#main-content" class="sr-only focus:not-sr-only fixed z-50 top-4 left-4 bg-stone-800 text-stone-100 px-6 py-3 rounded-md text-lg font-mono tracking-wide uppercase focus:outline-none focus:ring-2 focus:ring-stone-500 focus:ring-opacity-75 dark:bg-stone-100 dark:text-stone-800 dark:focus:ring-stone-400">
Skip to Content
</a>
<div id="main-content" class="focus:outline-none" tabindex="-1">
<!-- Page content goes here -->
</div>
```関連コンポーネント
コンテンツリンクコンポーネントにスキップする
メインコンテンツにスキップするためのリンクを提供するWebコンポーネントで、パステルカラーの配色のマテリアルデザインでスタイル設定されており、eコマースWebサイトに適しています。ダークテーマをサポートするレスポンシブデザインが特徴です。
コンテンツリンクにスキップする
マテリアルデザインの原則に沿ったコンテンツリンクコンポーネントにスキップし、レスポンシブデザイン、ダークモードのサポート、ソーシャルメディアアプリケーション向けのシンプルなモノクロ配色を特徴としています。
コンテンツリンクにスキップする
ビジネスWebサイト用の3Dグレースケールデザインのコンテンツリンクコンポーネントにスキップします。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。JavaScript はありません。