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

소셜 구성 요소 구성 요소

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

미리 보기

HTML 코드 

<div class="max-w-sm mx-auto bg-gray-100 dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden md:max-w-2xl m-5">
  <div class="md:flex">
    <div class="md:flex-shrink-0">
      <img class="h-48 w-full object-cover md:w-48" src="https://picsum.photos/seed/social/400/300" alt="Social image">
    </div>
    <div class="p-8">
      <div class="uppercase tracking-wide text-sm text-gray-500 dark:text-gray-400 font-semibold">Social Update</div>
      <a href="#" class="block mt-1 text-lg leading-tight font-medium text-gray-900 dark:text-white hover:underline">Engaging Title Here</a>
      <p class="mt-2 text-gray-500 dark:text-gray-400">This is a short description of the social update. It's designed to be concise and engaging for blog readers.</p>
      <div class="mt-4 flex items-center">
        <img class="h-8 w-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div class="text-sm">
          <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
          <p class="text-gray-600 dark:text-gray-500">Posted on Oct 26, 2023</p>
        </div>
      </div>
    </div>
  </div>
</div>

관련 구성 요소

Social_Components_Component

반응형의 대화형 전자 상거래 소셜 구성 요소로, 3D 디자인 미학, 보색 구성표 및 다크 모드 지원을 제공합니다. 사용자 리뷰/추천, 별점 및 '공유' 클릭 유도문안이 있습니다.

열다

소셜 구성 요소 구성 요소

전자 상거래를 위한 종이/인쇄 재료에서 영감을 받은 간단한 레트로/빈티지 테마의 소셜 구성 요소로, 다크 모드를 지원하는 사용자 프로필 스니펫을 보여줍니다.

열다

소셜 구성 요소 구성 요소

포트폴리오용으로 설계된 소셜 미디어 구성 요소로, Tailwind CSS를 사용하여 반응형 디자인과 어두운 테마를 지원합니다. 여기에는 사용자 아바타 및 이름에 대한 자리 표시자가 포함됩니다.

열다