CCHub Logo CCHub Tailwind Collection
구성 요소 툴팁 Skeuomorphic Tooltip 컴포넌트

Skeuomorphic Tooltip 컴포넌트

스큐어모픽 스타일과 어스 톤으로 설계된 복잡한 툴팁 구성 요소로, 다크 모드를 지원하는 전자 상거래 애플리케이션에 적합합니다.

미리 보기

HTML 코드 

<div class="relative group">
    <img src="https://picsum.photos/200/200?random=1" alt="Product Image" class="w-40 h-40 rounded-lg shadow-lg">
    <div class="absolute z-10 hidden group-hover:flex flex-col items-center p-4 bg-gray-800 bg-opacity-80 border border-gray-700 rounded-lg shadow-lg transition-all duration-300 ease-in-out dark:bg-gray-900 dark:border-gray-600">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-white mb-2">
        <h3 class="text-lg text-earthgreen-200">Product Name</h3>
        <p class="text-sm text-earthbrown-200">Brief description of the product goes here. It mimics wood and soil textures for an earthy feel.</p>
        <div class="flex space-x-2 mt-2">
            <span class="px-3 py-1 text-xs text-white bg-earthbrown-300 rounded-full">Add to Cart</span>
            <span class="px-3 py-1 text-xs text-white bg-earthbrown-600 rounded-full">View More</span>
        </div>
    </div>
</div>

관련 구성 요소

미니멀리스트 툴팁

블로그/콘텐츠 웹사이트를 위한 미니멀하고 평평한 디자인 툴팁 구성 요소로, 단색 색 구성표와 간단한 레이아웃을 제공합니다. 반응형이며 Tailwind CSS를 사용하여 다크 모드를 지원합니다.

열다

Tooltip 구성 요소

게임 인터페이스를 위한 미니멀하고 평면적인 디자인의 툴팁 구성 요소로, 블랙, 화이트 및 밝은 액센트 컬러를 특징으로 하며, 복잡한 인터랙티브 요소와 다크 모드 지원을 포함한 완전한 응답성을 갖추고 있습니다.

열다

Material Design 툴팁 구성 요소 - 예약/예약

예약/예약 시스템을 위한 복잡하고 반응이 빠른 Material Design에서 영감을 받은 툴팁 구성 요소로, 음소거/채도가 낮은 색상, 심도 효과 및 다크 모드 지원을 제공합니다. 호버/포커스에 대한 자세한 정보를 제공합니다.

열다