CCHub Logo CCHub Tailwind Collection
コンポーネント 航法 ナビゲーションコンポーネント

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

ブログ/コンテンツの使用向けに設計されたレスポンシブナビゲーションコンポーネントで、3Dデザインスタイル、補色スキーム、およびいくつかのインタラクティブ機能を組み込んだ適度な複雑さを備えています。

プレビュー

HTMLコード 

<nav class="bg-gray-800 text-white shadow-lg p-4 dark:bg-gray-900">
    <div class="container mx-auto flex justify-between items-center">
        <div>
            <a href="#" class="text-xl font-bold hover:text-blue-400 transition duration-300">BlogLogo</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">Home</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">About</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">Blog</a>
            <a href="#" class="px-3 py-2 rounded-md text-sm font-medium transition duration-300 hover:bg-blue-600 hover:text-white dark:hover:bg-blue-700">Contact</a>
        </div>
    </div>
    <div class="flex items-center justify-between mt-4 space-x-4">
        <input type="text" placeholder="Search..." class="bg-gray-700 text-white rounded-md px-3 py-2 w-full max-w-xs mr-2 transition duration-300 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:focus:ring-blue-600" />
        <button class="bg-blue-500 text-white rounded-md px-3 py-2 transition duration-300 hover:bg-blue-600 dark:hover:bg-blue-700">Search</button>
    </div>
</nav>

<!-- Responsive Design -->
<div class="relative mt-10 p-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-800">
            <img src="https://picsum.photos/500/300" alt="Blog Image" class="w-full h-48 object-cover rounded-md mb-4" />
            <h2 class="font-bold text-lg mb-2">Blog Post Title</h2>
            <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        </div>
        <div class="bg-gray-700 p-4 rounded-lg shadow-lg dark:bg-gray-800">
            <img src="https://picsum.photos/500/301" alt="Blog Image" class="w-full h-48 object-cover rounded-md mb-4" />
            <h2 class="font-bold text-lg mb-2">Blog Post Title</h2>
            <p class="text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p>
        </div>
    </div>
</div>

<!-- Avatar Section -->
<div class="bg-gray-800 p-4 rounded-lg shadow-lg dark:bg-gray-900 mt-6">
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500" />
        <div>
            <h3 class="text-lg font-bold text-white">Author Name</h3>
            <p class="text-gray-400">Author Bio or description goes here. Sharing insights and stories.</p>
        </div>
    </div>
</div>

関連コンポーネント

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

物理的なコントロールパネルやダッシュボードなどの現実世界の要素を模倣するように設計されたスキューモーフィックナビゲーションコンポーネント。レスポンシブ デザイン、物理的なボタンの押下をシミュレートするホバー効果、ダーク テーマのサポートを備えています。ナビゲーションには、微妙な影、グラデーション、テクスチャが含まれており、物理的なインターフェイスを彷彿とさせる 3D の触覚的な外観を作り出しています。

開ける

マテリアル デザイン ナビゲーション コンポーネント

グレースケールの配色を使用したソーシャルメディアインターフェース用のシンプルでレスポンシブなマテリアルデザインナビゲーションコンポーネント。ロゴ、ナビゲーションリンク、検索バー、ユーザーアバターを備えたすっきりとしたレイアウトが特徴です。Tailwind の dark: プレフィックスを使用したダーク モードのサポートが含まれています。

開ける

Monospaceヘルスケアナビゲーション

ヘルスケア/医療アプリケーション向けの複雑で応答性の高いナビゲーションコンポーネントで、温かみのあるニュートラル、ダークモードのサポート、インタラクティブ要素を備えたモノスペース/開発者にインスパイアされたデザインが特徴です。

開ける