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

소셜 구성 요소 구성 요소

매력적인 애니메이션과 단색 색 구성표가 있는 블로그를 위한 마이크로 인터랙션에 중점을 둔 소셜 구성 요소입니다.

미리 보기

HTML 코드 

<div class="max-w-4xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
    <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Social Engagement</h2>
    <div class="flex items-center space-x-4 mb-6">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-gray-200 dark:border-gray-600 transition duration-300 ease-in-out transform hover:scale-110">
        <div>
            <h3 class="text-lg font-semibold text-gray-700 dark:text-gray-200">John Doe</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">@john_doe</p>
        </div>
    </div>
    <p class="text-gray-600 dark:text-gray-300 mb-4">This is a post about engaging with content effectively in today's digital landscape.</p>
    <img src="https://picsum.photos/600/300" alt="Blog post preview" class="rounded-lg mb-4 transition duration-300 ease-in-out transform hover:scale-105 shadow-md">
    <div class="flex items-center space-x-4">
        <button class="flex items-center px-4 py-2 bg-blue-500 text-white rounded-lg transition duration-300 ease-in-out hover:bg-blue-600 dark:hover:bg-blue-400 shadow focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M12 5l7 7-7 7" />
            </svg>
            Share
        </button>
        <button class="flex items-center px-4 py-2 bg-gray-200 text-gray-700 rounded-lg transition duration-300 ease-in-out hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-300 dark:hover:bg-gray-600 shadow focus:outline-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12h-3.086a2.003 2.003 0 00-3.415 0H5m14-1h-2.586a2.003 2.003 0 00-3.415 0H4m5 0l2 2-2 2m0-4l-2 2-2-2" />
            </svg>
            Comment
        </button>
    </div>
</div>

관련 구성 요소

소셜 구성 요소 구성 요소

블로그/콘텐츠 페이지를 위한 복잡하고 활기찬 소셜 구성 요소로, 공유 버튼, 좋아요, 댓글 및 저장과의 미시적 상호 작용에 중점을 둡니다. 완전한 응답성과 다크 모드 지원이 포함됩니다.

열다

소셜 구성 요소 구성 요소

Tailwind CSS로 구현된 유사한 색 구성표를 가진 잔인하고 복잡하며 전자 상거래 중심의 소셜 구성 요소입니다. 반응이 빠르며 다크 모드를 지원합니다.

열다

소셜 구성 요소 구성 요소

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

열다