コンテンツリンクにスキップする
マテリアルデザインの原則に沿ったコンテンツリンクコンポーネントにスキップし、レスポンシブデザイン、ダークモードのサポート、ソーシャルメディアアプリケーション向けのシンプルなモノクロ配色を特徴としています。
HTMLコード
<a href="#content" class="skip-to-content block absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full bg-blue-500 text-white p-3 transition-all duration-300 focus:translate-y-0 z-50 dark:bg-blue-700 dark:text-gray-200">Skip to content</a>関連コンポーネント
コンテンツリンクコンポーネントにスキップ - Skeuomorphism グレースケール
ブログコンテンツ用のグレースケールのSkeuomorphicデザインを使用したシンプルでレスポンシブな「コンテンツにスキップ」リンク。ダークモードのサポートが含まれています。
ブルータリスト コンテンツリンクへスキップ (フォレスト/グリーン)
フォレスト/グリーンのカラーパレットを備えたブルータリズムスタイルでデザインされた、生々しく大胆な「コンテンツにスキップ」リンクコンポーネントで、予約/予約システムに適しています。レスポンシブで、ダークモードをサポートしています。
コンテンツリンクコンポーネントにスキップする
スポーツ/フィットネスアプリケーション向けのクリーンでミニマリストの「コンテンツにスキップ」リンクコンポーネントで、グレースケールの配色で設計されています。レスポンシブで、ダークモードをサポートし、タイポグラフィとアクセシビリティを強調しています。