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

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

ブルータリズムスタイルで設計されたレスポンシブナビゲーションコンポーネントで、ポートフォリオWebサイトに最適な単色の配色を示しています。機能には、ハイコントラストの大胆なレイアウト、Tailwind CSSを使用したダークモードのサポート、ドロップダウンやボタンリンクなどのインタラクティブ要素が含まれます。

プレビュー

HTMLコード 

<nav class="bg-gray-900 dark:bg-gray-800 p-5 flex justify-between items-center">
    <div class="text-white font-bold text-2xl">
        Portfolio
    </div>
    <ul class="flex space-x-6">
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Home</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">About</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Projects</a>
        </li>
        <li>
            <a href="#" class="text-gray-300 hover:text-white transition duration-200">Contact</a>
        </li>
    </ul>
    <div class="relative group">
        <button class="text-gray-300 hover:text-white transition duration-200 focus:outline-none">
            Menu
        </button>
        <div class="absolute left-0 mt-2 w-48 bg-gray-700 dark:bg-gray-600 rounded-md shadow-xl opacity-0 group-hover:opacity-100 transition duration-200 ease-in-out">
            <a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 1</a>
            <a href="#" class="block px-4 py-2 text-gray-200 hover:bg-gray-800 dark:hover:bg-gray-700">Action 2</a>
        </div>
    </div>
</nav>

<section class="bg-gray-800 dark:bg-gray-900 p-10">
    <h2 class="text-white text-3xl font-bold mb-4">Featured Projects</h2>
    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 1</h3>
                <p class="text-gray-300">Short description of project 1.</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 2</h3>
                <p class="text-gray-300">Short description of project 2.</p>
            </div>
        </div>
        <div class="bg-gray-700 dark:bg-gray-600 rounded-lg shadow-lg overflow-hidden">
            <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full">
            <div class="p-4">
                <h3 class="text-xl text-white font-semibold">Project Title 3</h3>
                <p class="text-gray-300">Short description of project 3.</p>
            </div>
        </div>
    </div>
</section>

関連コンポーネント

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

スキューモーフィックスタイルで設計されたナビゲーションコンポーネントで、補色の配色が特徴で、データの視覚化とコントロールパネルを備えたダッシュボードに適しています。これには、ユーザーエンゲージメントのためのインタラクティブな要素が含まれています。

開ける

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

Microinteractionsで設計され、ユーザーアクションに基づく魅力的なアニメーションを特徴とするレスポンシブナビゲーションコンポーネントで、明るいテーマと暗いテーマの両方をサポートします。このコンポーネントには、プロファイル アバター、ナビゲーション リンク、ホバー効果が含まれます。

開ける

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

ロゴ、検索バー、ナビゲーションリンク、ショッピングカートアイコン、Tailwind CSSを使用したユーザーアバターを特徴とする、eコマースWebサイト用のミニマリストナビゲーションコンポーネント。このコンポーネントは、レスポンシブデザインとダークモードをサポートしています。

開ける