検索コンポーネント

すべてのコンポーネント

利用可能なすべてのTailwind CSSコンポーネントを参照する

セッションタイムアウトアラートコンポーネント - Neumorphic Rainbow

グラデーションの虹色の配色を持つ出会い系/ソーシャルアプリ用のNeumorphic Session Timeout Alertコンポーネント。レスポンシブでダークモードをサポートしているため、ユーザーにセッションの延長またはログアウトを求めます。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-red-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 p-4 font-sans">
  <div class="relative w-full max-w-sm mx-auto p-6 rounded-3xl shadow-xl neumorphic-rainbow-light dark:neumorphic-rainbow-dark md:max-w-md lg:max-w-lg">
    <div class="flex justify-center mb-6">
      <div class="w-20 h-20 rounded-full flex items-center justify-center neumorphic-icon-light dark:neumorphic-icon-dark">
        <svg class="w-10 h-10 text-red-500 transition-colors duration-300 dark:text-red-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.542 2.768-1.542 3.533 0l3.057 6.164a4.5 4.5 0 01-.815 4.795L10 18.067l-5.025-4.009a4.5 4.5 0 01-.815-4.795l3.057-6.164z" clip-rule="evenodd"></path>
        </svg>
      </div>
    </div>

    <h2 class="text-center text-3xl font-extrabold text-gray-800 mb-4 bg-clip-text text-transparent neumorphic-rainbow-text-light dark:neumorphic-rainbow-text-dark transition-colors duration-300">
      Session Timeout
    </h2>
    <p class="text-center text-lg text-gray-700 mb-8 dark:text-gray-300 transition-colors duration-300">
      Your session is about to expire due to inactivity.
    </p>

    <div class="flex justify-around space-x-4">
      <button class="flex-1 py-3 px-4 rounded-xl text-center text-lg font-semibold neumorphic-button-light dark:neumorphic-button-dark neumorphic-text-button-light dark:neumorphic-text-button-dark transition-all duration-300 hover:scale-105 active:scale-95 leading-none">
        <span class="block">Extend Session</span>
        <span class="block text-sm opacity-75"> (5:00)</span>
      </button>
      <button class="flex-1 py-3 px-4 rounded-xl text-center text-lg font-semibold neumorphic-button-light dark:neumorphic-button-dark neumorphic-text-button-light dark:neumorphic-text-button-dark transition-all duration-300 hover:scale-105 active:scale-95 leading-none">
        Log Out
      </button>
    </div>

    <p class="text-center text-sm text-gray-500 mt-8 dark:text-gray-400 transition-colors duration-300">
      For your security, we automatically log you out after inactivity.
    </p>
  </div>

  <style>
    .neumorphic-rainbow-light {
      background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
      box-shadow: 10px 10px 20px #c7c7c7, -10px -10px 20px #ffffff, inset 0 0 0 #f0f0f0, inset 0 0 0 #e0e0e0;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .dark .neumorphic-rainbow-dark {
      background: linear-gradient(145deg, #2b2b2b, #202020);
      box-shadow: 10px 10px 20px #1a1a1a, -10px -10px 20px #313131, inset 0 0 0 #2b2b2b, inset 0 0 0 #202020;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .neumorphic-icon-light {
      background: linear-gradient(145deg, #e0e0e0, #f0f0f0);
      box-shadow: inset 5px 5px 10px #c7c7c7, inset -5px -5px 10px #ffffff;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }
    .dark .neumorphic-icon-dark {
      background: linear-gradient(145deg, #202020, #2b2b2b);
      box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #313131;
      transition: background 0.3s ease, box-shadow 0.3s ease;
    }

    .neumorphic-button-light {
      background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
      box-shadow: 7px 7px 14px #c2c2c2, -7px -7px 14px #ffffff;
    }
    .neumorphic-button-light:hover {
      box-shadow: 5px 5px 10px #c2c2c2, -5px -5px 10px #ffffff;
    }
    .neumorphic-button-light:active {
      box-shadow: inset 5px 5px 10px #c2c2c2, inset -5px -5px 10px #ffffff;
    }

    .dark .neumorphic-button-dark {
      background: linear-gradient(145deg, #2b2b2b, #202020);
      box-shadow: 7px 7px 14px #1a1a1a, -7px -7px 14px #313131;
    }
    .dark .neumorphic-button-dark:hover {
      box-shadow: 5px 5px 10px #1a1a1a, -5px -5px 10px #313131;
    }
    .dark .neumorphic-button-dark:active {
      box-shadow: inset 5px 5px 10px #1a1a1a, inset -5px -5px 10px #313131;
    }

    .neumorphic-rainbow-text-light {
      background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7);
    }
    .dark .neumorphic-rainbow-text-dark {
      background-image: linear-gradient(to right, #fee2e2, #fcd34d, #fef08a, #dcfce7, #bfdbfe, #c7d2fe, #e9d5ff);
    }

    .neumorphic-text-button-light {
      background-clip: text;
      color: transparent;
      background-image: linear-gradient(to right, #dc2626, #ea580c, #ca8a04, #16a34a, #2563eb, #4f46e5, #9333ea);
    }
    .dark .neumorphic-text-button-dark {
      background-clip: text;
      color: transparent;
      background-image: linear-gradient(to right, #ef4444, #f97316, #eab308, #22c55e, #3b82f6, #6366f1, #a855f7);
    }
  </style>
</div>

Eコマースコンポーネントコンポーネント

スイス/インターナショナルタイポグラフィスタイルのシンプルでミニマリストなブッキング/予約コンポーネントで、ブラックとホワイトの配色に明るいアクセントが特徴的です。完全にレスポンシブで、ダークモードをサポートしています。

開けるプレビュー

                <div class="font-sans antialiased text-gray-900 bg-white dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center p-4">
  <div class="w-full max-w-sm bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-gray-100 dark:border-gray-700">
    <div class="p-6">
      <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-gray-100 tracking-tight leading-tight">Book Your Spot</h2>
      <p class="text-gray-600 dark:text-gray-400 text-sm mb-6">Select your preferred date and time for a seamless experience.</p>

      <div class="mb-6">
        <label for="date-select" class="block text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2 tracking-wide">Date</label>
        <select id="date-select" class="block w-full p-2 border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent transition-colors duration-200">
          <option value="">Select a Date</option>
          <option value="2023-10-26">Thursday, October 26</option>
          <option value="2023-10-27">Friday, October 27</option>
          <option value="2023-10-28">Saturday, October 28</option>
          <option value="2023-10-29">Sunday, October 29</option>
        </select>
      </div>

      <div class="mb-6">
        <label for="time-select" class="block text-xs uppercase font-semibold text-gray-500 dark:text-gray-400 mb-2 tracking-wide">Time</label>
        <div class="grid grid-cols-3 gap-2">
          <button class="relative px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            9:00 AM
            <span class="absolute top-0 right-0 -mr-1 -mt-1 w-3 h-3 bg-red-500 rounded-full flex items-center justify-center text-white text-xs font-bold">5</span>
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            10:00 AM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/40 border-blue-500 dark:border-blue-400 font-semibold focus:outline-none focus:ring-2 focus:ring-blue-500 transform scale-105 shadow-md transition-all duration-200">
            11:00 AM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            1:00 PM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 cursor-not-allowed" disabled>
            2:00 PM
          </button>
          <button class="px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-200">
            3:00 PM
          </button>
        </div>
      </div>

      <button class="w-full py-3 bg-blue-600 dark:bg-blue-500 text-white font-semibold rounded-md hover:bg-blue-700 dark:hover:bg-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-500/50 dark:focus:ring-blue-400/50 transition-colors duration-200 text-base uppercase tracking-wider">
        Confirm Booking
      </button>

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

グラデーショングリッド予約レイアウト

予約/予約システム用の複雑で応答性の高いグリッドレイアウトコンポーネントで、トライアドカラーグラデーション、スムーズなトランジション、ダークモードのサポートを特長としています。複数のインタラクティブな要素で設計されています。

開けるプレビュー

                <div class="min-h-screen bg-gray-50 text-gray-900 dark:bg-gray-900 dark:text-gray-100 transition-colors duration-500 p-4 sm:p-6 md:p-8 lg:p-12 font-sans">

  <!-- Header Section -->
  <header class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-red-500 via-yellow-400 to-emerald-500 dark:from-red-400 dark:via-yellow-300 dark:to-emerald-400 pb-2">
      Book Your Next Adventure
    </h1>
    <p class="mt-2 text-lg sm:text-xl text-gray-600 dark:text-gray-300">Seamless reservations, unforgettable experiences.</p>
  </header>

  <!-- Main Content Grid -->
  <main class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 sm:gap-8">

    <!-- Left Sidebar / Navigation (Col 1 md, Col 1-2 lg) -->
    <aside class="md:col-span-1 lg:col-span-2 p-6 rounded-3xl shadow-xl transform transition-all duration-300 border border-transparent hover:border-gray-200 dark:hover:border-gray-700 bg-gradient-to-br from-indigo-50 dark:from-gray-800 to-white dark:to-gray-900 group relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-br from-indigo-100 via-purple-100 to-green-100 dark:from-indigo-950 dark:via-purple-950 dark:to-green-950 opacity-20 group-hover:opacity-40 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
      <div class="relative z-10">
        <h2 class="text-3xl font-bold mb-6 bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-purple-500 dark:from-pink-400 dark:to-purple-400">
          Categories
        </h2>
        <ul class="space-y-4">
          <li>
            <a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
              <svg class="w-7 h-7 text-purple-600 dark:text-purple-400 mr-4 group-hover:scale-110 transition-transform duration-300" 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-1M4 12H3m-.707 5.657l.707.707M18.364 5.636l.707-.707M6.879 7.121A4 4 0 0112 5c2.21 0 4 1.79 4 4 0 1.27-.492 2.453-1.386 3.348L12 21l-2.614-7.652A4 4 0 018 9c0-2.21 1.79-4 4-4z"></path></svg>
              <span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-purple-700 dark:group-hover:text-purple-300">Adventures</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
              <svg class="w-7 h-7 text-yellow-600 dark:text-yellow-400 mr-4 group-hover:scale-110 transition-transform duration-300" 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="M3 21v-4a2 2 0 012-2h4a2 2 0 012 2v4m-6 0h6m-6 0v-4m0-4.004H8m0 0v-2.004S10 10 12 10s4-2 4-2v2.004m-4-2.004V8m.004-2.004h-.008m.008 2.004h-.008m0 0v2.004M15 17h6l-3-3m0-4.004S18 10 16 10s-4-2-4-2v2.004M12 21h9m-9-4.004H15m0 0v-2.004S17 10 19 10s4-2 4-2v2.004m-4-2.004V8"></path></svg>
              <span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-yellow-700 dark:group-hover:text-yellow-300">Experiences</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center p-3 rounded-xl transition-all duration-300 transform hover:scale-[1.02] hover:bg-gradient-to-r hover:from-purple-100 hover:to-indigo-100 dark:hover:from-purple-900 dark:hover:to-indigo-900 group-hover:shadow-md">
              <svg class="w-7 h-7 text-emerald-600 dark:text-emerald-400 mr-4 group-hover:scale-110 transition-transform duration-300" 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="M8 12h.01M12 12h.01M16 12h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="text-lg font-medium text-gray-800 dark:text-gray-200 group-hover:text-emerald-700 dark:group-hover:text-emerald-300">Classes & Workshops</span>
            </a>
          </li>
          <!-- Add more categories -->
        </ul>
        <div class="mt-8">
          <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-500 to-orange-500 dark:from-red-400 dark:to-orange-400 mb-4">Popular Searches</h3>
          <div class="flex flex-wrap gap-2">
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-200 transition-colors duration-300 hover:bg-red-200 dark:hover:bg-red-800 cursor-pointer shadow-sm">Hiking</span>
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-yellow-100 text-yellow-700 dark:bg-yellow-900 dark:text-yellow-200 transition-colors duration-300 hover:bg-yellow-200 dark:hover:bg-yellow-800 cursor-pointer shadow-sm">Spa Days</span>
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-emerald-100 text-emerald-700 dark:bg-emerald-900 dark:text-emerald-200 transition-colors duration-300 hover:bg-emerald-200 dark:hover:bg-emerald-800 cursor-pointer shadow-sm">Cooking</span>
            <span class="px-4 py-2 rounded-full text-sm font-semibold bg-indigo-100 text-indigo-700 dark:bg-indigo-900 dark:text-indigo-200 transition-colors duration-300 hover:bg-indigo-200 dark:hover:bg-indigo-800 cursor-pointer shadow-sm">Photography</span>
          </div>
        </div>
      </div>
    </aside>

    <!-- Main Content Area (Central Cards) (Col 1-3 md, Col 3-5 lg) -->
    <section class="md:col-span-2 lg:col-span-3 space-y-6">

      <!-- Search/Filter Bar -->
      <div class="bg-gradient-to-r from-red-50 via-yellow-50 to-emerald-50 dark:from-gray-800 dark:via-gray-850 dark:to-gray-900 p-5 rounded-3xl shadow-xl flex flex-col sm:flex-row items-center justify-between gap-4 transition-all duration-300 group relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-r from-red-100 via-yellow-100 to-emerald-100 dark:from-red-950 dark:via-yellow-950 dark:to-emerald-950 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
        <div class="relative z-10 w-full flex flex-col sm:flex-row gap-4">
          <input type="text" placeholder="Search activities or locations..." class="flex-grow p-3 rounded-full bg-white dark:bg-gray-700 border border-transparent focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600 focus:border-transparent transition-all duration-300 shadow-inner placeholder:text-gray-500 dark:placeholder:text-gray-400" />
          <button class="px-6 py-3 bg-gradient-to-r from-red-600 to-yellow-600 dark:from-red-700 dark:to-yellow-700 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-95 transition-all duration-300 flex items-center justify-center">
            <svg class="w-6 h-6 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
            Search
          </button>
        </div>
      </div>

      <!-- Booking Cards Grid -->
      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

        <!-- Card 1 -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-red-200 dark:hover:border-red-700">
          <div class="absolute inset-0 bg-gradient-to-br from-red-100 to-red-50 dark:from-red-950 dark:to-red-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=1" alt="Mountain Hiking" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-orange-600 dark:from-red-400 dark:to-orange-400 mb-2">Alaskan Glacier Trek</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Experience the breathtaking beauty of massive glaciers.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.9 (245 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$299</span>
              <button class="px-5 py-2 bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 2 -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-yellow-200 dark:hover:border-yellow-700">
          <div class="absolute inset-0 bg-gradient-to-br from-yellow-100 to-yellow-50 dark:from-yellow-950 dark:to-yellow-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=2" alt="Cooking Class" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-yellow-600 dark:from-red-400 dark:to-yellow-400 mb-2">Authentic Italian Cooking</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Master the art of pasta making and classic sauces.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.7 (180 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$85</span>
              <button class="px-5 py-2 bg-gradient-to-r from-red-500 to-yellow-500 dark:from-red-600 dark:to-yellow-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 3 -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden relative group border border-transparent hover:border-emerald-200 dark:hover:border-emerald-700">
          <div class="absolute inset-0 bg-gradient-to-br from-emerald-100 to-emerald-50 dark:from-emerald-950 dark:to-emerald-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=3" alt="City Tour" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-red-600 to-emerald-600 dark:from-red-400 dark:to-emerald-400 mb-2">Historic City Walking Tour</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Explore ancient landmarks and hidden gems with a local guide.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.8 (310 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$45</span>
              <button class="px-5 py-2 bg-gradient-to-r from-emerald-500 to-teal-500 dark:from-emerald-600 dark:to-teal-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 4 (Hidden on smaller screens until lg) -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden hidden lg:block relative group border border-transparent hover:border-violet-200 dark:hover:border-violet-700">
          <div class="absolute inset-0 bg-gradient-to-br from-violet-100 to-violet-50 dark:from-violet-950 dark:to-violet-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=4" alt="Yoga Retreat" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-400 dark:to-indigo-400 mb-2">Serene Beach Yoga Retreat</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Rejuvenate your mind and body by the ocean.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>5.0 (98 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$599</span>
              <button class="px-5 py-2 bg-gradient-to-r from-purple-500 to-indigo-500 dark:from-purple-600 dark:to-indigo-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- Card 5 (Hidden on smaller screens until lg) -->
        <article class="bg-white dark:bg-gray-800 rounded-3xl shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-500 overflow-hidden hidden lg:block relative group border border-transparent hover:border-blue-200 dark:hover:border-blue-700">
          <div class="absolute inset-0 bg-gradient-to-br from-blue-100 to-blue-50 dark:from-blue-950 dark:to-blue-900 opacity-10 group-hover:opacity-20 transition-opacity duration-500 blur-xl w-full h-full scale-110"></div>
          <img src="https://picsum.photos/400/300?random=5" alt="Scuba Diving" class="w-full h-48 object-cover transition-transform duration-500 group-hover:scale-105 relative z-0" loading="lazy">
          <div class="p-5 relative z-10">
            <h3 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-blue-600 to-cyan-600 dark:from-blue-400 dark:to-cyan-400 mb-2">Deep Sea Scuba Diving</h3>
            <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Discover vibrant marine life in crystal clear waters.</p>
            <div class="flex items-center text-sm text-gray-500 dark:text-gray-400 mb-4">
              <svg class="w-5 h-5 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.565-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path></svg>
              <span>4.6 (155 reviews)</span>
            </div>
            <div class="flex justify-between items-center">
              <span class="text-3xl font-extrabold bg-clip-text text-transparent bg-gradient-to-r from-emerald-600 to-teal-600 dark:from-emerald-400 dark:to-teal-400">$180</span>
              <button class="px-5 py-2 bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-blue-600 dark:to-cyan-600 text-white rounded-full font-semibold shadow-md hover:shadow-lg transform hover:scale-105 active:scale-95 transition-all duration-300">
                Book Now
              </button>
            </div>
          </div>
        </article>

        <!-- 'Load More' or Pagination -->
        <div class="md:col-span-3 lg:col-span-5 flex justify-center mt-4 w-full">
          <button class="px-8 py-4 bg-gradient-to-r from-yellow-500 to-emerald-500 dark:from-yellow-600 dark:to-emerald-600 text-white font-bold rounded-full shadow-lg hover:shadow-xl transform hover:scale-[1.02] active:scale-95 transition-all duration-300 flex items-center justify-center">
            <svg class="w-6 h-6 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="M4 4v5h.582m15.356 2A8.001 8.001 0 004 16.087v-2.072a2 2 0 012-2h4a2 2 0 002-2V6h2v2h4a2 2 0 012 2v2a8.001 8.001 0 00-15.356 2M4 20h16"></path></svg>
            Load More Activities
          </button>
        </div>

      </div>
    </section>

  </main>

  <!-- Footer Section (Optional, could be simplified) -->
  <footer class="mt-12 text-center text-gray-500 dark:text-gray-400 text-sm">
    <p>&copy; 2023 AdventureBook. All rights reserved.</p>
  </footer>

</div>

Social_Components_Component

3Dデザインの美学、補色、ダークモードのサポートを備えた、レスポンシブでインタラクティブなeコマースソーシャルコンポーネント。ユーザーレビュー/体験談、星評価、「共有」コールトゥアクションを特集しています。

開けるプレビュー

                <div class="relative min-h-screen bg-gray-100 p-4 sm:p-8 md:p-12 dark:bg-gray-900 overflow-hidden flex items-center justify-center">

  <!-- Base background (for pseudo-3D effect) -->
  <div class="absolute inset-0 bg-gradient-to-br from-purple-200 to-indigo-100 dark:from-purple-900 dark:to-indigo-800 transform rotate-3 scale-105 rounded-3xl opacity-50 blur-xl"></div>
  <div class="absolute inset-0 bg-gradient-to-tl from-teal-200 to-green-100 dark:from-teal-900 dark:to-green-800 transform -rotate-6 scale-105 rounded-3xl opacity-50 blur-xl"></div>

  <div class="relative z-10 w-full max-w-4xl bg-white bg-opacity-80 dark:bg-gray-800 dark:bg-opacity-80 backdrop-blur-md rounded-3xl shadow-2xl p-6 sm:p-8 md:p-10 border border-t-4 border-l-4 border-purple-300 dark:border-purple-600 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0 transition-all duration-700 ease-in-out">
    
    <div class="flex flex-col md:flex-row gap-8">

      <!-- Product/Image Section -->
      <div class="w-full md:w-1/2 relative bg-purple-50 dark:bg-purple-950 rounded-2xl p-2 shadow-inner border border-purple-200 dark:border-purple-700 transform rotate-3 translate-x-2 translate-y-1">
        <img src="https://picsum.photos/600/400?random=1" alt="Product Image" class="w-full h-auto object-cover rounded-xl shadow-lg transform -rotate-3 -translate-x-2 -translate-y-1 mx-auto">
        <div class="absolute bottom-2 left-2 right-2 p-2 bg-gradient-to-t from-black/60 to-transparent rounded-b-xl text-white text-sm flex justify-between items-center">
          <span>New Arrivals</span>
          <button class="flex items-center gap-1 text-white hover:text-green-300 transition-colors">
            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
            Save
          </button>
        </div>
      </div>

      <!-- Social Engagement Section -->
      <div class="w-full md:w-1/2 flex flex-col justify-between gap-6 relative">
        
        <div class="relative p-6 bg-gradient-to-br from-green-50 to-teal-50 dark:from-green-950 dark:to-teal-900 rounded-3xl shadow-xl border border-green-200 dark:border-green-700 transform -rotate-2 -translate-x-1 translate-y-2">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-2 transform -rotate-1 origin-top-left">Customer Reviews</h3>
          
          <!-- Rating Block -->
          <div class="flex items-center mb-4">
            <div class="flex text-yellow-400">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
              <svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            </div>
            <span class="ml-2 text-gray-700 dark:text-gray-300 font-semibold">4.5 out of 5</span>
            <a href="#" class="ml-4 text-sm text-purple-600 dark:text-purple-400 hover:underline">Read all 120 reviews</a>
          </div>

          <!-- Individual Review -->
          <div class="bg-white dark:bg-gray-700 p-4 rounded-xl shadow-md border-b-4 border-r-4 border-green-300 dark:border-green-600 transform translate-x-1 translate-y-1">
            <div class="flex items-center mb-3">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-purple-400 dark:border-purple-500 mr-3 shadow-sm">
              <div>
                <p class="font-semibold text-gray-800 dark:text-white">Jane Doe</p>
                <p class="text-xs text-gray-500 dark:text-gray-400">Verified Purchaser</p>
              </div>
            </div>
            <p class="text-gray-700 dark:text-gray-300 italic text-sm mb-2">"Absolutely love this product! The quality is superb and it arrived so quickly."</p>
            <p class="text-xs text-gray-500 dark:text-gray-400 text-right">Reviewed on July 15, 2023</p>
          </div>

        </div>

        <!-- Share and Social Buttons -->
        <div class="relative p-6 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-indigo-950 dark:to-purple-900 rounded-3xl shadow-xl border border-indigo-200 dark:border-indigo-700 transform rotate-2 translate-x-2 -translate-y-1">
          <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 transform rotate-1 origin-top-left">Share & Connect</h3>
          <div class="flex flex-wrap gap-4 justify-center sm:justify-start">
            <button class="flex items-center gap-2 px-5 py-3 bg-purple-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-purple-700 transition-all duration-300 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.994 20.29c-.777 0-1.488-.363-1.944-.937-.456-.574-.694-1.309-.694-2.106V11.23a.75.75 0 011.5 0v6.071c0 .484.148.97.447 1.34s.707.57 1.157.57a3.99 3.99 0 003.99-3.99c0-.485-.149-.97-.448-1.34s-.708-.57-1.157-.57h-1.5a.75.75 0 010-1.5h1.5a.75.75 0 01.75.75c0 1.29-.444 2.502-1.282 3.407-.84.904-1.977 1.4-3.193 1.4zm-9.996-3.957A3.99 3.99 0 003 12.29c0-.485.149-.97.448-1.34s.708-.57 1.157-.57h1.5a.75.75 0 010-1.5H4.555a.75.75 0 01-.75-.75c0-1.29.444-2.502 1.282-3.407.84-.904 1.977-1.4 3.193-1.4.777 0 1.488.363 1.944.937.456.574.694 1.309.694 2.106v6.972c0 .484-.148.97-.447 1.34s-.707.57-1.157.57a3.99 3.99 0 00-3.99-3.99z"></path></svg>
              Share Product
            </button>
            <button class="flex items-center gap-2 px-5 py-3 bg-blue-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-blue-700 transition-all duration-300 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22 6.981a5.61 5.61 0 00-1.637-.446 3.149 3.149 0 01-2.28 1.002.75.75 0 01-.5-.14A5.61 5.61 0 0013 7.825c0-.422-.05-.838-.145-1.243a4.072 4.072 0 00-3.513-3.618 3.189 3.189 0 00-.817-.116 3.978 3.978 0 00-2.81 1.153C4.249 4.908 4 6.136 4 7.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V7.424C0 6.136.249 4.908.775 3.013A4.043 4.043 0 001.353 2.126a3.978 3.978 0 002.81-1.153C4.249.908 4 1.136 4 2.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V2.424c0-1.288.249-2.516.775-4.411A4.043 4.043 0 001.353-2.126a3.978 3.978 0 002.81 1.153C4.249-1.908 4-1.136 4-.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V-.424c0-1.288.249-2.516.775-4.411A4.043 4.043 0 001.353-2.126a3.978 3.978 0 002.81 1.153C4.249-1.908 4-1.136 4-.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0a.75.75 0 01-.75-.75V-.424c0-1.288.249-2.516.775-4.411A4.043 4.043 0 001.353-2.126a3.978 3.978 0 002.81 1.153C4.249-1.908 4-1.136 4-.424v1.312a.75.75 0 01-.75.75c-1.196 0-2.392 0-3.588 0A.75.75 0 010 .681V.681c0 1.288-.249 2.516-.775 4.411A4.043 4.043 0 00-1.353 2.126c-.45-.487-1.026-.78-1.666-.889-.64-.108-1.316-.016-1.928.272-.61.286-1.12.753-1.472 1.341s-.513 1.22-.513 1.905c0 .285.029.566.088.841.059.274.148.539.26.792.112.253.25.495.412.72s.347.43.55.614l.05.044c.484.423.953.79 1.393 1.096.44.306.845.548 1.196.726.35.178.634.3l.865.253a.75.75 0 01.31.07zm-.591 1.242c.45-.487 1.026-.78 1.666-.889.64-.108 1.316-.016 1.928.272.61.286 1.12.753 1.472 1.341s.513 1.22.513 1.905c0 .285-.029.566-.088.841-.059.274-.148.539-.26.792-.112.253-.25.495-.412.72s-.347.43-.55.614l-.05.044c-.484.423-.953.79-1.393 1.096-.44.306-.845.548-1.196.726-.35.178-.634.3l-.865.253a.75.75 0 01-.31.07z"></path></svg>
              Facebook
            </button>
            <button class="flex items-center gap-2 px-5 py-3 bg-red-600 text-white rounded-full shadow-lg hover:shadow-xl hover:bg-red-700 transition-all duration-300 transform perspective-1000 rotate-x-6 rotate-y-3 skew-y-1 hover:rotate-x-0 hover:rotate-y-0 hover:skew-y-0">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17 2H7c-2.76 0-5 2.24-5 5v10c0 2.76 2.24 5 5 5h10c2.76 0 5-2.24 5-5V7c0-2.76-2.24-5-5-5zm3.78 17H3.22c-.68 0-1.22-.54-1.22-1.22V7c0-.68.54-1.22 1.22-1.22h13.56c.68 0 1.22.54 1.22 1.22v10.78zm-1.89-5.78c-.24-1.07-.63-2.07-1.13-2.98-.59-.8-1.29-1.42-2.16-1.81-.9-.4-1.88-.6-2.98-.63-1.1-.03-2.2.06-3.23.3-1.03.24-1.99.63-2.88 1.13-.8.59-1.42 1.29-1.81 2.16-.4.9-.6 1.88-.63 2.98-.03 1.1.06 2.2.3 3.23.24 1.03.63 1.99 1.13 2.88.59.8 1.29 1.42 2.16 1.81.9.4 1.88.6 2.98.63 1.1.03 2.2-.06 3.23-.3 1.03-.24 1.99-.63 2.88-1.13.8-.59 1.42-1.29 1.81-2.16.4-.9.6-1.88.63-2.98.03-1.1-.06-2.2-.3-3.23zM12 17.5c-3.03 0-5.5-2.47-5.5-5.5S8.97 6.5 12 6.5s5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5zm.96-8.54l-1.92 1.92v-2.88a.5.5 0 00-1 0v2.88l-1.92-1.92a.5.5 0 00-.71.71l2.5 2.5a.5.5 0 00.71 0l2.5-2.5a.5.5 0 00-.71-.71z"></path></svg>
              Instagram
            </button>
          </div>
        </div>

      </div>
    </div>

    <!-- Bottom Call to Action / Social Proof -->
    <div class="mt-8 text-center bg-gray-50 dark:bg-gray-700 p-6 rounded-2xl shadow-inner border border-gray-200 dark:border-gray-600 transform perspective-1000 rotate-x-3 rotate-y-2 hover:rotate-x-0 hover:rotate-y-0 transition-all duration-700 ease-in-out">
      <p class="text-lg font-semibold text-gray-800 dark:text-white mb-3 tracking-wide transform perspective-1000 rotate-x-3 rotate-y-2">Join thousands of happy customers!</p>
      <button class="px-8 py-4 bg-gradient-to-r from-teal-500 to-green-500 text-white font-bold rounded-full text-xl shadow-lg hover:shadow-xl hover:from-teal-600 hover:to-green-600 transition-all duration-300 ease-in-out uppercase tracking-wider transform perspective-1000 translate-z-10 hover:translate-z-20 scale-105 hover:scale-110">
        Explore More Products
        <span class="ml-2 inline-block transition-transform duration-300 group-hover:translate-x-1">
          &rarr;
        </span>
      </button>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-3">"Your satisfaction is our priority."</p>
    </div>

     <!-- Small decorative elements -->
     <div class="absolute -top-4 -left-4 w-12 h-12 bg-purple-400 dark:bg-purple-700 rounded-full mix-blend-multiply blur-sm opacity-60 transform translate-z-10 rotate-45"></div>
     <div class="absolute -bottom-4 -right-4 w-16 h-16 bg-teal-400 dark:bg-teal-700 rounded-full mix-blend-multiply blur-sm opacity-60 transform translate-z-10 -rotate-30"></div>

  </div>
</div>

ウィッシュリスト不動産コンポーネント

マテリアルデザインの原則に触発され、ダークモードをサポートする、不動産物件向けのレスポンシブでハイコントラストのウィッシュリストコンポーネント。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-8 sm:mb-10 text-center">
      Your Wishlist
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 sm:gap-8">

      <!-- Property Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1018/600/400" alt="Modern House With Large Windows">
          <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Luxury Villa with Ocean View</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">123 Ocean Blvd, Malibu, CA</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 4 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 3 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 2,500 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$2,500,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

      <!-- Property Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1020/600/400" alt="Apartment Complex with City View">
           <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Chic Downtown Loft</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">456 City St, New York, NY</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 1,200 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$850,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

      <!-- Property Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1025/600/400" alt="Suburban Family House">
           <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Spacious Family Home with Garden</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">789 Evergreen Ln, Suburbia, TX</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 5 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 4 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 3,800 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$650,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

      <!-- Property Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col">
        <div class="relative pb-2/3">
          <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/1037/600/400" alt="Small Countryside Cottage">
           <button class="absolute top-3 right-3 p-2 rounded-full bg-white dark:bg-gray-700 text-red-500 hover:text-red-600 dark:text-red-400 dark:hover:text-red-500 shadow-md transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50" aria-label="Remove from wishlist">
            <svg class="h-6 w-6 fill-current" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
            </svg>
          </button>
        </div>
        <div class="p-4 sm:p-5 flex flex-col flex-grow">
          <h3 class="text-lg sm:text-xl font-semibold text-gray-900 dark:text-white mb-2 line-clamp-2">Cozy Countryside Retreat</h3>
          <p class="text-sm text-gray-600 dark:text-gray-300 mb-3">456 Rural Rd, Countryside, GA</p>
          <div class="flex items-center text-gray-700 dark:text-gray-200 text-sm mb-4">
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 15.5A.75.75 0 013.5 14.75V5.25a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75zM15.75 15.5a.75.75 0 01-.75-.75v-9.5a.75.75 0 011.5 0v9.5a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 3 Beds</span>
            <span class="flex items-center mr-4"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a.75.75 0 01.75.75v5.5a.75.75 0 01-1.5 0v-5.5A.75.75 0 0110 2zM4 9.75a.75.75 0 01.75-.75h10.5a.75.75 0 010 1.5H4.75a.75.75 0 01-.75-.75zM10 17.25a.75.75 0 01-.75-.75v-5.5a.75.75 0 011.5 0v5.5a.75.75 0 01-.75.75z"></path><path fill-rule="evenodd" d="M4.25 10A.75.75 0 013.5 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75zM15.75 10A.75.75 0 0115 9.25V5.25a.75.75 0 011.5 0V9.25a.75.75 0 01-.75.75z" clip-rule="evenodd"></path></svg> 2 Baths</span>
            <span class="flex items-center"><svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M7 2a2 2 0 00-2 2v12a2 2 0 002 2h6a2 2 0 002-2V4a2 2 0 00-2-2H7zm0 2h6v8H7V4zm0 10v1a1 1 0 001 1h4a1 1 0 001-1v-1H7z" clip-rule="evenodd"></path></svg> 1,800 sqft</span>
          </div>
          <div class="mt-auto flex justify-between items-baseline pt-2">
            <p class="text-2xl sm:text-3xl font-bold text-indigo-700 dark:text-indigo-400">$380,000</p>
            <a href="#" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 dark:bg-indigo-500 dark:hover:bg-indigo-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors duration-200">
              View Details
            </a>
          </div>
        </div>
      </div>

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

アールデコ調のナビゲーションバー

アールデコ調のレスポンシブなCRM/ビジネスツール用ナビゲーションバーで、幾何学模様、豊かな宝石の色調、ダークモードのサポートが特徴です。インタラクティブな要素を含む適度な複雑さで設計されています。

開けるプレビュー

                <nav class="bg-gradient-to-r from-emerald-700 to-emerald-900 dark:from-gray-900 dark:to-gray-950 p-4 shadow-xl font-sans relative z-50">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Section -->
    <div class="flex items-center space-x-2">
      <svg class="h-8 w-8 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 14v3m4-3v3m4-3v3M3 21h18M3 10h18M3 7l9-4 9 4M4 10h16v11H4V10z" />
      </svg>
      <a href="#" class="text-white text-2xl font-bold tracking-wider uppercase font-serif antialiased">CRM Suite</a>
    </div>

    <!-- Mobile Menu Button (Hamburger) -->
    <div class="md:hidden">
      <button class="text-white hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-300" onclick="this.nextElementSibling.classList.toggle('hidden')">
        <svg class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7" />
        </svg>
      </button>
    </div>

    <!-- Navigation Links (Desktop) -->
    <div class="hidden md:flex space-x-8 lg:space-x-12 items-center">
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Dashboard
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Customers
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Sales
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Analytics
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
      <a href="#" class="text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out relative group">
        Settings
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </a>
    </div>

    <!-- User Actions (Desktop) -->
    <div class="hidden md:flex items-center space-x-6">
      <button class="text-white hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-300 rounded-full p-2 relative group">
        <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <span class="absolute -top-1 -right-1 inline-flex items-center justify-center px-2 py-1 text-xs font-semibold leading-none text-red-100 bg-red-600 rounded-full">3</span>
        <span class="absolute left-0 bottom-0 w-full h-0.5 bg-emerald-300 origin-left scale-x-0 group-hover:scale-x-100 transition-transform duration-300"></span>
      </button>
      <div class="relative group">
        <img class="h-9 w-9 rounded-full object-cover cursor-pointer border-2 border-emerald-300 hover:border-emerald-500 transition-colors duration-300" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
        <!-- Dropdown placeholder (can be implemented with JS for full functionality) -->
        <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg py-1 hidden group-hover:block transition-all duration-300 ease-out transform scale-95 opacity-0 group-hover:scale-100 group-hover:opacity-100 z-10">
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-emerald-100 dark:hover:bg-gray-700">Profile</a>
          <a href="#" class="block px-4 py-2 text-gray-800 dark:text-gray-200 hover:bg-emerald-100 dark:hover:bg-gray-700">Settings</a>
          <form action="#" method="POST">
            <button type="submit" class="block w-full text-left px-4 py-2 text-red-600 hover:bg-emerald-100 dark:hover:bg-gray-700 dark:text-red-400">Sign Out</button>
          </form>
        </div>
      </div>
    </div>
  </div>

  <!-- Mobile Menu (Collapsed by default) -->
  <div class="hidden md:hidden absolute top-full left-0 w-full bg-gradient-to-b from-emerald-800 to-emerald-900 dark:from-gray-900 dark:to-gray-950 shadow-md pb-4 pt-2 animate-fade-in-down">
    <div class="flex flex-col items-center space-y-4">
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Dashboard</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Customers</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Sales</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Analytics</a>
      <a href="#" class="block text-white text-lg font-medium hover:text-emerald-200 transition duration-300 ease-in-out">Settings</a>
      <button class="text-white hover:text-emerald-200 focus:outline-none focus:ring-2 focus:ring-emerald-300 rounded-full p-2 relative inline-flex items-center">
        <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="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
        </svg>
        <span class="ml-2 text-white">Notifications <span class="text-red-300">(3)</span></span>
      </button>
      <img class="h-10 w-10 rounded-full object-cover border-2 border-emerald-300" src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar">
    </div>
  </div>
</nav>

<style>
  /* This is a simple animation for the mobile menu. 
     For a real-world scenario, you'd use a JS toggle.
     The 'hidden' class is toggled directly on the element in the HTML for demonstration.
      Tailwind's 'animate-fade-in-down' requires a keyframe definition within a CSS file or style block. 
     For a pure HTML/Tailwind solution, more complex animations might rely on utility classes alone 
     or external configuration, but for 'moderate complexity' with some 'interactive features' (like an expanding menu),
     a small style block for keyframes is practical and doesn't break the 'no JS' rule for the *component display* itself.
  */
  @keyframes fade-in-down {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-down {
    animation: fade-in-down 0.3s ease-out forwards;
  }
</style>

Luxury_Tabs_Component

マーケットプレイスでの使用を想定して設計されたシンプルでエレガント、かつレスポンシブなタブコンポーネントで、補完的な配色とダークモードに対応したラグジュアリー/プレミアムな美学が特徴です。

開けるプレビュー

                <div class="p-4 dark:bg-gray-900 bg-white min-h-screen font-sans antialiased text-gray-800 dark:text-gray-200">
  <div class="max-w-4xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-xl overflow-hidden">
    <div class="flex border-b border-gray-200 dark:border-gray-700 p-2">
      <button class="flex-1 px-4 py-3 text-lg font-medium text-purple-700 dark:text-purple-400 border-b-2 border-purple-700 dark:border-purple-400 transition-colors duration-300 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none">
        <span class="block">New Arrivals</span>
      </button>
      <button class="flex-1 px-4 py-3 text-lg font-medium text-gray-600 dark:text-gray-300 border-b-2 border-transparent transition-colors duration-300 hover:text-purple-700 dark:hover:text-purple-400 hover:border-purple-700/50 dark:hover:border-purple-400/50 focus:outline-none">
        <span class="block">Best Sellers</span>
      </button>
      <button class="flex-1 px-4 py-3 text-lg font-medium text-gray-600 dark:text-gray-300 border-b-2 border-transparent transition-colors duration-300 hover:text-purple-700 dark:hover:text-purple-400 hover:border-purple-700/50 dark:hover:border-purple-400/50 focus:outline-none">
        <span class="block">On Sale</span>
      </button>
    </div>

    <div class="p-6 md:p-8">
      <!-- Tab Content 1: New Arrivals -->
      <div class="space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Discover Our Latest Collection</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          Explore hand-picked items from top sellers, meticulously selected for their quality and unique appeal. Elevate your style with our exquisite new arrivals.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/item1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Elegant Leather Bag</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$299.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Handcrafted with premium leather.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/item2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Artisan Silver Necklace</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$149.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Unique design, pure sterling silver.</p>
            </div>
          </div>
        </div>
        <div class="md:flex items-center justify-between py-4 border-t border-gray-200 dark:border-gray-700 mt-6">
            <div class="flex -space-x-2 overflow-hidden mb-4 md:mb-0 justify-center md:justify-start">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Customer Avatar">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Customer Avatar">
                <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800" src="https://randomuser.me/api/portraits/women/3.jpg" alt="Customer Avatar">
            </div>
            <p class="text-sm text-gray-600 dark:text-gray-400 text-center md:text-right">Trusted by over 10,000 discerning customers.</p>
        </div>
      </div>

      <!-- Tab Content 2: Best Sellers (hidden by default, for demonstration) -->
      <!-- Add 'hidden' class to hide, remove to show -->
      <!-- <div class="hidden space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Our Most Popular Choices</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          See what everyone else is loving! These items consistently receive top ratings and fly off our shelves. Don't miss out on these customer favorites.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/best1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Vintage Swiss Watch</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$899.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Timeless elegance, precise mechanics.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/best2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Silk Scarf Collection</h3>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$75.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">Luxurious feel, vibrant patterns.</p>
            </div>
          </div>
        </div>
      </div> -->

      <!-- Tab Content 3: On Sale (hidden by default, for demonstration) -->
      <!-- <div class="hidden space-y-6">
        <h2 class="text-3xl font-serif text-gray-900 dark:text-gray-100 mb-4">Limited-Time Offers</h2>
        <p class="text-lg leading-relaxed text-gray-700 dark:text-gray-300">
          Grab these incredible deals before they're gone! Premium items at unbeatable prices, available for a short period only.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/sale1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Designer Handbag</h3>
              <p class="text-gray-500 dark:text-gray-400 line-through text-md">$450.00</p>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$225.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">50% off! Limited stock.</p>
            </div>
          </div>
          <div class="flex flex-col md:flex-row items-center bg-gray-50 dark:bg-gray-700 rounded-lg p-4 shadow-sm">
            <img src="https://picsum.photos/seed/sale2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover flex-shrink-0 mb-4 md:mb-0 md:mr-4">
            <div class="text-center md:text-left">
              <h3 class="text-xl font-semibold text-gray-900 dark:text-gray-100">Luxury Scented Candle Set</h3>
              <p class="text-gray-500 dark:text-gray-400 line-through text-md">$90.00</p>
              <p class="text-purple-700 dark:text-purple-400 font-bold text-lg mt-1">$60.00</p>
              <p class="text-gray-600 dark:text-gray-300 text-sm">30% off! Perfect gift.</p>
            </div>
          </div>
        </div>
      </div> -->

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

Healthcare_Form_Gradient_Neon

ネオン/エレクトリックカラーグラデーションとスムーズなトランジションを備えた複雑で応答性の高いヘルスケアフォームコンポーネントで、ダークモードをサポートします。複数のインタラクティブ要素を持つ医療アプリケーション向けに設計されています。

開けるプレビュー

                <div class="min-h-screen py-12 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-purple-900 via-zinc-950 to-blue-900 dark:from-zinc-950 dark:via-blue-950 dark:to-purple-950 text-white font-sans overflow-hidden">
  <div class="max-w-4xl mx-auto bg-gradient-to-br from-purple-700 via-pink-700 to-blue-700 dark:from-zinc-800 dark:via-purple-800 dark:to-blue-800 rounded-3xl shadow-xl p-8 sm:p-10 lg:p-12 border border-purple-500 dark:border-blue-700 transform transition-all duration-500 hover:shadow-2xl hover:scale-[1.01]">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-10 bg-clip-text text-transparent bg-gradient-to-r from-teal-300 via-pink-300 to-lime-300 dark:from-teal-400 dark:via-pink-400 dark:to-lime-400 drop-shadow-lg animate-pulse-light">
      Patient Registration Form
    </h2>

    <form class="space-y-8">
      <!-- Personal Information Section -->
      <fieldset class="border-t-2 border-b-2 border-indigo-400 dark:border-teal-600 pt-6 pb-8 space-y-6">
        <legend class="text-2xl sm:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-lime-300 to-pink-300 dark:from-lime-400 dark:to-pink-400 px-3 -mt-6 ml-4 drop-shadow-md">Personal Information</legend>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="full-name" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Full Name</label>
            <input type="text" name="full-name" id="full-name" autocomplete="name" placeholder="John Doe" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="dob" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Date of Birth</label>
            <input type="date" name="dob" id="dob" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="email" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Email Address</label>
            <input type="email" name="email" id="email" autocomplete="email" placeholder="[email protected]" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="phone" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Phone Number</label>
            <input type="tel" name="phone" id="phone" autocomplete="tel" placeholder="(123) 456-7890" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
        </div>

        <div>
          <label for="address" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Street Address</label>
          <input type="text" name="address" id="address" autocomplete="street-address" placeholder="123 Main St" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
        </div>
        <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
          <div>
            <label for="city" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">City</label>
            <input type="text" name="city" id="city" autocomplete="address-level2" placeholder="Anytown" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="state" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">State</label>
            <input type="text" name="state" id="state" autocomplete="address-level1" placeholder="CA" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="zip" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">ZIP Code</label>
            <input type="text" name="zip" id="zip" autocomplete="postal-code" placeholder="90210" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
        </div>
      </fieldset>

      <!-- Medical History Section -->
      <fieldset class="border-t-2 border-b-2 border-indigo-400 dark:border-teal-600 pt-6 pb-8 space-y-6">
        <legend class="text-2xl sm:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-lime-300 to-pink-300 dark:from-lime-400 dark:to-pink-400 px-3 -mt-6 ml-4 drop-shadow-md">Medical History</legend>

        <div>
          <label class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-3">Are you currently taking any medications?</label>
          <div class="flex flex-wrap gap-x-6 gap-y-3">
            <div class="flex items-center">
              <input id="meds-yes" name="medications" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="meds-yes" class="ml-2 block text-base text-white">Yes</label>
            </div>
            <div class="flex items-center">
              <input id="meds-no" name="medications" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="meds-no" class="ml-2 block text-base text-white">No</label>
            </div>
          </div>
        </div>

        <div>
          <label for="past-conditions" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Please list any significant past medical conditions or surgeries:</label>
          <textarea id="past-conditions" name="past-conditions" rows="4" placeholder="e.g., Hypertension, Appendectomy (2010)" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300"></textarea>
        </div>

        <div>
          <label class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-3">Do you have any known allergies?</label>
          <div class="flex flex-wrap gap-x-6 gap-y-3 pb-2">
            <div class="flex items-center">
              <input id="allergies-yes" name="allergies" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="allergies-yes" class="ml-2 block text-base text-white">Yes</label>
            </div>
            <div class="flex items-center">
              <input id="allergies-no" name="allergies" type="radio" class="h-5 w-5 text-teal-400 dark:text-lime-400 bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="allergies-no" class="ml-2 block text-base text-white">No</label>
            </div>
          </div>
          <textarea id="allergy-details" name="allergy-details" rows="2" placeholder="If yes, please specify (e.g., Penicillin, Peanuts)" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300"></textarea>
        </div>

        <div>
          <label class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-3">Immunization Status (check all that apply):</label>
          <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
            <div class="flex items-center">
              <input id="immunization-flu" name="immunizations[]" type="checkbox" value="flu" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-flu" class="ml-2 block text-base text-white">Annual Flu Shot</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-tetanus" name="immunizations[]" type="checkbox" value="tetanus" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-tetanus" class="ml-2 block text-base text-white">Tetanus (last 10 yrs)</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-hpv" name="immunizations[]" type="checkbox" value="hpv" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-hpv" class="ml-2 block text-base text-white">HPV</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-covid" name="immunizations[]" type="checkbox" value="covid" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-covid" class="ml-2 block text-base text-white">COVID-19</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-mmr" name="immunizations[]" type="checkbox" value="mmr" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-mmr" class="ml-2 block text-base text-white">MMR</label>
            </div>
            <div class="flex items-center">
              <input id="immunization-other" name="immunizations[]" type="checkbox" value="other" class="h-5 w-5 text-teal-400 dark:text-lime-400 rounded bg-purple-900/50 dark:bg-zinc-900/50 border-purple-500 dark:border-blue-700 focus:ring-teal-400 transition duration-300">
              <label for="immunization-other" class="ml-2 block text-base text-white mb-2">Other (specify below)</label>
            </div>
          </div>
          <textarea id="immunization-details" name="immunization-details" rows="2" placeholder="Specify other immunizations" class="w-full mt-2 px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300"></textarea>
        </div>
      </fieldset>

      <!-- Emergency Contact Section -->
      <fieldset class="border-t-2 border-b-2 border-emerald-400/50 dark:border-cyan-600/50 pt-6 pb-8 space-y-6">
        <legend class="text-2xl sm:text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-orange-300 to-cyan-300 dark:from-orange-400 dark:to-cyan-400 px-3 -mt-6 ml-4 drop-shadow-md">Emergency Contact</legend>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
          <div>
            <label for="ec-name" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Full Name</label>
            <input type="text" name="ec-name" id="ec-name" autocomplete="name" placeholder="Jane Doe" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
          <div>
            <label for="ec-relationship" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Relationship</label>
            <input type="text" name="ec-relationship" id="ec-relationship" placeholder="Spouse, Parent, Friend" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
          </div>
        </div>
        <div>
          <label for="ec-phone" class="block text-sm font-medium text-purple-200 dark:text-zinc-300 mb-2">Phone Number</label>
          <input type="tel" name="ec-phone" id="ec-phone" autocomplete="tel" placeholder="(987) 654-3210" class="w-full px-4 py-3 rounded-xl bg-purple-900/50 dark:bg-zinc-900/50 border border-purple-500 dark:border-blue-700 focus:ring-2 focus:ring-teal-400 focus:border-teal-400 text-white transition duration-300" required>
        </div>
      </fieldset>

      <div class="flex justify-end pt-4">
        <button type="submit" class="w-full sm:w-auto px-8 py-4 rounded-xl font-bold text-lg bg-gradient-to-r from-teal-400 to-lime-400 dark:from-sky-400 dark:to-cyan-400 text-zinc-900 shadow-lg hover:from-teal-300 hover:to-lime-300 dark:hover:from-sky-300 dark:hover:to-cyan-300 focus:outline-none focus:ring-4 focus:ring-teal-500/50 dark:focus:ring-cyan-500/50 transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105 active:scale-95 glow-on-hover">
          Submit Registration
        </button>
      </div>
    </form>
  </div>

  <style>
    @keyframes pulse-light {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.2); }
    }

    .animate-pulse-light {
      animation: pulse-light 3s infinite ease-in-out;
    }

    .glow-on-hover {
      transition: all 0.3s ease;
      position: relative;
      z-index: 1;
    }

    .glow-on-hover::before {
      content: '';
      background: linear-gradient(45deg, #00C9FF, #92FE9D, #00FFC0, #FFD700, #FF4500, #FF0077, #FF00C1, #A020F0, #00C9FF);
      position: absolute;
      top: -2px;
      left: -2px;
      background-size: 400%;
      z-index: -1;
      filter: blur(8px);
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      animation: glowing 20s linear infinite;
      opacity: 0;
      transition: opacity .3s ease-in-out;
      border-radius: 20px;
    }

    .glow-on-hover:active {
      color: #000
    }

    .glow-on-hover:active:after {
      background: transparent;
    }

    .glow-on-hover:hover:before {
      opacity: 1;
    }

    .glow-on-hover::after {
      z-index: -1;
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background: inherit; /* inherit the background of the button */
      left: 0;
      top: 0;
      border-radius: inherit;
    }

    @keyframes glowing {
      0% { background-position: 0 0; }
      50% { background-position: 400% 0; }
      100% { background-position: 0 0; }
    }
  </style>
</div>

Cyberpunk_Timeline_Dating_Social_Component

デートやソーシャルプラットフォーム向けのサイバーパンクの美学を備えたレスポンシブなタイムラインコンポーネント。ダークな背景、温かみのあるネオンのアクセント、デスクトップ、タブレット、モバイル向けの適応型レイアウトが特徴で、ダークモードを完全にサポートしています。

開けるプレビュー

                <div class="font-sans antialiased bg-gray-950 text-gray-200 min-h-screen dark:bg-gray-900 border-t-4 border-indigo-600 dark:border-indigo-500">
  <div class="container mx-auto px-4 py-8 lg:py-16">
    <h2 class="text-4xl lg:text-5xl font-extrabold text-center mb-12 tracking-wide text-indigo-400 dark:text-indigo-300 drop-shadow-lg shadow-indigo-500/50">
      Your Chrono-Log
    </h2>

    <div class="relative before:absolute before:left-2 before:top-0 before:h-full before:w-1 before:bg-gradient-to-b before:from-indigo-600 before:via-pink-500 before:to-orange-400 before:rounded-full dark:before:from-indigo-500 dark:before:via-pink-400 dark:before:to-orange-300 lg:before:left-1/2 lg:before:-translate-x-1/2">

      <!-- Timeline Item 1 -->
      <div class="flex flex-col lg:flex-row lg:justify-start lg:odd:flex-row-reverse w-full mb-12">
        <div class="lg:w-1/2 flex justify-end lg:pr-10 lg:text-right">
          <div class="relative bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl dark:shadow-2xl border border-indigo-700 dark:border-indigo-600 w-full ml-8 lg:ml-0 lg:mr-0 ">
            <span class="absolute -left-3 top-6 h-6 w-6 rounded-full bg-indigo-600 dark:bg-indigo-500 border-4 border-gray-950 dark:border-gray-900 flex items-center justify-center text-white text-xs font-bold"></span>
            <div class="absolute hidden lg:block h-3 w-3 bg-indigo-600 dark:bg-indigo-500 rounded-full -right-1.5 top-8"></div>
            <h3 class="text-2xl font-bold text-pink-400 dark:text-pink-300 mb-2">Connection Established</h3>
            <p class="text-lg text-gray-300 dark:text-gray-400 mb-4">You matched with <span class="font-semibold text-lime-400">Ayla_Xenon</span>. Sent an initial holo-greet.</p>
            <div class="flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-indigo-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> 2077-10-26</span>
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-indigo-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Ayla_Xenon">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-indigo-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="You">
              </div>
            </div>
          </div>
        </div>
        <div class="lg:w-1/2 flex items-center justify-start lg:pl-10 lg:text-left invisible lg:visible">
            <img class="w-full lg:max-w-xs xl:max-w-md h-auto rounded-lg shadow-lg border border-indigo-700 dark:border-indigo-600 object-cover" src="https://picsum.photos/400/250?random=1" alt="Match pic">
        </div>
      </div>

      <!-- Timeline Item 2 -->
      <div class="flex flex-col lg:flex-row lg:justify-start lg:even:flex-row w-full mb-12">
        <div class="lg:w-1/2 flex items-center justify-end lg:pr-10 lg:text-right invisible lg:visible">
            <img class="w-full lg:max-w-xs xl:max-w-md h-auto rounded-lg shadow-lg border border-pink-700 dark:border-pink-600 object-cover" src="https://picsum.photos/400/250?random=2" alt="First Chat">
        </div>
        <div class="lg:w-1/2 flex justify-start lg:pl-10">
          <div class="relative bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl dark:shadow-2xl border border-pink-700 dark:border-pink-600 w-full ml-8 lg:ml-0 lg:mr-0">
            <span class="absolute -left-3 top-6 h-6 w-6 rounded-full bg-pink-600 dark:bg-pink-500 border-4 border-gray-950 dark:border-gray-900 flex items-center justify-center text-white text-xs font-bold"></span>
            <div class="absolute hidden lg:block h-3 w-3 bg-pink-600 dark:bg-pink-500 rounded-full -left-1.5 top-8"></div>
            <h3 class="text-2xl font-bold text-orange-400 dark:text-orange-300 mb-2">First Data-Exchange</h3>
            <p class="text-lg text-gray-300 dark:text-gray-400 mb-4">Had a deep cyber-chat about singularity and synth-wave music.</p>
            <div class="flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-pink-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> 2077-10-28</span>
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-pink-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Ayla_Xenon">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-pink-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="You">
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Timeline Item 3 -->
      <div class="flex flex-col lg:flex-row lg:justify-start lg:odd:flex-row-reverse w-full mb-12">
        <div class="lg:w-1/2 flex justify-end lg:pr-10 lg:text-right">
          <div class="relative bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl dark:shadow-2xl border border-orange-700 dark:border-orange-600 w-full ml-8 lg:ml-0 lg:mr-0">
            <span class="absolute -left-3 top-6 h-6 w-6 rounded-full bg-orange-600 dark:bg-orange-500 border-4 border-gray-950 dark:border-gray-900 flex items-center justify-center text-white text-xs font-bold"></span>
            <div class="absolute hidden lg:block h-3 w-3 bg-orange-600 dark:bg-orange-500 rounded-full -right-1.5 top-8"></div>
            <h3 class="text-2xl font-bold text-lime-400 dark:text-lime-300 mb-2">First IRL Meet-Up</h3>
            <p class="text-lg text-gray-300 dark:text-gray-400 mb-4">Met at the 'Neon Dreams' club. Had some synthetic sake.</p>
            <div class="flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-orange-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> 2077-11-03</span>
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-orange-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Ayla_Xenon">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-orange-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="You">
              </div>
            </div>
          </div>
        </div>
        <div class="lg:w-1/2 flex items-center justify-start lg:pl-10 lg:text-left invisible lg:visible">
            <img class="w-full lg:max-w-xs xl:max-w-md h-auto rounded-lg shadow-lg border border-orange-700 dark:border-orange-600 object-cover" src="https://picsum.photos/400/250?random=3" alt="Neon Club">
        </div>
      </div>

      <!-- Timeline Item 4 -->
      <div class="flex flex-col lg:flex-row lg:justify-start lg:even:flex-row w-full mb-12">
        <div class="lg:w-1/2 flex items-center justify-end lg:pr-10 lg:text-right invisible lg:visible">
            <img class="w-full lg:max-w-xs xl:max-w-md h-auto rounded-lg shadow-lg border border-lime-700 dark:border-lime-600 object-cover" src="https://picsum.photos/400/250?random=4" alt="Synth Concert">
        </div>
        <div class="lg:w-1/2 flex justify-start lg:pl-10">
          <div class="relative bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-xl dark:shadow-2xl border border-lime-700 dark:border-lime-600 w-full ml-8 lg:ml-0 lg:mr-0">
            <span class="absolute -left-3 top-6 h-6 w-6 rounded-full bg-lime-600 dark:bg-lime-500 border-4 border-gray-950 dark:border-gray-900 flex items-center justify-center text-white text-xs font-bold"></span>
            <div class="absolute hidden lg:block h-3 w-3 bg-lime-600 dark:bg-lime-500 rounded-full -left-1.5 top-8"></div>
            <h3 class="text-2xl font-bold text-indigo-400 dark:text-indigo-300 mb-2">Shared Neural-Link</h3>
            <p class="text-lg text-gray-300 dark:text-gray-400 mb-4">Synchronized neural implants to experience a synth-pop concert.</p>
            <div class="flex items-center justify-between text-sm text-gray-400 dark:text-gray-500">
              <span class="flex items-center"><svg class="w-4 h-4 mr-1 text-lime-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg> 2077-11-15</span>
              <div class="flex -space-x-2 overflow-hidden">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Ayla_Xenon">
                <img class="inline-block h-8 w-8 rounded-full ring-2 ring-lime-500" src="https://randomuser.me/api/portraits/men/1.jpg" alt="You">
              </div>
            </div>
          </div>
        </div>
      </div>


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

インタラクティブコンポーネントコンポーネント

MemphisデザインスタイルのCRM/Business Toolsコンポーネントで、単色のカラースキーム、インタラクティブ要素、ダークモードのサポートが特徴です。大胆な色、幾何学的な形、遊び心のあるパターンで、適度な複雑さを考慮して設計されています。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-purple-100 to-purple-200 dark:from-purple-950 dark:to-purple-800 p-4 sm:p-6 md:p-8 flex items-center justify-center font-sans">
  <div class="relative w-full max-w-5xl bg-white dark:bg-purple-900 rounded-3xl shadow-xl overflow-hidden
    border-4 border-purple-500 dark:border-purple-600
    after:absolute after:inset-0 after:z-0 after:pointer-events-none
    after:bg-gradient-to-tr after:from-purple-300/[0.3] dark:after:from-purple-700/[0.3]
    after:to-yellow-300/[0.1] dark:after:to-teal-700/[0.1]
    after:bg-[length:200%_200%] after:animate-memphis-pattern">

    <!-- Memphis Design elements (absolute positioning for playfulness but behind content) -->
    <div class="absolute top-0 left-0 w-24 h-24 bg-purple-300 dark:bg-purple-700 rounded-br-full -translate-x-8 -translate-y-8 blur-lg opacity-30"></div>
    <div class="absolute bottom-0 right-0 w-32 h-32 bg-yellow-200 dark:bg-amber-600 rounded-tl-full translate-x-8 translate-y-8 blur-lg opacity-30"></div>
    <div class="absolute top-1/4 right-5 w-16 h-16 bg-blue-200 dark:bg-blue-700 rounded-full opacity-20 transform rotate-45"></div>
    <div class="absolute bottom-1/3 left-5 w-20 h-10 bg-pink-200 dark:bg-pink-700 rounded-xl opacity-20 transform -rotate-30"></div>

    <!-- Content Wrapper -->
    <div class="relative z-10 p-6 sm:p-8 md:p-12">
      <div class="flex flex-col md:flex-row gap-8">
        <!-- Left Column: Primary Information & Call to Action -->
        <div class="flex-1 flex flex-col gap-6">
          <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold text-purple-800 dark:text-purple-100 leading-tight tracking-tighter">
            Streamline Your <br class="hidden sm:inline"/>Customer Interactions.
          </h2>
          <p class="text-lg text-purple-700 dark:text-purple-200 leading-relaxed">
            Gain clear insights, automate workflows, and build stronger relationships with our intuitive CRM tools.
          </p>

          <div class="flex items-center gap-4 group mt-4">
            <button class="px-6 py-3 bg-purple-600 hover:bg-purple-700 active:scale-95 transition-all duration-200 ease-out
                           text-white font-semibold rounded-lg shadow-lg
                           dark:bg-purple-700 dark:hover:bg-purple-600 dark:text-purple-50
                           group-hover:translate-x-1 group-hover:-translate-y-1 group-hover:shadow-purple-400/[0.5]">
              Get Started Now
            </button>
            <a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-300 dark:hover:text-purple-100
                              font-medium flex items-center group-hover:underline transition-colors">
              Learn More
              <svg class="w-5 h-5 ml-1 transition-transform group-hover:translate-x-1" 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 5l7 7-7 7"></path></svg>
            </a>
          </div>

          <!-- Featured Customers/Logos -->
          <div class="mt-8">
            <p class="text-sm text-purple-500 dark:text-purple-400 font-medium uppercase tracking-wider mb-3">Trusted by:</p>
            <div class="flex flex-wrap gap-4 items-center">
              <img src="https://picsum.photos/id/237/80/40" alt="Client Logo 1" class="h-6 opacity-70 hover:opacity-100 transition-opacity dark:invert ease-out duration-200">
              <img src="https://picsum.photos/id/238/80/40" alt="Client Logo 2" class="h-7 opacity-70 hover:opacity-100 transition-opacity dark:invert ease-out duration-200">
              <img src="https://picsum.photos/id/239/80/40" alt="Client Logo 3" class="h-6 opacity-70 hover:opacity-100 transition-opacity dark:invert ease-out duration-200">
            </div>
          </div>
        </div>

        <!-- Right Column: Interactive Elements (Tabs/Accordion) -->
        <div class="flex-1 flex flex-col gap-4 bg-purple-50 dark:bg-purple-800 p-5 sm:p-6 rounded-2xl shadow-inner
          border border-dotted border-purple-300 dark:border-purple-700">
          <h3 class="text-xl sm:text-2xl font-bold text-purple-700 dark:text-purple-200 mb-2">Key Features</h3>

          <!-- Feature Item 1 -->
          <div class="group cursor-pointer bg-purple-100 dark:bg-purple-850 p-4 rounded-xl transition-all duration-300 ease-out
                      hover:bg-purple-200 dark:hover:bg-purple-700 hover:shadow-md">
            <div class="flex items-center justify-between">
              <h4 class="text-lg font-semibold text-purple-800 dark:text-purple-100">Unified Dashboard</h4>
              <svg class="w-6 h-6 text-purple-500 dark:text-purple-400 group-hover:text-purple-600 dark:group-hover:text-purple-200 transition-transform group-[.active]:rotate-90" 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 5l7 7-7 7"></path></svg>
            </div>
            <p class="text-purple-600 dark:text-purple-300 text-sm mt-2 opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out group-[.active]:opacity-100 group-[.active]:max-h-24">
              Get a 360-degree view of your customer interactions, sales pipeline, and marketing efforts in real-time.
            </p>
          </div>

          <!-- Feature Item 2 -->
          <div class="group cursor-pointer bg-purple-100 dark:bg-purple-850 p-4 rounded-xl transition-all duration-300 ease-out
                      hover:bg-purple-200 dark:hover:bg-purple-700 hover:shadow-md">
            <div class="flex items-center justify-between">
              <h4 class="text-lg font-semibold text-purple-800 dark:text-purple-100">Automated Workflows</h4>
              <svg class="w-6 h-6 text-purple-500 dark:text-purple-400 group-hover:text-purple-600 dark:group-hover:text-purple-200 transition-transform group-[.active]:rotate-90" 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 5l7 7-7 7"></path></svg>
            </div>
            <p class="text-purple-600 dark:text-purple-300 text-sm mt-2 opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out group-[.active]:opacity-100 group-[.active]:max-h-24">
              Set up automated email sequences, task assignments, and lead nurturing processes to save time.
            </p>
          </div>

          <!-- Feature Item 3 -->
          <div class="group cursor-pointer bg-purple-100 dark:bg-purple-850 p-4 rounded-xl transition-all duration-300 ease-out
                      hover:bg-purple-200 dark:hover:bg-purple-700 hover:shadow-md">
            <div class="flex items-center justify-between">
              <h4 class="text-lg font-semibold text-purple-800 dark:text-purple-100">Advanced Analytics</h4>
              <svg class="w-6 h-6 text-purple-500 dark:text-purple-400 group-hover:text-purple-600 dark:group-hover:text-purple-200 transition-transform group-[.active]:rotate-90" 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 5l7 7-7 7"></path></svg>
            </div>
            <p class="text-purple-600 dark:text-purple-300 text-sm mt-2 opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out group-[.active]:opacity-100 group-[.active]:max-h-24">
              Leverage powerful reporting tools to identify trends, measure campaign effectiveness, and optimize strategies.
            </p>
          </div>

          <!-- Feature Item 4 -->
          <div class="group cursor-pointer bg-purple-100 dark:bg-purple-850 p-4 rounded-xl transition-all duration-300 ease-out
                      hover:bg-purple-200 dark:hover:bg-purple-700 hover:shadow-md">
            <div class="flex items-center justify-between">
              <h4 class="text-lg font-semibold text-purple-800 dark:text-purple-100">Integrated Communication</h4>
              <svg class="w-6 h-6 text-purple-500 dark:text-purple-400 group-hover:text-purple-600 dark:group-hover:text-purple-200 transition-transform group-[.active]:rotate-90" 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 5l7 7-7 7"></path></svg>
            </div>
            <p class="text-purple-600 dark:text-purple-300 text-sm mt-2 opacity-0 max-h-0 overflow-hidden transition-all duration-300 ease-in-out group-[.active]:opacity-100 group-[.active]:max-h-24">
              Communicate seamlessly with customers across multiple channels right from your CRM platform.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- To make the accordion-like functionality work without JS, you'd typically need radio buttons/checkboxes or actual JS. -->
<!-- For this example, I'm adding a simple CSS animation with a placeholder '.active' class -->
<!-- Actual implementation requires JavaScript to toggle the 'active' class on click. -->

<style>
/* Animated Memphis Pattern background */
@keyframes memphis-pattern {
  0% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* Example of how you'd toggle an active state for accordion-like behavior with JS */
/* This CSS will define the open state, JS adds/removes the 'active' class */
.group.active .max-h-0 {
  max-height: 96px; /* A safe height for the text content */
  opacity: 1;
}
.group.active svg {
    transform: rotate(90deg);
}
</style>

1 ... 15 16 17 18 19 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント