CCHub Logo CCHub Tailwind Collection
コンポーネント コンテンツリンクにスキップする コンテンツリンクコンポーネントにスキップする

コンテンツリンクコンポーネントにスキップする

テクノロジー/SaaSアプリケーションのアクセシビリティのためのニューモーフィックな「コンテンツにスキップ」リンクコンポーネントで、紫/紫の配色とダークモードのサポートによる完全な応答性が特徴です。

プレビュー

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:rounded-xl focus:font-semibold focus:text-purple-800 focus:bg-purple-200 focus:shadow-neumorphic-light dark:focus:text-purple-200 dark:focus:bg-purple-800 dark:focus:shadow-neumorphic-dark motion-safe:transition-all motion-safe:duration-300 motion-safe:ease-in-out focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 dark:focus:ring-offset-purple-950 focus:ring-offset-purple-50">Skip to Main Content</a>

<style>
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0a1c6, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #4a148c,
                -6px -6px 12px #9c27b0;
  }
</style>

関連コンポーネント

コンテンツリンクにスキップする

Neumorphismデザインスタイル、トライアドカラースキーム、ブログやコンテンツWebサイトの複雑なレイアウトを備えたコンテンツリンクコンポーネントにスキップします。レスポンシブデザインとTailwind CSSを使用したダークモードのサポートが含まれています。

開ける

コンテンツリンクコンポーネントにスキップする

Tailwind CSS を使用して、レスポンシブ効果とダークテーマのサポートを備えた 3D スタイルの「コンテンツにスキップ」リンクを提供する Web コンポーネント。

開ける

コンテンツリンクコンポーネントにスキップする

Glassmorphism Skipは、曇りガラス効果、ぼかし、応答性、およびTailwind CSSを使用したダークモードのサポートを特徴とするコンテンツリンクにスキップします。

開ける