検索コンポーネント

カテゴリ

ツールチップ

ホバー時に表示される追加情報

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

鮮やかな色、マイクロインタラクション、ダークモードのサポートを備えたレスポンシブツールチップコンポーネントで、産業用および製造用アプリケーションに適しています。ホバー/フォーカスに関する情報を表示します。

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <div class="relative group">
    <!-- Trigger Element -->
    <button
      class="peer px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg shadow-lg 
             focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 
             transition-all duration-300 ease-in-out transform hover:scale-105 
             dark:bg-blue-800 dark:hover:bg-blue-700"
      aria-describedby="tooltip-info"
    >
      <svg class="inline-block w-5 h-5 mr-2 -mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1m.707 6.364l-.707-.707M12 21v-1m-4.636-1.636l-.707.707M3 12H2m1.636-4.636l.707-.707M10 21h4a2 2 0 002-2V9a2 2 0 00-2-2h-4a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
      View Machine Status
    </button>

    <!-- Tooltip Content -->
    <div
      id="tooltip-info"
      role="tooltip"
      class="absolute bottom-full left-1/2 -translate-x-1/2 mb-3 px-4 py-2 
             bg-gradient-to-br from-green-500 to-teal-600 text-white text-sm font-medium rounded-lg shadow-xl 
             whitespace-nowrap transition-all duration-300 ease-out 
             opacity-0 invisible 
             group-hover:opacity-100 group-hover:visible group-hover:-translate-y-2 
             group-focus-within:opacity-100 group-focus-within:visible group-focus-within:-translate-y-2 
             dark:from-green-700 dark:to-teal-800 
             sm:text-base"
    >
      
      <div class="relative flex items-center">
        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.756a4.898 4.898 0 011.041 3.565A6.003 6.003 0 0124 12c0 2.21-1.229 4.143-3.053 5.176l-1.921 1.921A8.96 8.96 0 0112 24c-2.868 0-5.514-.766-7.85-2.096l-1.921-1.921A6.003 6.003 0 010 12c0-2.21 1.229-4.143 3.053-5.176l1.921-1.921A8.96 8.96 0 0112 0c2.868 0 5.514.766 7.85 2.096l1.921 1.921A6.003 6.003 0 0124 12z"></path></svg>
        Machine #1789: Operating Normally

        <!-- Tail/Arrow for the Tooltip -->
        <svg class="absolute top-full left-1/2 -ml-2 w-4 h-4 text-green-600 dark:text-green-800 rotate-180 -mt-1" fill="currentColor" viewBox="0 0 24 24"><path d="M24 22h-24l12-12z"/></svg>
      </div>

    </div>
  </div>

</div>

Paper_Rainbow_Tooltip_Component

紙/印刷物にインスパイアされたデザインと虹色のグラデーションの背景を備えたシンプルでレスポンシブなツールチップコンポーネントで、フォーラム/コミュニティプラットフォームに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900 font-sans">
  <div class="relative group max-w-xs text-center">
    <button class="relative z-10 p-3 rounded-lg shadow-md transition-all duration-300 ease-in-out
                   bg-gradient-to-r from-red-500 via-yellow-500 to-indigo-500
                   text-white font-semibold text-lg
                   hover:scale-105 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-700
                   dark:from-red-700 dark:via-yellow-700 dark:to-indigo-700">
      Hover for Info
    </button>

    <div class="absolute left-1/2 -translate-x-1/2 mt-3 p-4 pt-6
                opacity-0 invisible group-hover:opacity-100 group-hover:visible
                transition-all duration-300 ease-in-out transform group-hover:-translate-y-full
                w-64 sm:w-72 md:w-80 lg:w-96
                bg-white dark:bg-gray-800 rounded-lg shadow-xl outline outline-offset-4 outline-1 outline-gray-200 dark:outline-gray-700
                before:content-[''] before:absolute before:bottom-0 before:left-1/2 before:-ml-2 before:w-0 before:h-0
                before:border-l-[8px] before:border-r-[8px] before:border-t-[8px]
                before:border-l-transparent before:border-r-transparent before:border-t-white dark:before:border-t-gray-800
                before:-translate-y-2 group-hover:before:-translate-y-1">
      <p class="text-gray-800 dark:text-gray-200 text-sm leading-relaxed mb-1
                font-serif italic tracking-wide group-hover:animate-fade-in">
        "The only source of knowledge is experience."
      </p>
      <p class="text-gray-600 dark:text-gray-400 text-xs font-mono subpixel-antialiased">
        - Albert Einstein
      </p>

      <!-- Tiny paper clip detail -->
      <div class="absolute top-1 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full
                  bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-700
                  shadow-inner blur-[0.5px]
                  border border-gray-400 dark:border-gray-500"></div>
    </div>
  </div>
</div>

<!-- To make the 'fade-in' work (optional, but good for subtle animation) -->
<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .group-hover\:animate-fade-in {
    animation: fade-in 0.3s ease-out forwards;
    animation-delay: 0.1s; /* Slight delay after tooltip is visible */
  }
</style>

3D_Real_Estate_Tooltip

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

開けるプレビュー

                <div class="p-4 sm:p-8 bg-gradient-to-br from-orange-50 to-red-50 dark:from-gray-900 dark:to-gray-800 min-h-screen flex items-center justify-center font-sans">

  <div class="relative group w-full max-w-sm mx-auto perspective-1000">
    <!-- Tooltip Trigger (Simulated 3D Card) -->
    <div class="relative bg-white dark:bg-gray-800 rounded-xl shadow-xl overflow-hidden
                transform-gpu transition-all duration-300 ease-in-out
                group-hover:rotate-x-3 group-hover:rotate-y-3 
                group-hover:scale-105 group-hover:-translate-y-2
                group-hover:shadow-3xl-lg 
                border border-solid border-orange-200 dark:border-gray-700
                active:scale-100 active:rotate-0 active:translate-y-0
                cursor-pointer
                p-4 sm:p-6">

      <div class="flex items-center space-x-4 mb-4">
        <img src="https://picsum.photos/60/60?random=1" alt="Property Thumbnail" class="w-16 h-16 rounded-lg object-cover shadow-md">
        <div>
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white capitalize">Luxury Villa</h3>
          <p class="text-sm text-gray-600 dark:text-gray-400">Miami Beach, FL</p>
        </div>
      </div>
      <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 line-clamp-2">
        Stunning beachfront property with panoramic ocean views and private pool. 
        Ideal for luxurious living or investment.
      </p>

      <div class="flex justify-between items-center text-sm font-medium">
        <span class="text-orange-600 dark:text-orange-400">$2.5M</span>
        <button class="px-4 py-2 bg-orange-500 text-white rounded-lg shadow-md 
                       hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-50
                       dark:bg-orange-700 dark:hover:bg-orange-600">View Details</button>
      </div>


      <!-- Floating Action Button (Simulated) -->
      <div class="absolute -bottom-4 -right-4 w-12 h-12 flex items-center justify-center 
                  bg-gradient-to-br from-orange-400 to-red-500 text-white 
                  rounded-full shadow-lg transform-gpu transition-all duration-300 ease-in-out
                  group-hover:scale-125 group-hover:rotate-12 group-hover:shadow-xl">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" />
        </svg>
      </div>

    </div>

    <!-- Tooltip Content -->
    <div class="opacity-0 invisible group-hover:opacity-100 group-hover:visible 
                absolute bottom-[calc(100%+15px)] left-1/2 -translate-x-1/2 
                transform-gpu transition-all duration-300 ease-in-out 
                group-hover:-translate-y-0 group-hover:scale-100 group-hover:translate-z-50
                select-none
                w-[calc(100%+40px)] sm:w-[calc(100%+60px)] p-4 sm:p-5
                bg-gradient-to-br from-orange-400 to-red-500 dark:from-orange-700 dark:to-red-800 
                rounded-xl shadow-2xl z-10 
                border-4 border-solid border-white/50 dark:border-gray-700/50 
                before:content-[''] before:absolute before:bottom-[-8px] before:left-1/2 
                before:-translate-x-1/2 before:w-0 before:h-0 
                before:border-l-[12px] before:border-l-transparent 
                before:border-r-[12px] before:border-r-transparent 
                before:border-t-[12px] before:border-t-orange-400 dark:before:border-t-orange-700">

      <h4 class="text-white text-lg font-bold mb-2 flex items-center justify-between">
        Property Highlights
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2-2m2 2l-2 2M15 9V4a2 2 0 00-2-2H6a2 2 0 00-2 2v7.586a1 1 0 01-.293.707l-2.414 2.414A1 1 0 003 16h.01L5 16h2a1 1 0 011 1v4a1 1 0 01-1 1H3a1 1 0 01-1-1v-4a1 1 0 00-.293-.707l-2.414-2.414A1 1 0 000 13V6a2 2 0 012-2h10a2 2 0 012 2v1" />
        </svg>
      </h4>
      <ul class="text-white/90 text-sm space-y-1 mb-3">
        <li class="flex items-center">
          <svg class="w-4 h-4 mr-1 text-white flex-shrink-0 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          5 Beds, 6 Baths
        </li>
        <li class="flex items-center">
          <svg class="w-4 h-4 mr-1 text-white flex-shrink-0 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          5,200 sqft
        </li>
        <li class="flex items-center">
          <svg class="w-4 h-4 mr-1 text-white flex-shrink-0 animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          Oceanfront Lot
        </li>
      </ul>

      <div class="flex items-center text-sm mb-2 opacity-90">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Agent Avatar" class="w-8 h-8 rounded-full border-2 border-white/70 shadow-md mr-2">
        <span class="font-medium text-white">Contact Agent:</span>
        <a href="#" class="ml-2 text-white underline hover:opacity-80 transition-opacity">John Doe</a>
      </div>

      <div class="text-right">
        <button class="px-3 py-1 bg-white bg-opacity-20 text-white rounded-md text-xs
                       hover:bg-opacity-30 transition-colors focus:outline-none focus:ring-1 focus:ring-white focus:ring-opacity-70">
          See More Images
        </button>
      </div>

    </div>
  </div>
