CCHub Logo CCHub Tailwind Collection
구성 요소 탐색 구성 요소 브루탈리즘 소셜 미디어 내비게이션

브루탈리즘 소셜 미디어 내비게이션

소셜 미디어 응용 프로그램을 위해 브루탈리즘 스타일로 설계된 반응형 탐색 구성 요소로, 보색 구성표와 최소한의 요소를 활용합니다.

미리 보기

HTML 코드 

<nav class="bg-gray-800 dark:bg-gray-900 p-4 flex justify-between items-center">
    <div class="flex items-center space-x-4">
        <a href="#" class="text-white dark:text-gray-200 font-bold text-lg">Logo</a>
        <ul class="flex space-x-4">
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Home</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Profile</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Messages</a></li>
            <li><a href="#" class="text-white dark:text-gray-200 hover:text-blue-500 dark:hover:text-blue-400">Settings</a></li>
        </ul>
    </div>
    <div class="flex items-center space-x-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full">
        <a href="#" class="text-white dark:text-gray-200 font-bold">Logout</a>
    </div>
</nav>
<div class="bg-gray-100 dark:bg-gray-800 p-8">
    <h1 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Welcome to Our Social Media</h1>
    <img src="https://picsum.photos/800/400" alt="Random Image" class="rounded-lg shadow-lg">
</div>

관련 구성 요소

Brutalism Navigation 구성 요소

브루탈리즘 스타일로 디자인된 반응형 탐색 구성 요소로, 단색 색 구성표를 보여 주며 포트폴리오 웹 사이트에 이상적입니다. 기능에는 고대비의 대담한 레이아웃, Tailwind CSS를 사용한 다크 모드 지원, 드롭다운 또는 버튼 링크와 같은 대화형 요소가 포함됩니다.

열다

소셜 미디어 내비게이션

포레스트 그린 팔레트가 있는 깔끔하고 미니멀한 소셜 미디어 탐색 구성 요소로, 반응형 레이아웃과 다크 모드를 위해 설계되었습니다. 기본 탐색, 사용자 프로필 및 검색 기능을 제공합니다.

열다

레트로포트폴리오내비게이션

Retro/Vintage Navigation Component for Portfolio with Pastel color scheme, responsive, and dark mode support. 레트로/빈티지 내비게이션 컴포넌트(Retro/Vintage Navigation Component for Portfolio with Pastel color scheme, responsive, and dark mode) 지원.

열다