CCHub Logo CCHub Tailwind Collection
구성 요소 태그 클라우드 태그 클라우드 구성 요소

태그 클라우드 구성 요소

소셜 미디어용으로 설계된 반응형 Tag Cloud 구성 요소는 다크 모드 UI 및 파스텔 색상 구성표와 함께 인터페이스합니다.

미리 보기

HTML 코드 

<div class="bg-gray-900 text-gray-200 p-6 rounded-lg shadow-lg max-w-lg mx-auto">
  <h2 class="text-2xl font-bold mb-4">Explore Tags</h2>
  <div class="flex flex-wrap">
    <span class="bg-pink-300 text-gray-900 hover:bg-pink-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#WebDevelopment</span>
    <span class="bg-blue-300 text-gray-900 hover:bg-blue-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#ReactJS</span>
    <span class="bg-green-300 text-gray-900 hover:bg-green-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#TailwindCSS</span>
    <span class="bg-yellow-300 text-gray-900 hover:bg-yellow-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#JavaScript</span>
    <span class="bg-purple-300 text-gray-900 hover:bg-purple-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#CSS</span>
    <span class="bg-red-300 text-gray-900 hover:bg-red-400 hover:text-white rounded-full px-4 py-2 m-2 transition duration-300">#Frontend</span>
  </div>
  <div class="mt-6">
    <h3 class="text-xl font-semibold mb-2">Popular Users</h3>
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <span class="ml-3 text-lg">Jane Doe</span>
    </div>
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
      <span class="ml-3 text-lg">John Smith</span>
    </div>
    <div class="flex items-center mb-4">
      <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/78.jpg" alt="User Avatar">
      <span class="ml-3 text-lg">Alice Johnson</span>
    </div>
  </div>
  <div class="mt-4">
    <h3 class="text-xl font-semibold mb-2">Featured Posts</h3>
    <img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/300" alt="Featured Post">
    <img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/301" alt="Featured Post">
    <img class="w-full rounded-lg mb-2" src="https://picsum.photos/500/302" alt="Featured Post">
  </div>
</div>

관련 구성 요소

태그 클라우드 구성 요소

마이크로 인터랙션이 있는 복잡하고 반응이 빠른 Tag Cloud 구성 요소로, 그레이스케일 색 구성표를 사용하여 대시보드용으로 설계되었습니다. 다크 모드를 지원합니다.

열다

태그 클라우드 구성 요소 - 마켓플레이스 세피아/브라운 머티리얼 디자인

마켓플레이스 플랫폼용으로 설계된 복잡하고 반응이 빠른 태그 클라우드 구성 요소로, 세피아/갈색 톤의 머티리얼 디자인 원칙을 사용합니다. 대화형 태그, 범주 필터링 및 다크 모드 지원이 특징입니다.

열다

Bauhaus 태그 클라우드 구성 요소

Bauhaus에서 영감을 받은 디자인의 복잡하고 반응이 빠른 태그 클라우드 구성 요소로, 쿨 뉴트럴을 사용하여 다크 모드를 지원하는 교육용 플랫폼에 적합합니다.

열다