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>

関連コンポーネント

3D_Triadic_Simple_Business_Navigation

3Dデザインの美学とトライアドカラースキームを備えたシンプルでレスポンシブなビジネスナビゲーションコンポーネントで、ダークモードをサポートします。

開ける

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

ポートフォリオ用に設計されたレスポンシブナビゲーションコンポーネントで、マイクロインタラクションとダークテーマのサポートを備えています。

開ける

Neumorphic Navigation コンポーネント

紫/紫の配色を使用したニューモーフィックデザインスタイルのシンプルで応答性の高いナビゲーションコンポーネントで、フォーラムやコミュニティプラットフォームに適しています。ダークモードのサポートが含まれています。

開ける