CCHub Logo CCHub Tailwind Collection
コンポーネント 航法 スキューモーフィック ナビゲーション コンポーネント

スキューモーフィック ナビゲーション コンポーネント

スキューモーフィック スタイルでデザインされたナビゲーション コンポーネントで、鮮やかな色とブログ コンテンツに適したレスポンシブ レイアウトが特徴です。ホバー効果などのインタラクティブ機能が含まれており、ダークモード用に最適化されています。

プレビュー

HTMLコード 

<nav class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 flex flex-col md:flex-row md:justify-between md:items-center">
    <div class="flex items-center mb-4 md:mb-0">
        <img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
        <h1 class="text-lg font-bold text-violet-700 dark:text-violet-400 ml-3">My Blog</h1>
    </div>
    <ul class="flex flex-col md:flex-row space-x-0 md:space-x-6">
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Home</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">About</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Blog</a>
        </li>
        <li class="mb-2 md:mb-0">
            <a href="#" class="text-blue-600 dark:text-blue-300 hover:text-blue-800 dark:hover:text-blue-400 transition duration-300 ease-in-out">Contact</a>
        </li>
    </ul>
</nav>

<div class="container mx-auto p-4">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Latest Posts</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
            <img class="rounded-lg" src="https://picsum.photos/400/200" alt="Blog Post">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title One</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the first blog post. It's an engaging intro that invites readers to learn more.</p>
        </div>
        <div class="bg-white dark:bg-gray-700 rounded-lg shadow-md p-4">
            <img class="rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Blog Post">
            <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-2">Post Title Two</h3>
            <p class="text-gray-600 dark:text-gray-400">This is a brief description of the second blog post. It has some intriguing insights to offer.</p>
        </div>
    </div>
</div>

関連コンポーネント

ナビゲーションコンポーネント

ポートフォリオWebサイト用のシンプルでレスポンシブなナビゲーションコンポーネントで、ダークモードUIを備えています。このデザインは補色を使用し、さまざまな画面サイズで読みやすさと美的魅力を確保します。

開ける

ブルータリズムEコマースナビゲーション

Tailwind CSSで構築された、グレースケールの配色、複雑なレイアウト、応答性、ダークモードのサポートを特徴とする、eコマース用のブルータリズムスタイルのナビゲーションコンポーネント。

開ける

ブルータリズムEコマースナビゲーションコンポーネント

Tailwind CSSを使用した複雑で残忍なeコマースナビゲーションコンポーネントで、ハイコントラスト(ブラック/ホワイト)のトライアドカラースキーム(イエロー、シアン、フクシア)、CSSのみのメガメニュー、CSSのみの検索表示、CSSのみのレスポンシブモバイルメニュー、ダークモードのサポートを備えています。HTMLのみ、JavaScriptは使用しません。

開ける