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

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

パステルカラーのスキームでスキューモーフィックなスタイルでデザインされた、レスポンシブな Skip to Content Link コンポーネント。このコンポーネントは、ブログとコンテンツの消費を目的としており、ダークモードのサポートが含まれています。

プレビュー

HTMLコード 

<a href="#main-content" class="flex items-center justify-center p-4 rounded-full shadow-md bg-gray-200 dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105 sm:bg-pink-200 md:bg-blue-200 lg:bg-green-200 dark:sm:bg-pink-800 dark:md:bg-blue-800 dark:lg:bg-green-800">
    <img src="https://picsum.photos/20" alt="Scroll down icon" class="mr-3"> 
    <span class="text-gray-800 dark:text-gray-200 font-semibold">Skip to Content</span>
</a>
<div id="main-content" class="mt-10 p-4 bg-white dark:bg-gray-900 rounded-lg shadow-lg">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200">Welcome to Our Blog</h1>
    <p class="text-gray-600 dark:text-gray-300 mt-2">Here you will find various articles and content for your reading pleasure. Enjoy your stay!</p>
</div>

関連コンポーネント

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

3D デザインスタイルの Skip to Content Link コンポーネントで、アースカラーの配色で、中程度の複雑さの e コマース向けに設計されています。レスポンシブデザインとダークテーマのサポートが含まれています。

開ける

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

コンテンツリンクコンポーネントにスキップ マテリアルデザインの原則、単色の配色、およびサポートするダークモードでスタイル化されたコンポーネント。eコマースWebサイトに適しており、JavaScriptなしでTailwind CSSを使用して構築されています。

開ける

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

ビジネスWebサイト用の3Dグレースケールデザインのコンテンツリンクコンポーネントにスキップします。レスポンシブで、Tailwind CSSを使用したダークモードをサポートしています。JavaScript はありません。

開ける