コンテンツリンクコンポーネントにスキップする
Neumorphism スタイルとアース トーンの配色を持つダッシュボードの応答性の高い [コンテンツにスキップ] リンク コンポーネント。
HTMLコード
<div class="flex justify-center mt-4">
<a href="#content" class="bg-gray-200 dark:bg-gray-800 text-gray-800 dark:text-white px-4 py-2 rounded-lg shadow-lg transition ease-in-out duration-300 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-300 dark:focus:ring-offset-gray-900">
Skip to Content
</a>
</div>関連コンポーネント
コンテンツリンクコンポーネントにスキップ - Skeuomorphism グレースケール
ブログコンテンツ用のグレースケールのSkeuomorphicデザインを使用したシンプルでレスポンシブな「コンテンツにスキップ」リンク。ダークモードのサポートが含まれています。
コンテンツリンクにスキップする
アクセシビリティのための「コンテンツにスキップ」リンクコンポーネントで、グレースケールの配色を持つダークモードダッシュボード用に設計されています。レスポンシブモードとダークモードのスタイリングにより、適度に複雑です。JavaScriptは使用しておりません。ダークテーマのサポートには、Tailwind CSS に dark: プレフィックスを使用します。
コンテンツリンクコンポーネントにスキップする
物理ボタンに似たスキューモーフィック要素で設計された Skip to Content Link コンポーネント。このコンポーネントには、パステル調の配色、ホバー効果を含む適度な複雑さ、ダーク テーマのサポートがあります。