CCHub Logo CCHub Tailwind Collection
구성 요소 소셜 구성 요소 소셜 구성 요소 구성 요소

소셜 구성 요소 구성 요소

Tailwind CSS를 사용하고 머티리얼 디자인 원칙에 따라 설계된 간단한 소셜 미디어 구성 요소입니다. 생생한 색상과 다크 모드 지원이 특징이므로 소셜 네트워킹 인터페이스에 적합합니다.

미리 보기

HTML 코드 

<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Social Media Image">
    <div class="p-4">
        <div class="flex items-center space-x-3">
            <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
            <div>
                <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
                <p class="text-gray-600 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <p class="mt-2 text-gray-600 dark:text-gray-300">This is a sample post demonstrating the vibrant and energetic design suitable for social media engagement.</p>
        <div class="mt-4 flex justify-between">
            <button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Like</button>
            <button class="px-4 py-2 text-white bg-green-500 rounded hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700">Comment</button>
        </div>
    </div>
</div>

관련 구성 요소

소셜 구성 요소 구성 요소

무차별 스타일의 소셜 구성 요소로, 트라이어드 색 구성표로 포트폴리오 항목을 표시하여 작업이나 제품을 표시하는 데 적합합니다.

열다

소셜 구성 요소 구성 요소

어두운 모드에서 단색 색 구성표로 설계된 포트폴리오 구성 요소입니다. 단순한 레이아웃으로 작품이나 제품을 선보입니다.

열다

소셜 구성 요소 구성 요소

블로그 콘텐츠를 위한 스큐어모피즘(Skeuomorphism)과 단색 색 구성표로 디자인된 간단한 소셜 미디어 구성 요소입니다. Tailwind CSS를 사용하여 반응형 레이아웃과 어두운 테마 지원이 특징입니다.

열다