ブルータリスト コンテンツリンクへスキップ (フォレスト/グリーン)
フォレスト/グリーンのカラーパレットを備えたブルータリズムスタイルでデザインされた、生々しく大胆な「コンテンツにスキップ」リンクコンポーネントで、予約/予約システムに適しています。レスポンシブで、ダークモードをサポートしています。
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>関連コンポーネント
コンテンツリンクコンポーネントにスキップする
CRM/ビジネスツール用のシンプルで単色の、自然にインスパイアされた「コンテンツにスキップ」リンクコンポーネントで、ダークモードのサポートによりアクセシビリティと応答性を確保します。
コンテンツリンクにスキップする
3D デザインスタイルの Skip to Content Link コンポーネントで、アースカラーの配色で、中程度の複雑さの e コマース向けに設計されています。レスポンシブデザインとダークテーマのサポートが含まれています。
コンテンツリンクにスキップする
アクセシビリティのための「コンテンツにスキップ」リンクコンポーネントで、グレースケールの配色を持つダークモードダッシュボード用に設計されています。レスポンシブモードとダークモードのスタイリングにより、適度に複雑です。JavaScriptは使用しておりません。ダークテーマのサポートには、Tailwind CSS に dark: プレフィックスを使用します。