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>

관련 구성 요소

머티리얼 디자인 카드

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

열다

3D 카드 구성 요소

3D 디자인 스타일, 생생한 색상, 대시보드에 적합한 여러 대화형 요소가 있는 반응형 카드 구성 요소입니다. Tailwind의 다크 프리픽스를 사용하여 다크 모드를 지원합니다.

열다

다크 모드 소셜 카드

어스 톤의 다크 모드 스타일링된 반응형 카드 구성 요소로, 소셜 미디어 인터페이스용으로 설계되었습니다.

열다