CCHub Logo CCHub Tailwind Collection
구성 요소 인터랙티브 컴포넌트 Interactive Components 구성 요소

Interactive Components 구성 요소

파스텔 색 구성표, 적당한 복잡성, 반응형 디자인 및 다크 모드 지원을 갖춘 소셜 미디어 인터랙티브 구성 요소로, Tailwind CSS로 구축되고 머티리얼 디자인 원칙을 따릅니다. picsum.photos의 더미 이미지와 randomuser.me 의 아바타를 사용합니다.

미리 보기

HTML 코드 

<div class="container mx-auto p-4 bg-white dark:bg-gray-800 rounded-lg shadow-lg">
  <div class="flex items-center mb-4">
    <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
    <div class="text-gray-900 dark:text-white font-bold text-lg">John Doe</div>
  </div>
  <img class="w-full h-64 object-cover mb-4 rounded-md" src="https://picsum.photos/seed/picsum/800/400" alt="Post Image">
  <p class="text-gray-700 dark:text-gray-300 mb-4">This is a sample social media post with a pastel color scheme and Material Design styling.</p>
  <div class="flex justify-between items-center text-gray-600 dark:text-gray-400 text-sm">
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.644 0-1.25-.302-1.63-0.8L10 14V10m4 0H5a2 2 0 00-2 2v6a2 2 0 002 2h10l2.293 2.293c.032.032.07.05.107.05h.1l.1-.147l.145-.194-.013-.014L17 21.5l.354-.354.353.354z"></path></svg>
      <span>120 Likes</span>
    </div>
    <div class="flex items-center">
      <svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.913 9.913 0 01-3.981-.815F7.001 16.88C18.745 10.65 7.544 10.5 21 12z"></path></svg>
      <span>35 Comments</span>
    </div>
  </div>
  <div class="mt-4 flex items-center">
    <input type="text" class="w-full px-3 py-2 rounded-md border border-gray-300 dark:border-gray-700 dark:bg-gray-900 dark:text-white focus:outline-none focus:ring-1 focus:ring-blue-500" placeholder="Add a comment...">
    <button class="ml-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600">Post</button>
  </div>
</div>

관련 구성 요소

Interactive Components 구성 요소

직업 및 경력 플랫폼을 위해 설계된 대화형 구성 요소로, 유기적이고 자연에서 영감을 받은 흐르는 선과 생생한 사탕/달콤한 색 구성표가 특징입니다. 적용 버튼과 스킬 태그가 있는 작업 카드가 포함되어 있어 응답성과 다크 모드를 지원합니다.

열다

Interactive Components 구성 요소

Skeuomorphism 디자인, 아날로그 색 구성표 및 블로그/콘텐츠 목적을 위한 중간 수준의 복잡성을 가진 대화형 구성 요소 구성 요소. 어두운 테마를 지원하는 반응형 디자인. 자바스크립트 코드가 없습니다.

열다

Interactive Components 구성 요소

브루탈리즘(Brutalism) 스타일로 디자인된 인터랙티브 컴포넌트로, 어두운 테마를 지원하는 작품이나 제품을 선보이는 데 적합합니다.

열다