コンテンツリンクコンポーネントにスキップする
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>関連コンポーネント
コンテンツリンクコンポーネントにスキップする
視覚的に魅力的な 3D スタイルの [コンテンツにスキップ] リンクは、ユーザーがソーシャル メディア インターフェイスのナビゲーション メニューをバイパスするのに役立ちます。このコンポーネントは、補色 (青とオレンジ) を使用し、影と変換によって 3D 効果を実現します。レスポンシブデザインとダークテーマのサポートを備えています。リンクは、フォーカスされているときやアクティブになっているときはビューポートの左上に固定されているように見えるため、キーボード操作に簡単にアクセスでき、使用していないときは目立たないようになっています。
コンテンツリンクコンポーネントにスキップする
レトロ/ビンテージの「コンテンツにスキップ」リンクコンポーネントは、ビジネス/企業のWebサイト向けに設計されており、アクセシビリティとダークモードのサポートを備えています。