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

Interactive Components 구성 요소

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

미리 보기

HTML 코드 

<div class="bg-gray-200 dark:bg-gray-900 p-6 rounded-lg shadow-xl max-w-sm mx-auto">
  <div class="relative">
    <img class="w-full h-48 object-cover rounded-md border-4 border-gray-300 dark:border-gray-700" src="https://picsum.photos/seed/skeuomorphism/400/300" alt="Article Image">
    <div class="absolute bottom-0 right-0 bg-gradient-to-tl from-gray-400 to-gray-300 dark:from-gray-700 dark:to-gray-800 text-gray-800 dark:text-gray-200 text-xs px-2 py-1 rounded-tl-lg">Skeuomorphism</div>
  </div>
  <div class="mt-4">
    <h2 class="text-xl font-bold text-gray-800 dark:text-gray-200">Blog Post Title</h2>
    <p class="text-gray-700 dark:text-gray-300 mt-2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
  </div>
  <div class="flex justify-between items-center mt-4">
    <div class="flex items-center">
      <img class="w-8 h-8 rounded-full mr-2 border-2 border-gray-300 dark:border-gray-700" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
      <span class="text-gray-700 dark:text-gray-300 text-sm">John Doe</span>
    </div>
    <button class="bg-gradient-to-br from-blue-500 to-purple-600 text-white px-4 py-2 rounded-full shadow-md hover:shadow-lg transition duration-300 ease-in-out transform hover:-translate-y-1">Read More</button>
  </div>
  <div class="mt-4 flex justify-around text-gray-600 dark:text-gray-400 text-sm">
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 3a1 1 0 00-1.447-.894L10 6l-6.553-3.894A1 1 0 002 3v14a1 1 0 001 1h14a1 1 0 001-1V3z" clip-rule="evenodd" />
      </svg>
      <span>Save</span>
    </div>
    <div class="flex items-center">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
        <path d="M15 8a3 3 0 10-2.977-2.455l-4.78 2.49a3 3 0 00-4.633.908l-1.5-.8A3 3 0 105 12v1a1 1 0 100 2v1a1 1 0 100 2h2a1 1 0 100-2h1a1 1 0 100-2h2a1 1 0 100-2h3a3 3 0 10-3-3zm-3.154 9A3 3 0 1016 13.802v-4.036l-.078.04A2.005 2.005 0 0115 9a2 2 0 11-1.923 2.554l-.078.04V17z" />
      </svg>
      <span>Share</span>
    </div>
  </div>
</div>

관련 구성 요소

소셜 미디어 인터랙티브 컴포넌트

네온/글로우 효과가 있는 숲/녹색 색상 팔레트를 특징으로 하는 복잡한 소셜 미디어 구성 요소로, 여러 요소가 있는 인터랙티브 피드에 적합합니다. 반응형 디자인과 다크 모드 지원이 포함됩니다.

열다

Interactive Components 구성 요소

멤피스 디자인 스타일의 CRM/비즈니스 도구 구성 요소로, 단색 색 구성표, 대화형 요소 및 다크 모드 지원을 특징으로 합니다. 대담한 색상, 기하학적 모양, 장난기 넘치는 패턴으로 적당한 복잡성을 위해 설계되었습니다.

열다

Interactive Components 구성 요소

Material Design, Triadic 색 구성표, 복잡한 복잡성, 전자 상거래, 반응형 디자인 및 어두운 테마 지원을 제공하는 Interactive Components 구성 요소.

열다