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

ニューモーフィックツールチップ

ポートフォリオのニューモーフィックツールチップ

プレビュー

HTMLコード 

<div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
  <div class="relative flex items-center group">
    <button class="px-6 py-3 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-800 dark:text-gray-200 font-semibold focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75 transition-all duration-300">
      Hover Me
    </button>
    <div class="absolute bottom-full mb-3 hidden group-hover:block px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark text-gray-700 dark:text-gray-300 text-sm opacity-0 group-hover:opacity-100 transform translate-y-2 group-hover:translate-y-0 transition-all duration-300">
      This is a neumorphic tooltip!
      <div class="absolute left-1/2 transform -translate-x-1/2 top-full w-0 h-0 border-t-8 border-t-gray-200 dark:border-t-gray-700 border-x-8 border-x-transparent"></div>
    </div>
  </div>
</div>

関連コンポーネント

Skeuomorphic ダッシュボードのツールチップ

ダッシュボード用の複雑なスキューモーフィックなツールチップコンポーネントで、トライアドカラースキームとダークモードをサポートするレスポンシブデザインを特徴とし、Tailwind CSS で構築され、JavaScript は使用されません。

開ける

3D_Real_Estate_Tooltip

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

開ける

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

Tailwind CSS で構築された、微妙なマイクロインタラクション アニメーション、レスポンシブ デザイン、ダーク テーマのサポートを備えた、シンプルでありながら魅力的なツールチップ コンポーネント。JavaScriptは必要ありません。

開ける