</div>

<style>
  /* Adding custom perspective for the 3D effect without needing a parent container */
  .perspective-1000 {
    perspective: 1000px;
  }

  /* Custom shadow for a more pronounced 3D effect on hover */
  .shadow-3xl-lg {
    box-shadow: 0 25px 50px -12px rgba(249, 115, 22, 0.4), 0 10px 10px -5px rgba(249, 115, 22, 0.2), 0 0 0 1px rgba(249, 115, 22, 0.1);
  }
  .dark .shadow-3xl-lg {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 10px 10px -5px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3);
  }

  /* Translate-z for 3D effect, works with perspective */
  .group-hover\:translate-z-50 {
    transform: translateZ(50px);
  }
  /* Ensures the pseudo-element pointer also has a border */
  .before\:border-t-orange-400 {
    border-top-color: var(--tw-gradient-from);
  }
  .dark .before\:border-t-orange-700 {
    border-top-color: var(--tw-gradient-from);
  }
</style>

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

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

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-sans">

  <div class="relative group">
    <button class="relative z-10 px-6 py-3 rounded-lg text-lg font-medium 
                   bg-blue-600 hover:bg-blue-700 text-white 
                   focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-75
                   transition duration-300 ease-in-out
                   dark:bg-blue-700 dark:hover:bg-blue-800 dark:focus:ring-blue-600">
      View Reservation Details
    </button>

    <!-- Tooltip Container -->
    <div class="absolute bottom-full left-1/2 -translate-x-1/2 mb-4 
                  w-80 md:w-96 lg:w-[420px] 
                  p-0 rounded-xl 
                  shadow-xl 
                  transform scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 
                  group-focus-within:scale-100 group-focus-within:opacity-100 
                  transition-all duration-300 ease-in-out 
                  origin-bottom 
                  pointer-events-none group-hover:pointer-events-auto group-focus-within:pointer-events-auto
                  overflow-hidden 
                  bg-white dark:bg-gray-800 
                  border border-gray-200 dark:border-gray-700">

      <!-- Material Design Header -->
      <div class="relative px-5 py-4 bg-gradient-to-r from-blue-600 to-indigo-600 dark:from-blue-700 dark:to-indigo-700 
                  text-white rounded-t-xl overflow-hidden">
        <div class="absolute inset-0 bg-pattern-dots opacity-10"></div>
        <h3 class="text-xl font-bold mb-1">Reservation #A1B2C3D4</h3>
        <p class="text-sm opacity-90">Your upcoming booking details</p>

        <!-- Avatar or Icon -->
        <div class="absolute top-4 right-5">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-white/50 shadow-md">
        </div>
      </div>

      <!-- Tooltip Content -->
      <div class="p-5 text-gray-700 dark:text-gray-300 text-sm">

        <div class="grid grid-cols-2 gap-y-3 gap-x-4 mb-4">
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Service</p>
            <p class="text-base">Dental Check-up</p>
          </div>
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Provider</p>
            <p class="text-base">Dr. Emily White</p>
          </div>
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Date</p>
            <p class="text-base">Oct 26, 2024</p>
          </div>
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Time</p>
            <p class="text-base">10:15 AM - 11:00 AM</p>
          </div>
          <div class="col-span-2">
            <p class="font-semibold text-gray-500 dark:text-gray-400">Location</p>
            <p class="text-base">123 Health Dr, C<ctrl61>linic City</p>
          </div>
        </div>

        <hr class="my-4 border-gray-200 dark:border-gray-700">

        <div class="flex justify-between items-center mb-4">
          <div>
            <p class="font-semibold text-gray-500 dark:text-gray-400">Status</p>
            <span class="px-3 py-1 rounded-full text-xs font-semibold bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-100">
              Confirmed
            </span>
          </div>
          <div class="text-right">
            <p class="font-semibold text-gray-500 dark:text-gray-400">Attendees</p>
            <div class="flex -space-x-2 justify-end mt-1">
              <img class="w-7 h-7 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Attendee 1">
              <img class="w-7 h-7 rounded-full border-2 border-white dark:border-gray-800" src="https://randomuser.me/api/portraits/men/50.jpg" alt="Attendee 2">
              <div class="w-7 h-7 rounded-full border-2 border-white dark:border-gray-800 bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-xs text-gray-600 dark:text-gray-300">+1</div>
            </div>
          </div>
        </div>

        <!-- Call to Action Buttons -->
        <div class="pt-4 border-t border-gray-100 dark:border-gray-700 flex justify-end space-x-2">
          <button class="px-4 py-2 rounded-lg text-sm font-medium 
                         text-gray-600 hover:text-gray-900 hover:bg-gray-100 
                         focus:outline-none focus:ring-2 focus:ring-gray-300 
                         dark:text-gray-300 dark:hover:text-gray-100 dark:hover:bg-gray-700 dark:focus:ring-gray-600">
            Reschedule
          </button>
          <button class="px-4 py-2 rounded-lg text-sm font-medium 
                         bg-blue-500 hover:bg-blue-600 text-white 
                         focus:outline-none focus:ring-2 focus:ring-blue-400 
                         dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-500">
            Manage Booking
          </button>
        </div>
      </div>

      <!-- Tail for the tooltip -->
      <div class="absolute top-full left-1/2 -ml-2 w-0 h-0 border-x-8 border-x-transparent border-t-8 border-t-white 
                  dark:border-t-gray-800 opacity-0 group-hover:opacity-100 group-focus-within:opacity-100 transition-opacity duration-300"></div>

    </div>
  </div>
