ブルータリスト コンテンツリンクへスキップ (フォレスト/グリーン)
フォレスト/グリーンのカラーパレットを備えたブルータリズムスタイルでデザインされた、生々しく大胆な「コンテンツにスキップ」リンクコンポーネントで、予約/予約システムに適しています。レスポンシブで、ダークモードをサポートしています。
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>関連コンポーネント
コンテンツリンクコンポーネントにスキップする
Glassmorphism Skipは、曇りガラス効果、ぼかし、応答性、およびTailwind CSSを使用したダークモードのサポートを特徴とするコンテンツリンクにスキップします。
コンテンツリンクにスキップする
Glassmorphismでスタイル設定されたレスポンシブな「コンテンツへスキップ」リンクコンポーネントで、補完的な配色、適度な複雑さ、およびビジネス/企業のWebサイトに適したダークモードのサポートを実装しています。このコンポーネントは、Tailwind CSSクラスを使用して純粋にHTMLで実装され、JavaScriptは必要ありません。