CCHub Logo CCHub Tailwind Collection
コンポーネント ツールチップ Bauhaus_Autumn_Tooltip_Component

Bauhaus_Autumn_Tooltip_Component

バウハウスにインスパイアされた、秋の配色で、ファッションや美容ブランド向けにデザインされたツールチップコンポーネントです。機能的な幾何学的デザイン、応答性、およびダークモードのサポートを特長としています。

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-orange-50 dark:bg-gray-900 p-4 font-sans">
  <div class="relative group max-w-sm">
    <button class="px-6 py-3 bg-red-800 text-white font-bold uppercase tracking-wider text-sm rounded-none shadow-lg transform transition duration-300 ease-in-out hover:scale-105 focus:outline-none focus:ring-2 focus:ring-red-600 focus:ring-opacity-75 dark:bg-red-900 dark:hover:bg-red-800">
      Hover for Details
    </button>

    <div class="absolute left-1/2 -translate-x-1/2 bottom-full mb-4 w-64 p-4 
                bg-yellow-800 dark:bg-gray-800 
                text-white dark:text-gray-200 
                border-4 border-amber-900 dark:border-gray-700 
                opacity-0 invisible group-hover:opacity-100 group-hover:visible 
                transition-opacity duration-300 ease-in-out 
                group-hover:translate-y-0 transform translate-y-4
                shadow-xl z-10 
                origin-bottom 
                before:content-[''] before:absolute before:left-1/2 before:-translate-x-1/2 before:top-full before:border-l-[10px] before:border-l-transparent before:border-r-[10px] before:border-r-transparent before:border-t-[10px] before:border-t-yellow-800 dark:before:border-t-gray-800">
      <h3 class="text-lg font-extrabold mb-2 uppercase tracking-wide text-amber-100 dark:text-gray-100">Luxury Serum X</h3>
      <p class="text-sm leading-relaxed mb-3 text-amber-200 dark:text-gray-300">
        Unlock radiant skin with our concentrated formula. Infused with natural extracts.
      </p>
      <div class="flex items-center space-x-2 mb-3">
        <img src="https://randomuser.me/api/portraits/women/67.jpg" alt="Model" class="w-8 h-8 rounded-none border border-amber-600 dark:border-gray-600 object-cover">
        <span class="text-xs font-semibold text-amber-300 dark:text-gray-400">A favorite of beauty influencers!</span>
      </div>
      <a href="#" class="inline-block px-4 py-2 bg-amber-900 text-amber-100 font-bold text-xs uppercase tracking-wider hover:bg-amber-700 dark:bg-gray-700 dark:hover:bg-gray-600 transition-colors duration-200">
        Shop Now
      </a>
    </div>
  </div>
</div>

関連コンポーネント

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

応答性の高いダークをテーマにしたツールチップコンポーネントで、Triadic カラースキームの一部で、ポートフォリオに適しています。Tailwind CSSで構築され、シンプルでミニマルな美学を実現しています。

開ける

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

スキューモーフィズムと鮮やかな色で設計された応答性の高いツールチップコンポーネントで、ブログやコンテンツの消費に適しています。これには、Tailwind CSSを使用したダークテーマのサポートが含まれています。

開ける

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

Tailwind CSS を使用したダッシュボード用の、複雑でレスポンシブなダークテーマ対応の Skeuomorphic-Vibrant Tooltip コンポーネント。JavaScript は必要なく、Tailwind クラスを含む HTML のみが必要です。ダークモードの場合は、スタイル設定にTailwindのdark:プレフィックスを使用します。画像はpicsum.photosと randomuser.me からのものです。

開ける