</div>

<!-- Custom pattern for header (can be placed in a style block or external CSS if allowed) -->
<style>
  .bg-pattern-dots {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 8px 8px;
  }
</style>

Monospace_Developer_Tooltip_Component_Healthcare

温かみのある夕焼けの色調のシンプルなモノスペースにインスパイアされたツールチップコンポーネントで、ヘルスケアアプリケーション向けに設計されています。レスポンシブデザインとダークモードのサポートが特徴です。

開けるプレビュー

                <div class="relative flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-[200px] font-mono">
  <!-- Tooltip Container -->
  <div class="group relative inline-block">
    <!-- Trigger Element (e.g., an icon or text) -->
    <p class="cursor-pointer text-orange-600 dark:text-orange-400 text-sm md:text-base p-2 border border-orange-400 dark:border-orange-600 rounded-md shadow-sm transition-all duration-300 ease-in-out hover:border-orange-500 hover:shadow-md">
      <svg class="inline-block mr-2 w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
      </svg>
      Info: Patient ID
    </p>

    <!-- Tooltip Content -->
    <div class="opacity-0 w-64 md:w-80 bg-gradient-to-br from-orange-400 to-red-500 dark:from-red-600 dark:to-yellow-700 text-white text-xs md:text-sm rounded py-2 px-3 absolute z-10 bottom-full left-1/2 -translate-x-1/2 mb-2 pointer-events-none transition-opacity duration-300 group-hover:opacity-100 shadow-lg border border-orange-300 dark:border-yellow-600 overflow-hidden break-words">
      <p class="mb-1 font-bold text-yellow-100 dark:text-orange-200">Diagnosis Code Explained:</p>
      <p class="text-yellow-50 dark:text-orange-50">ICD-10-CM code Z00.00 is for 'General adult medical examination without abnormal findings'.</p>
      <p class="text-yellow-50 dark:text-orange-50 mt-1">Applicable for routine health check-ups.</p>

      <!-- Tail for the tooltip -->
      <svg class="absolute text-orange-400 dark:text-red-600 h-2 w-full left-0 bottom-[-8px]"
           viewBox="0 0 255 125" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
        <path d="M0 125L127.5 0L255 125H0Z"/>
      </svg>
    </div>
  </div>
</div>

Bauhaus_Autumn_Tooltip_Component

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

開けるプレビュー

                <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>