CCHub Logo CCHub Tailwind Collection
コンポーネント ツールチップ スキューモーフィック ツールチップ コンポーネント

スキューモーフィック ツールチップ コンポーネント

スキューモーフィック スタイルとアース トーンで設計された複雑なツールチップ コンポーネントで、ダーク モードをサポートする e コマース アプリケーションに適しています。

プレビュー

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>

関連コンポーネント

3D_Real_Estate_Tooltip

3D デザイン要素と温かみのある夕焼けの配色を備えた、適度に複雑で応答性の高いツールチップ コンポーネントで、不動産物件のリスティングに適しています。ダークモードのサポートが含まれています。

開ける

マテリアルデザインツールチップコンポーネント - 予約/予約

マテリアル デザインにインスパイアされた、複雑でレスポンシブな予約システム用のツールチップ コンポーネントで、色落ち/彩度の低下、深度エフェクト、ダーク モードのサポートが特徴です。ホバー/フォーカス時に詳細な情報を提供します。

開ける

ツールチップコンポーネント

マイクロインタラクション、トライアドカラースキームで設計されたレスポンシブツールチップコンポーネントで、プロフェッショナルなビジネス/企業Webサイトのダークモードをサポートします。これには、魅力的なアニメーション、インタラクティブな要素を備えた豊富なインターフェイスが含まれ、スタイリングにはTailwind CSSを使用します。

開ける