CCHub Logo CCHub Tailwind Collection
구성 요소 툴팁 미니멀리스트 파스텔 툴팁

미니멀리스트 파스텔 툴팁

비즈니스 및 기업 웹 사이트용으로 설계된 미니멀하고 평평한 툴팁 구성 요소로, 파스텔 색상, 반응형 디자인 및 Tailwind CSS를 사용하는 다크 모드를 지원합니다.

미리 보기

HTML 코드 

<div class="relative inline-block">
  <button class="text-gray-700 dark:text-gray-300 bg-blue-200 dark:bg-blue-700 hover:bg-blue-300 dark:hover:bg-blue-800 px-4 py-2 rounded">Hover me</button>
  <div class="invisible absolute z-10 w-32 top-full left-1/2 transform -translate-x-1/2 mt-2 px-2 py-1 text-sm text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-800 rounded shadow-lg opacity-0 transition-all duration-300 group-hover:visible group-hover:opacity-100">
    Tooltip text
  </div>
</div>

관련 구성 요소

Neumorphic Tooltip 컴포넌트

비즈니스 웹 사이트에 적합한 정교한 Neumorphism 스타일의 툴팁 구성 요소로, 생생한 색상을 사용하고 다크 모드를 지원하도록 설계되었습니다.

열다

Minimalist_Tooltip

미니멀리스트/플랫 디자인(Minimalist/Flat Design) 툴팁 전자 상거래를 위한 구성 요소로, 반응형 디자인과 어두운 테마를 지원합니다. 보색 구성표를 사용하며 중간 정도의 복잡성을 가지고 있습니다.

열다

Skeuomorphic Tooltip 컴포넌트

스큐어모피즘과 생생한 색상으로 디자인된 반응형 툴팁 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. 여기에는 Tailwind CSS를 사용하는 어두운 테마 지원이 포함됩니다.

열다