CCHub Logo CCHub Tailwind Collection
구성 요소 카드 소셜 미디어 카드 구성 요소

소셜 미디어 카드 구성 요소

소셜 미디어 인터페이스에 적합한 미니멀하고 생동감 넘치는 카드 구성 요소로, 이미지, 좋아요, 댓글 및 공유 옵션이 포함된 사용자 게시물을 표시합니다. 완벽하게 반응하며 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">
  <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 max-w-7xl mx-auto">

    <!-- Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-fuchsia-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Jane Doe</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
          </svg>
        </button>
      </div>
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1018/600/400" alt="Post Image">
      <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Exploring the vibrant streets of Lisbon! So much beauty and history around every corner. #Travel #Lisbon #Portugal</p>
        <div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
          <div class="flex items-center space-x-4">
            <a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span>120 Likes</span>
            </a>
            <a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
              <span>25 Comments</span>
            </a>
          </div>
          <a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-emerald-500" src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">John Smith</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">4 hours ago</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
          </svg>
        </button>
      </div>
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1025/600/400" alt="Post Image">
      <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Morning run views! Nothing beats a cool breeze and a clear sky to start the day. #Fitness #MorningRun #Nature</p>
        <div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
          <div class="flex items-center space-x-4">
            <a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span>85 Likes</span>
            </a>
            <a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
              <span>10 Comments</span>
            </a>
          </div>
          <a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-orange-500" src="https://randomuser.me/api/portraits/women/3.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Emily White</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">1 day ago</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
          </svg>
        </button>
      </div>
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1043/600/400" alt="Post Image">
      <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Such a creative afternoon in the studio! Love bringing new ideas to life. #Art #Creative #StudioLife</p>
        <div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
          <div class="flex items-center space-x-4">
            <a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span>150 Likes</span>
            </a>
            <a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
              <span>30 Comments</span>
            </a>
          </div>
          <a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Card 4 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden transition-all duration-300 ease-in-out hover:shadow-lg dark:hover:shadow-xl">
      <div class="p-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-700">
        <div class="flex items-center">
          <img class="w-10 h-10 rounded-full mr-3 border-2 border-violet-500" src="https://randomuser.me/api/portraits/men/4.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-lg text-gray-900 dark:text-white">Michael Brown</p>
            <p class="text-sm text-gray-500 dark:text-gray-400">5 days ago</p>
          </div>
        </div>
        <button class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 focus:outline-none">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" />
          </svg>
        </button>
      </div>
      <img class="w-full h-48 object-cover" src="https://picsum.photos/id/1053/600/400" alt="Post Image">
      <div class="p-4">
        <p class="text-gray-800 dark:text-gray-200 mb-3 text-base">Coffee and codes, my favorite combination to kick off the week! #DeveloperLife #CoffeeLover #Coding</p>
        <div class="flex items-center justify-between text-gray-500 dark:text-gray-400 mb-4">
          <div class="flex items-center space-x-4">
            <a href="#" class="flex items-center hover:text-pink-600 dark:hover:text-pink-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z" />
              </svg>
              <span>200 Likes</span>
            </a>
            <a href="#" class="flex items-center hover:text-blue-600 dark:hover:text-blue-400 transition-colors duration-200">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                <path stroke-linecap="round" stroke-linejoin="round" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
              </svg>
              <span>45 Comments</span>
            </a>
          </div>
          <a href="#" class="flex items-center hover:text-green-600 dark:hover:text-green-400 transition-colors duration-200">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
              <path stroke-linecap="round" stroke-linejoin="round" d="M8.684 13.342C8.882 13.07 9.283 13 9.683 13h4.634c.4 0 .702.07.9.342M17 14v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1m-6 9v-3h-2m.02-6l.075-.98.74-1.243A3 3 0 0117.25 4H20a2 2 0 012 2v6a2 2 0 01-2 2h-3L13 19l-1-7h-5z" />
            </svg>
            <span>Share</span>
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

관련 구성 요소

Neumorphic Cards 컴포넌트

어두운 테마를 지원하는 Neumorphism 스타일로 디자인된 반응형 카드 구성 요소로, 미묘한 그림자와 유연한 레이아웃을 특징으로 합니다.

열다

카드 구성 요소

다크 모드용으로 설계된 복잡한 카드 구성 요소로, 트라이어딕 색 구성표로 블로그 및 콘텐츠 소비에 적합합니다.

열다

머티리얼 디자인 카드

Tailwind CSS를 사용하여 반응형 동작과 다크 모드를 지원하는 머티리얼 디자인 스타일의 카드 구성 요소입니다. 고도 및 파급 효과, 시각적 단서가 특징입니다.

열다