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

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

3D 要素、アース トーンで設計され、ダッシュボード インターフェイス用に調整された コンテンツ リンク コンポーネントにスキップします。明るいテーマと暗いテーマの両方のスタイルが含まれています。

プレビュー

HTMLコード 

<div class="flex flex-col gap-4 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg transform transition-all duration-300 hover:scale-105">
    <a href="#content" class="flex items-center justify-center h-12 px-4 font-medium text-white bg-brown-700 rounded-full shadow-md dark:bg-green-600 hover:bg-brown-600 dark:hover:bg-green-500 transition duration-300">
        Skip to Content
    </a>
    <p class="text-gray-800 dark:text-gray-300">
        Use this link to quickly navigate to the main content of the dashboard.
    </p>
    <img src="https://picsum.photos/200/100" alt="Dashboard Image" class="rounded-lg shadow-md" />
    <div class="flex items-center gap-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-gray-300 dark:border-gray-600" />
        <span class="text-gray-800 dark:text-gray-300">User: John Doe</span>
    </div>
</div>

関連コンポーネント

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

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

開ける

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

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

開ける

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

視覚的に魅力的な「コンテンツにスキップ」リンクコンポーネントは、マイクロインタラクションに焦点を当てたダッシュボード向けに設計されており、補完的な配色とTailwind CSSによるダークモードのサポートを利用しています。

開ける