CCHub Logo CCHub Tailwind Collection
구성 요소 기능적 구성 요소 기능 컴포넌트 컴포넌트 - 다크 모드 UI

기능 컴포넌트 컴포넌트 - 다크 모드 UI

다크 모드와 어스 톤으로 설계된 반응형 소셜 미디어 구성 요소로, 소셜 네트워킹 인터페이스에 적합합니다. 사용자 아바타, 게시물 콘텐츠 및 상호 작용 버튼을 제공합니다.

미리 보기

HTML 코드 

<div class="bg-gray-800 text-white p-4 rounded-lg shadow-md max-w-lg mx-auto dark:bg-gray-900">
    <div class="flex items-center mb-4">
        <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="ml-3">
            <h2 class="text-lg font-semibold">John Doe</h2>
            <p class="text-gray-400">@john_doe</p>
        </div>
    </div>
    <div class="mb-4">
        <p class="text-gray-300">Just had a great day exploring the mountains! 🌄</p>
        <img class="mt-2 rounded-lg" src="https://picsum.photos/600/300?random=1" alt="Nature Image">
    </div>
    <div class="flex justify-between text-gray-400">
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Like</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Comment</span>
        </button>
        <button class="flex items-center hover:text-white">
            <svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M..."/></svg>
            <span class="text-sm">Share</span>
        </button>
    </div>
</div>

관련 구성 요소

블로그 기능 구성 요소

기능적 구성 요소 3D 디자인의 구성 요소, 보색 구성표, 블로그의 중간 정도의 복잡성, 어두운 테마 지원으로 반응 형. JS는 없고 HTML과 Tailwind만 있습니다.

열다

헬스케어 기능 구성 요소

헬스케어 애플리케이션을 위한 반응형 및 주제별 구성 요소로, 산업 디자인, 차분한 색상 및 다크 모드 지원을 특징으로 합니다. 빠른 작업으로 환자/센서 데이터를 표시합니다.

열다

Microinteractions가 있는 전자 상거래 제품 카드

트라이어드 색 구성표와 마이크로 인터랙션 요소가 있는 간단한 전자 상거래 제품 카드로, 장바구니와 좋아요를 추가할 수 있으며, 응답성과 다크 모드를 지원합니다.

열다