検索コンポーネント

すべてのコンポーネント

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

ファイルビューアコンポーネント

ダークモードUIとアースカラーを備えた、スポーツ/フィットネスアプリケーション向けに設計された、複雑でレスポンシブなファイルビューアコンポーネント。機能ファイルのリスト、プレビュー、詳細セクション。

                <div class="dark:bg-stone-900 bg-stone-800 text-stone-300 min-h-screen p-4 sm:p-6 lg:p-8 font-sans antialiased">

  <!-- Main Grid Container -->
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 lg:gap-6">

    <!-- Left Column: File List -->
    <div class="lg:col-span-1 bg-stone-900 dark:bg-stone-950 rounded-lg shadow-xl overflow-hidden">
      <div class="p-4 sm:p-5 border-b border-stone-700 dark:border-stone-800 flex items-center justify-between">
        <h2 class="text-lg sm:text-xl font-semibold text-stone-200">Documents & Media</h2>
        <button class="p-2 rounded-full border border-stone-600 text-stone-400 hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M3 3a1 1 0 011-1h12a1 1 0 011 1v3a1 1 0 01-1 1H4a1 1 0 01-1-1V3zm0 7a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zm10 0a1 1 0 011-1h3a1 1 0 011 1v6a1 1 0 01-1 1h-3a1 1 0 01-1-1v-6z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>

      <div class="p-4 sm:p-5 space-y-3">
        <!-- Search Bar -->
        <div class="relative">
          <input type="text" placeholder="Search files..." class="w-full p-2 pl-10 rounded-md bg-stone-800 dark:bg-stone-900 border border-stone-700 dark:border-stone-800 focus:outline-none focus:ring-1 focus:ring-amber-600 text-stone-200 placeholder-stone-400">
          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-stone-500" viewBox="0 0 20 20" fill="currentColor">
              <path fill-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" clip-rule="evenodd" />
            </svg>
          </div>
        </div>

        <!-- File Categories -->
        <div class="space-y-2">
          <a href="#" class="flex items-center justify-between p-3 rounded-md bg-stone-700 dark:bg-stone-800 hover:bg-stone-600 dark:hover:bg-stone-700 transition-colors duration-200">
            <span class="text-stone-100 font-medium flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-orange-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.414L14.586 5A2 2 0 0115 5.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd" /></svg> Documents</span>
            <span class="text-sm text-stone-400">124</span>
          </a>
          <a href="#" class="flex items-center justify-between p-3 rounded-md hover:bg-stone-700 dark:hover:bg-stone-800 transition-colors duration-200">
            <span class="text-stone-300 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-green-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 7a2 2 0 012-2h8a2 2 0 012 2v6a2 2 0 01-2 2H6a2 2 0 01-2-2V7zm5 0a1 1 0 011-1h1a1 1 0 110 2H9a1 1 0 01-1-1zm0 4a1 1 0 011-1h1a1 1 0 110 2H9a1 1 0 01-1-1z" clip-rule="evenodd" /></svg> Videos</span>
            <span class="text-sm text-stone-400">32</span>
          </a>
          <a href="#" class="flex items-center justify-between p-3 rounded-md hover:bg-stone-700 dark:hover:bg-stone-800 transition-colors duration-200">
            <span class="text-stone-300 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-blue-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd" /></svg> Images</span>
            <span class="text-sm text-stone-400">210</span>
          </a>
          <a href="#" class="flex items-center justify-between p-3 rounded-md hover:bg-stone-700 dark:hover:bg-stone-800 transition-colors duration-200">
            <span class="text-stone-300 flex items-center"><svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2 text-fuchsia-400" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm4 0a1 1 0 012 0v6a1 1 0 11-2 0V8z" clip-rule="evenodd" /></svg> Audio</span>
            <span class="text-sm text-stone-400">45</span>
          </a>
        </div>
      </div>
    </div>

    <!-- Right Column: File Preview & Details -->
    <div class="lg:col-span-2 space-y-4 lg:space-y-6">

      <!-- Top Section: Preview -->
      <div class="bg-stone-900 dark:bg-stone-950 rounded-lg shadow-xl overflow-hidden">
        <div class="p-4 sm:p-5 border-b border-stone-700 dark:border-stone-800 flex items-center justify-between">
          <h2 class="text-lg sm:text-xl font-semibold text-stone-200">Preview</h2>
          <div class="flex space-x-2">
            <button class="p-2 rounded-full border border-stone-600 text-stone-400 hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M8 4a3 3 0 00-3 3v4a5 5 0 0010 0V7a1 1 0 112 0v4a7 7 0 11-14 0V7a5 5 0 0110 0v4a3 3 0 11-6 0V7a1 1 0 012 0v4a1 1 0 102 0V7a3 3 0 00-3-3z" clip-rule="evenodd" />
              </svg>
            </button>
            <button class="p-2 rounded-full border border-stone-600 text-stone-400 hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            </button>
          </div>
        </div>

        <div class="p-4 sm:p-5 aspect-w-16 aspect-h-9 flex items-center justify-center bg-stone-800 dark:bg-stone-900 overflow-hidden">
          <!-- Placeholder for file preview -->
          <img src="https://picsum.photos/1280/720?random=1" alt="File preview" class="object-contain max-h-full max-w-full rounded-md shadow-md">
        </div>
      </div>

      <!-- Bottom Section: File Details -->
      <div class="bg-stone-900 dark:bg-stone-950 rounded-lg shadow-xl overflow-hidden">
        <div class="p-4 sm:p-5 border-b border-stone-700 dark:border-stone-800">
          <h2 class="text-lg sm:text-xl font-semibold text-stone-200">File Details</h2>
        </div>

        <div class="p-4 sm:p-5 grid grid-cols-1 md:grid-cols-2 gap-4 text-stone-300">
          <div>
            <p class="text-stone-400 text-sm mb-1">File Name</p>
            <p class="text-stone-200 font-medium text-lg">Fitness-Plan-2023-Q3.pdf</p>
          </div>
          <div>
            <p class="text-stone-400 text-sm mb-1">Category</p>
            <p class="text-stone-200 font-medium text-lg">Documents</p>
          </div>
          <div>
            <p class="text-stone-400 text-sm mb-1">Size</p>
            <p class="text-stone-200 font-medium text-lg">2.4 MB</p>
          </div>
          <div>
            <p class="text-stone-400 text-sm mb-1">Last Modified</p>
            <p class="text-stone-200 font-medium text-lg">2023-09-15 10:30 AM</p>
          </div>
          <div class="md:col-span-2">
            <p class="text-stone-400 text-sm mb-1">Description</p>
            <p class="text-stone-300 leading-relaxed text-sm">This document contains the comprehensive fitness plan for the third quarter of 2023, including workout routines, nutrition guidelines, and progress tracking templates for peak athletic performance.</p>
          </div>

          <!-- Shared With -->
          <div class="md:col-span-2 mt-4">
            <h3 class="text-md font-semibold text-stone-200 mb-2">Shared With</h3>
            <div class="flex flex-wrap gap-3">
              <div class="flex items-center space-x-2 bg-stone-800 dark:bg-stone-900 py-1.5 px-3 rounded-full border border-stone-700">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of Athlete" class="w-6 h-6 rounded-full object-cover">
                <span class="text-stone-300 text-sm">John Doe (Athlete)</span>
              </div>
              <div class="flex items-center space-x-2 bg-stone-800 dark:bg-stone-900 py-1.5 px-3 rounded-full border border-stone-700">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Coach" class="w-6 h-6 rounded-full object-cover">
                <span class="text-stone-300 text-sm">Jane Smith (Coach)</span>
              </div>
              <div class="flex items-center space-x-2 bg-stone-800 dark:bg-stone-900 py-1.5 px-3 rounded-full border border-stone-700">
                <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar of Team Manager" class="w-6 h-6 rounded-full object-cover">
                <span class="text-stone-300 text-sm">Mike Brown (Manager)</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

</div>

ネオンダッシュボードモーダル

ネオン/グロー効果、秋の色、ダークモードのサポート、インタラクティブ要素を使用した、複雑で応答性の高いダッシュボードモーダル。データの視覚化とコントロールパネル用に設計されています。

開けるプレビュー

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 backdrop-blur-sm dark:bg-black dark:bg-opacity-85">
    <div class="relative w-full max-w-4xl p-8 overflow-hidden rounded-lg shadow-xl bg-gradient-to-br from-orange-800 to-red-900 ring-4 ring-orange-400/50 dark:from-orange-900 dark:to-red-950 dark:ring-red-700/60 transition-all duration-300 transform scale-95 opacity-0 animate-scale-in glow-effect-container">
        <style>
            @keyframes scale-in {
                from { transform: scale(0.95); opacity: 0; }
                to { transform: scale(1); opacity: 1; }
            }
            .animate-scale-in {
                animation: scale-in 0.3s ease-out forwards;
            }
            .glow-effect-container::before {
                content: '';
                position: absolute;
                top: -10px;
                left: -10px;
                right: -10px;
                bottom: -10px;
                border-radius: 12px; /* Slightly larger than element's border-radius */
                background: conic-gradient(from var(--angle), #fb923c, #f97316, #ea580c, #c2410c, #b45309, #fb923c);
                background-size: 200% 200%;
                filter: blur(15px);
                z-index: -1;
                animation: rotate 4s linear infinite;
                opacity: 0.7;
            }
            .dark .glow-effect-container::before {
                background: conic-gradient(from var(--angle), #ef4444, #dc2626, #b91c1c, #991b1b, #7f1d1d, #ef4444);
            }
            @keyframes rotate {
                to { --angle: 360deg; }
            }
            @property --angle {
                syntax: '<angle>';
                inherits: false;
                initial-value: 0deg;
            }
        </style>
        <button class="absolute top-4 right-4 text-orange-200 hover:text-orange-100 dark:text-red-300 dark:hover:text-red-200 transition-colors focus:outline-none focus:ring-2 focus:ring-orange-300 dark:focus:ring-red-400 rounded-full p-2">
            <svg class="w-8 h-8" 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="M6 18L18 6M6 6l12 12"></path>
            </svg>
        </button>

        <h2 class="mb-6 text-4xl font-extrabold text-orange-100 drop-shadow-lg text-center dark:text-red-100 sm:text-5xl">
            Dashboard Insights <span class="text-orange-300 dark:text-red-200">Overview</span>
        </h2>

        <div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
            <!-- Card 1: Sales Performance -->
            <div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">Sales Performance</h3>
                    <svg class="w-10 h-10 text-orange-300 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8L13 17.5M4 16l3-3m0 0l3-3m-3 3l-3 3M17 14l-3-3m0 0l-3-3m3 3l-3 3"></path></svg>
                </div>
                <p class="text-5xl font-extrabold text-orange-200 dark:text-red-300 drop-shadow-md mb-2">$15.2K</p>
                <p class="text-orange-300 dark:text-red-400">+12% from last month</p>
                <div class="w-full h-2 mt-4 rounded-full bg-orange-600 dark:bg-red-800 overflow-hidden">
                    <div class="h-full rounded-full bg-orange-300 dark:bg-red-500 w-3/4"></div>
                </div>
            </div>

            <!-- Card 2: User Engagement -->
            <div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">User Engagement</h3>
                    <svg class="w-10 h-10 text-orange-300 dark:text-red-400" 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="M17 20h5v-5a3 3 0 00-3-3H6a3 3 0 00-3 3v5h5M7 13v-3a2 2 0 012-2h4a2 2 0 012 2v3m7 0l2 2m-2-2l-2-2m2 2L13 9.5"></path></svg>
                </div>
                <p class="text-5xl font-extrabold text-orange-200 dark:text-red-300 drop-shadow-md mb-2">2.8K</p>
                <p class="text-orange-300 dark:text-red-400">+5% new sign-ups</p>
                <div class="flex items-center mt-4">
                    <img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 mr-2" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 1">
                    <img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 -ml-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User 2">
                    <img class="w-8 h-8 rounded-full border-2 border-orange-400 dark:border-red-600 -ml-3" src="https://randomuser.me/api/portraits/men/19.jpg" alt="User 3">
                    <span class="ml-2 text-orange-200 dark:text-red-300">+15 more</span>
                </div>
            </div>

            <!-- Card 3: Traffic Sources -->
            <div class="p-6 rounded-lg bg-orange-700/60 backdrop-blur-sm shadow-lg ring-2 ring-orange-500/50 dark:bg-red-900/60 dark:ring-red-700/50 transition-all duration-300 hover:scale-[1.02] hover:ring-orange-400 dark:hover:ring-red-600">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-2xl font-bold text-orange-100 dark:text-red-200">Traffic Sources</h3>
                    <svg class="w-10 h-10 text-orange-300 dark:text-red-400" 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="M7 12l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18 9 9 0 010-18z"></path></svg>
                </div>
                <ul class="text-orange-200 dark:text-red-300 space-y-2 text-lg">
                    <li class="flex justify-between">Direct <span class="font-semibold">40%</span></li>
                    <li class="flex justify-between">Search <span class="font-semibold">30%</span></li>
                    <li class="flex justify-between">Referral <span class="font-semibold">20%</span></li>
                    <li class="flex justify-between">Social <span class="font-semibold">10%</span></li>
                </ul>
            </div>
        </div>

        <!-- Action Buttons -->
        <div class="flex flex-col sm:flex-row justify-end mt-8 gap-4">
            <button class="px-8 py-3 rounded-full font-bold text-lg text-orange-100 bg-orange-600 hover:bg-orange-700 ring-2 ring-orange-400 hover:ring-orange-300 dark:bg-red-800 dark:hover:bg-red-900 dark:ring-red-700 dark:hover:ring-red-600 transition-all duration-300 shadow-lg neon-button">
                View Full Report
            </button>
            <button class="px-8 py-3 rounded-full font-bold text-lg text-orange-900 bg-orange-300 hover:bg-orange-200 ring-2 ring-orange-200 hover:ring-orange-100 dark:text-red-900 dark:bg-red-400 dark:hover:bg-red-300 dark:ring-red-300 dark:hover:ring-red-200 transition-all duration-300 shadow-lg neon-button">
                Customize Dashboard
            </button>
            <style>
                .neon-button {
                    box-shadow: 0 0 5px rgba(251, 146, 60, 0.7), 0 0 15px rgba(251, 146, 60, 0.5), 0 0 30px rgba(251, 146, 60, 0.3);
                }
                .dark .neon-button {
                    box-shadow: 0 0 5px rgba(239, 68, 68, 0.7), 0 0 15px rgba(239, 68, 68, 0.5), 0 0 30px rgba(239, 68, 68, 0.3);
                }
                .neon-button:hover {
                    transform: scale(1.03);
                    box-shadow: 0 0 8px rgba(251, 146, 60, 0.9), 0 0 20px rgba(251, 146, 60, 0.7), 0 0 40px rgba(251, 146, 60, 0.5);
                }
                .dark .neon-button:hover {
                    box-shadow: 0 0 8px rgba(239, 68, 68, 0.9), 0 0 20px rgba(239, 68, 68, 0.7), 0 0 40px rgba(239, 68, 68, 0.5);
                }
            </style>
        </div>
    </div>
</div>

フッターコンポーネント - Swiss Pastel Consulting

スイスのデザインの影響を受けた、すっきりとしたミニマリストでレスポンシブなフッターコンポーネントで、パステルカラーとクリアなタイポグラフィが特徴で、コンサルティング/サービスWebサイトに適しています。ダークモードのサポートが含まれています。

開けるプレビュー

                <footer class="bg-violet-50 text-violet-800 dark:bg-gray-800 dark:text-gray-200 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-4 gap-8 informational-footer">
    <!-- About Section -->
    <div class="col-span-1 md:col-span-2 lg:col-span-1">
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">About Us</h3>
      <p class="text-sm leading-relaxed mb-4">Providing expert consulting services to help your business thrive. Our approach is rooted in precision, clarity, and measurable results.</p>
      <div class="flex space-x-4">
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.315 2c2.43 0 2.784.002 3.797.048 1.05.056 1.62.231 2.062.409.54.225.9-.475 1.706-1.129 1.16-.677 2.1-1.42 2.574-2.834.786-.289.479-.933.864-1.178.683-.437 1.26-.931 1.785-1.465.526-.534.981-1.077 1.341-1.58.36-.502 1.4-1.745 1.4-1.745s-.192-.613-.192-1.242V8.91c0-2.427-4.997-2.738-4.997-2.738v0h12.518V9.1h6.623V4.492c0-.527-.427-.954-.954-.954H2c-.527 0-.954.427-.954.954V19.508c0,.527.427.954.954.954h20c.527 0 .954-.427.954-.954h.001ZM12 4.41c-4.148 0-7.51 3.362-7.51 7.51s3.362 7.51 7.51 7.51 7.51-3.362 7.51-7.51-3.362-7.51-7.51-7.51Zm0 12.235c-2.612 0-4.725-2.113-4.725-4.725S9.388 7.185 12 7.185s4.725 2.113 4.725 4.725-2.113 4.725-4.725 4.725Z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="text-violet-600 hover:text-violet-800 dark:text-violet-400 dark:hover:text-violet-200 transition-colors duration-200">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M8.29 20.89c-.58 0-1.05-.47-1.05-1.05v-5.69c0-.58.47-1.05 1.05-1.05h1.2v1.5H8.29v4.19h8.22v-4.19h-1.2v-1.5h1.2c.58 0 1.05.47 1.05 1.05v5.69c0 .58-.47 1.05-1.05 1.05H8.29zM12 2c-5.52 0-10 4.48-10 10s4.48 10 10 10 10-4.48 10-10-4.48-10-10-10zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-4.75-9.21H8c.28-.48.65-.92 1.08-1.3l-1.33-1.33c-.45.45-.85.95-1.2 1.48zm-1.89-1.89h1.77L12 4.14 17.58 9.5h1.77L12 2zM12 10.5c-1.38 0-2.5 1.12-2.5 2.5s1.12 2.5 2.5 2.5 2.5-1.12 2.5-2.5-1.12-2.5-2.5-2.5zm0 3.5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1z"/>
          </svg>
        </a>
      </div>
    </div>

    <!-- Services Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Our Services</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Strategy Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Operations Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Technology Consulting</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Financial Advisory</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Market Research</a></li>
      </ul>
    </div>

    <!-- Quick Links Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Quick Links</h3>
      <ul class="space-y-2 text-sm">
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Home</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">About Us</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Services</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Blog</a></li>
        <li><a href="#" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">Contact</a></li>
      </ul>
    </div>

    <!-- Contact Info Section -->
    <div>
      <h3 class="text-lg font-semibold mb-4 text-violet-700 dark:text-violet-300">Contact Us</h3>
      <div class="space-y-2 text-sm">
        <p>123 Consulting Rd<br>Suite 100, Business City<br>BC 12345, Country</p>
        <p><a href="tel:+1234567890" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">+1 (234) 567-890</a></p>
        <p><a href="mailto:[email protected]" class="hover:text-violet-600 dark:hover:text-violet-400 transition-colors duration-200">[email protected]</a></p>
        <p>
          <img src="https://picsum.photos/id/1084/100/60" alt="Office map placeholder" class="w-full max-w-xs h-auto rounded-md shadow-sm mt-4 object-cover">
        </p>
      </div>
    </div>
  </div>

  <div class="border-t border-violet-200 dark:border-gray-700 mt-12 pt-8 text-center text-sm">
    <p>&copy; <time datetime="2023">2023</time> Consulting Firm. All rights reserved.</p>
  </div>
</footer>

3D_Real_Estate_Tooltip

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

開けるプレビュー

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

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

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

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


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

    </div>

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

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

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

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

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

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

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

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

Playful_Documentation_Columns_Component

遊び心のあるカラフルなドキュメント/Wiki コラムコンポーネントで、夕焼け/暖色系の色調、丸みを帯びた要素、ダークモードのサポートを備えています。すべてのデバイスで応答性を発揮するように設計されています。

開けるプレビュー

                <div class="font-sans antialiased bg-orange-50 dark:bg-gray-900 transition-colors duration-300 py-12 sm:py-16 lg:py-20">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="text-center mb-12 sm:mb-16 lg:mb-20">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-orange-700 dark:text-orange-300 mb-4 tracking-tight leading-tight">
        Explore Our Sunny Guides!
      </h2>
      <p class="text-lg sm:text-xl text-orange-600 dark:text-orange-400 max-w-2xl mx-auto">
        Dive into our vibrant collection of helpful articles and fun insights to brighten your day.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12">
      <!-- Column 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 p-6 sm:p-8 border-4 border-orange-200 dark:border-yellow-700">
        <div class="flex justify-center mb-6">
          <img src="https://picsum.photos/seed/docs1/300/200" alt="Getting Started" class="rounded-2xl w-full h-48 object-cover shadow-lg border-2 border-orange-300 dark:border-orange-500">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-orange-700 dark:text-orange-300 mb-3 text-center">
          Quick Start Guide
        </h3>
        <p class="text-orange-600 dark:text-orange-400 text-base sm:text-lg mb-6 text-center">
          Jump right in with our easy-to-follow guide for new adventurers.
        </p>
        <div class="flex justify-center">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-orange-500 hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 dark:focus:ring-offset-gray-900 transition-colors duration-200 group">
            Explore Now
            <svg class="ml-2 -mr-1 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Column 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 p-6 sm:p-8 border-4 border-yellow-200 dark:border-orange-700">
        <div class="flex justify-center mb-6">
          <img src="https://picsum.photos/seed/docs2/300/200" alt="Advanced Features" class="rounded-2xl w-full h-48 object-cover shadow-lg border-2 border-yellow-300 dark:border-yellow-500">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-yellow-700 dark:text-yellow-300 mb-3 text-center">
          Advanced Tricks
        </h3>
        <p class="text-yellow-600 dark:text-yellow-400 text-base sm:text-lg mb-6 text-center">
          Uncover the hidden gems and master the advanced functionalities.
        </p>
        <div class="flex justify-center">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-yellow-500 hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-500 dark:focus:ring-offset-gray-900 transition-colors duration-200 group">
            Learn More
            <svg class="ml-2 -mr-1 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>

      <!-- Column 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-2 p-6 sm:p-8 border-4 border-red-200 dark:border-red-700">
        <div class="flex justify-center mb-6">
          <img src="https://picsum.photos/seed/docs3/300/200" alt="Support & FAQs" class="rounded-2xl w-full h-48 object-cover shadow-lg border-2 border-red-300 dark:border-red-500">
        </div>
        <h3 class="text-2xl sm:text-3xl font-bold text-red-700 dark:text-red-300 mb-3 text-center">
          Support & Smiles
        </h3>
        <p class="text-red-600 dark:text-red-400 text-base sm:text-lg mb-6 text-center">
          Find answers to common questions and get a helping hand when you need it.
        </p>
        <div class="flex justify-center">
          <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-red-500 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 transition-colors duration-200 group">
            Get Help
            <svg class="ml-2 -mr-1 w-5 h-5 transform group-hover:translate-x-1 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L12.586 11H5a1 1 0 110-2h7.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

CAPTCHAコンポーネント - 水彩/アーティスティック

水彩画/芸術的なデザイン、高コントラストの配色、ダークモードのサポートを備えたシンプルで応答性の高いCAPTCHAコンポーネントで、製造/産業アプリケーションに適しています。

開けるプレビュー

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

  <div class="w-full max-w-sm rounded-lg shadow-xl overflow-hidden relative border border-solid border-gray-300 dark:border-gray-700
              bg-gradient-to-br from-blue-50 dark:from-blue-950 to-purple-50 dark:to-purple-950
              transform transition-all duration-300 hover:scale-[1.01]">

    <!-- Artistic Background Elements (simulated with layered divs and subtle effects) -->
    <div class="absolute inset-0 z-0 opacity-40 dark:opacity-20">
      <div class="absolute -top-10 -left-10 w-48 h-48 bg-blue-300 dark:bg-blue-700 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
      <div class="absolute -bottom-10 -right-10 w-48 h-48 bg-purple-300 dark:bg-purple-700 rounded-full mix-blend-multiply filter blur-xl opacity-70"></div>
      <div class="absolute top-1/4 left-1/4 w-32 h-32 bg-teal-200 dark:bg-teal-800 rounded-full mix-blend-multiply filter blur-lg opacity-60"></div>
    </div>

    <div class="relative z-10 p-8">
      <h2 class="text-2xl font-extrabold text-blue-900 dark:text-blue-200 mb-4 text-center tracking-tight leading-tight"
          style="font-family: 'Times New Roman', serif;">Security Check</h2>
      <p class="text-sm text-gray-700 dark:text-gray-300 mb-6 text-center leading-relaxed">
        To proceed, please verify you are human.
      </p>

      <div class="flex flex-col items-center mb-6">
        <!-- CAPTCHA Image Placeholder -->
        <div class="w-full aspect-video bg-gray-200 dark:bg-gray-700 rounded-md overflow-hidden border border-purple-400 dark:border-purple-600 shadow-md mb-4 flex items-center justify-center relative">
          <img src="https://picsum.photos/300/150?blur=5&random=1" alt="CAPTCHA Challenge" class="absolute inset-0 w-full h-full object-cover filter brightness-75 dark:brightness-50 opacity-80">
          <span class="relative z-10 text-3xl font-bold italic text-white dark:text-gray-200 tracking-wider select-none transform -rotate-3 blur-[0.7px]">
            A0bK9x
          </span>
        </div>

        <button class="flex items-center text-sm font-medium text-blue-700 dark:text-blue-300 hover:text-blue-900 dark:hover:text-blue-100 transition duration-200 ease-in-out">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4 2a1 1 0 011 1v2.101a7.002 7 0 0116 0V3a1 1 0 112 0v2.101a7.002 7 0 01-16 0V3a1 1 0 011-1zm6 4a4 4 0 100 8a4 4 0 000-8zm0 2a2 2 0 100 4 2 2 0 000-4z" clip-rule="evenodd" />
          </svg>
          Get a new challenge
        </button>
      </div>

      <form>
        <label for="captcha-input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 sr-only">Enter the characters</label>
        <input type="text" id="captcha-input" placeholder="Enter the characters above" class="w-full px-4 py-2 mb-4 text-gray-900 dark:text-white bg-white dark:bg-gray-800 border-2 border-purple-500 dark:border-purple-400 rounded-md shadow-sm
                focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 focus:border-transparent
                placeholder-gray-400 dark:placeholder-gray-500 transition duration-200 ease-in-out text-center tracking-wider font-semibold">

        <button type="submit" class="w-full py-2 px-4 rounded-md text-lg font-bold text-white shadow-lg
                bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 transition-all duration-300 ease-in-out
                focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900
                transform hover:scale-[1.02]">Verify</button>
      </form>
    </div>
  </div>
</div>

ボタンコンポーネント

紙/印刷物にインスパイアされたグレースケールデザインのシンプルで応答性の高いボタンコンポーネントは、教育プラットフォームに適しており、ライトモードとダークモードをサポートします。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-[200px] flex items-center justify-center font-sans">
  <div class="max-w-xl w-full mx-auto p-6 sm:p-8 md:p-10 bg-white dark:bg-gray-800 shadow-md rounded-lg border border-gray-200 dark:border-gray-700 leading-relaxed">
    <h2 class="text-2xl sm:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center tracking-tight leading-tight">
      Lesson Navigation
    </h2>
    <div class="flex flex-col sm:flex-row gap-4 sm:gap-6 justify-center">
      <button type="button" class="transition-all duration-300 ease-in-out
        flex-1 px-6 py-3 text-lg sm:text-xl font-semibold
        bg-white dark:bg-gray-700 text-gray-800 dark:text-gray-100
        border border-gray-300 dark:border-gray-600 rounded-md
        shadow-sm hover:shadow-md
        hover:bg-gray-50 dark:hover:bg-gray-600
        focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800
        active:bg-gray-100 dark:active:bg-gray-700/80
        whitespace-nowrap text-center
        relative group overflow-hidden">
        <span class="absolute inset-0 border-white dark:border-gray-800 border-2 rounded-md transform scale-105 group-hover:scale-100 transition-transform duration-300 ease-in-out opacity-0 group-hover:opacity-100"></span>
        Previous Lesson
      </button>
      <button type="button" class="transition-all duration-300 ease-in-out
        flex-1 px-6 py-3 text-lg sm:text-xl font-semibold
        bg-gray-800 dark:bg-gray-100 text-white dark:text-gray-900
        border border-gray-800 dark:border-gray-100 rounded-md
        shadow-md hover:shadow-lg
        hover:bg-gray-700 dark:hover:bg-gray-200
        focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-gray-800
        active:bg-gray-900 dark:active:bg-gray-300
        whitespace-nowrap text-center
        relative group overflow-hidden">
        <span class="absolute inset-0 border-gray-800 dark:border-gray-100 border-2 rounded-md transform scale-105 group-hover:scale-100 transition-transform duration-300 ease-in-out opacity-0 group-hover:opacity-100"></span>
        Next Lesson
      </button>
    </div>
    <div class="mt-6 sm:mt-8 text-center">
      <a href="#" class="inline-flex items-center text-base sm:text-lg font-medium text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors duration-200">
        <svg class="w-5 h-5 mr-2 -ml-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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
        View All Lessons
      </a>
    </div>
  </div>
</div>

製品比較コンポーネント

オーガニック/自然にインスパイアされたデザイン、補色配色、ダークモードサポート、スポーツ/フィットネスアプリケーション向けに調整された、複雑で応答性の高い製品比較コンポーネント。流れるようなラインと自然なフォルムが特徴。

開けるプレビュー

                <div class="bg-gradient-to-br from-green-50 to-blue-50 dark:from-gray-950 dark:to-teal-950 py-16 px-4 sm:px-6 lg:px-8 font-sans overflow-hidden">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center text-green-800 dark:text-green-300 mb-12 sm:mb-16 tracking-tight drop-shadow-lg leading-tight">
      Trophy Showdown: Choose Your Champion
    </h2>

    <div class="flex flex-col lg:flex-row lg:space-x-8 xl:space-x-12 items-stretch justify-center">

      <!-- Product 1: Elite Performance -->
      <div class="flex-1 w-full max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden mb-12 lg:mb-0 transform hover:scale-102 transition-transform duration-500 ease-in-out border-4 border-green-400 dark:border-green-600 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-green-100/50 to-blue-100/50 dark:from-gray-900/50 dark:to-teal-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl"></div>
        <div class="p-8 sm:p-10 relative z-10">
          <div class="text-center mb-8">
            <span class="inline-block bg-green-500 dark:bg-green-700 text-white text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wide mb-4 transform -rotate-3 hover:rotate-3 transition-transform duration-300">Elite Performance</span>
            <h3 class="text-3xl font-bold text-green-900 dark:text-green-200 mb-2 leading-tight">Apex Athlete Pro</h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg">Unleash your full potential.</p>
          </div>

          <div class="mb-8 relative flex justify-center items-center h-48 sm:h-64 overflow-hidden rounded-xl bg-gradient-to-br from-green-200 to-blue-200 dark:from-green-800 dark:to-blue-800">
            <img src="https://picsum.photos/400/300?random=1" alt="Apex Athlete Pro product image" class="w-full h-full object-cover object-center transform scale-100 group-hover:scale-105 transition-transform duration-700 ease-out rounded-xl blur-sm group-hover:blur-none">
            <div class="absolute inset-0 flex items-center justify-center">
              <svg class="w-16 h-16 text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-60 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </div>
          </div>

          <ul class="space-y-4 mb-10 text-gray-700 dark:text-gray-300 text-lg">
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Dynamic Bio-feedback System</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">AI-Powered Training Coach</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Hydro-Resistant Durability</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-green-500 dark:text-green-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">One Year Premium Subscription</span>
            </li>
          </ul>

          <div class="flex justify-center flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4 mb-8">
            <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar 1" class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 shadow-md transition-transform transform hover:scale-110" />
            <img src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar 2" class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 shadow-md transition-transform transform hover:scale-110 -ml-4" />
            <img src="https://randomuser.me/api/portraits/men/88.jpg" alt="User Avatar 3" class="w-12 h-12 rounded-full ring-2 ring-green-500 dark:ring-green-400 shadow-md transition-transform transform hover:scale-110 -ml-4" />
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-4">Trusted by 100K+ athletes.</span>
          </div>

          <button class="w-full flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-2xl text-white bg-green-600 hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-800 md:py-4 md:text-lg md:px-10 shadow-lg transform active:scale-95 transition-all duration-300 ease-out group-hover:scale-105 group-hover:-translate-y-1">
            Select Apex Pro
            <svg class="ml-3 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

      <!-- Comparison Connector -->
      <div class="flex justify-center items-center mx-auto text-center w-full lg:w-auto mb-12 lg:mb-0">
        <div class="w-24 h-24 lg:w-32 lg:h-32 bg-gradient-to-br from-green-300 to-blue-300 dark:from-green-700 dark:to-blue-700 rounded-full flex items-center justify-center text-white text-3xl font-bold border-4 border-white dark:border-gray-900 shadow-2xl animate-pulse flex-shrink-0">
          VS
        </div>
        <div class="hidden lg:block w-4 h-full bg-gradient-to-t from-green-400 to-blue-400 dark:from-green-600 dark:to-blue-600 rounded-full mx-4 xl:mx-8 shadow-inner"></div>
      </div>

      <!-- Product 2: Peak Challenger -->
      <div class="flex-1 w-full max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden transform hover:scale-102 transition-transform duration-500 ease-in-out border-4 border-blue-400 dark:border-blue-600 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-purple-100/50 to-orange-100/50 dark:from-gray-900/50 dark:to-orange-900/50 opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-3xl"></div>
        <div class="p-8 sm:p-10 relative z-10">
          <div class="text-center mb-8">
            <span class="inline-block bg-blue-500 dark:bg-blue-700 text-white text-xs font-semibold px-3 py-1 rounded-full uppercase tracking-wide mb-4 transform rotate-3 hover:-rotate-3 transition-transform duration-300">Peak Challenger</span>
            <h3 class="text-3xl font-bold text-blue-900 dark:text-blue-200 mb-2 leading-tight">Zenith Force Max</h3>
            <p class="text-gray-600 dark:text-gray-400 text-lg">Conquer new limits.</p>
          </div>
          
          <div class="mb-8 relative flex justify-center items-center h-48 sm:h-64 overflow-hidden rounded-xl bg-gradient-to-br from-blue-200 to-purple-200 dark:from-blue-800 dark:to-purple-800">
            <img src="https://picsum.photos/400/300?random=2" alt="Zenith Force Max product image" class="w-full h-full object-cover object-center transform scale-100 group-hover:scale-105 transition-transform duration-700 ease-out rounded-xl blur-sm group-hover:blur-none">
            <div class="absolute inset-0 flex items-center justify-center">
              <svg class="w-16 h-16 text-white text-opacity-80 dark:text-gray-300 dark:text-opacity-60 drop-shadow-lg" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>
            </div>
          </div>

          <ul class="space-y-4 mb-10 text-gray-700 dark:text-gray-300 text-lg">
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Advanced Calorie Tracking</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Real-time Heart Rate Monitoring</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Adaptive Workout Routines</span>
            </li>
            <li class="flex items-center group-hover:pl-2 transition-all duration-300">
              <svg class="h-6 w-6 text-blue-500 dark:text-blue-400 mr-3 shrink-0 transform group-hover:rotate-6 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              <span class="font-medium">Six Months Premium Subscription</span>
            </li>
          </ul>

          <div class="flex justify-center flex-col sm:flex-row items-center space-y-4 sm:space-y-0 sm:space-x-4 mb-8">
            <img src="https://randomuser.me/api/portraits/women/22.jpg" alt="User Avatar 4" class="w-12 h-12 rounded-full ring-2 ring-blue-500 dark:ring-blue-400 shadow-md transition-transform transform hover:scale-110" />
            <img src="https://randomuser.me/api/portraits/men/55.jpg" alt="User Avatar 5" class="w-12 h-12 rounded-full ring-2 ring-blue-500 dark:ring-blue-400 shadow-md transition-transform transform hover:scale-110 -ml-4" />
            <span class="text-sm text-gray-500 dark:text-gray-400 ml-4">Empowering 75K+ successes.</span>
          </div>

          <button class="w-full flex items-center justify-center px-8 py-4 border border-transparent text-base font-medium rounded-2xl text-white bg-blue-600 hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 md:py-4 md:text-lg md:px-10 shadow-lg transform active:scale-95 transition-all duration-300 ease-out group-hover:scale-105 group-hover:-translate-y-1">
            Choose Zenith Max
            <svg class="ml-3 -mr-1 h-5 w-5" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
          </button>
        </div>
      </div>

    </div>

    <div class="mt-20 text-center">
      <h3 class="text-3xl font-bold text-green-900 dark:text-green-300 mb-6">Need more detail?</h3>
      <p class="text-lg text-gray-700 dark:text-gray-400 max-w-2xl mx-auto mb-8">
        Dive deeper into the specifications with our comprehensive chart below or contact our sports tech experts for personalized advice.
      </p>
      <button class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-gradient-to-r from-green-500 to-blue-500 hover:from-green-600 hover:to-blue-600 dark:from-green-700 dark:to-blue-700 dark:hover:from-green-800 dark:hover:to-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-400 dark:focus:ring-green-600 transform hover:-translate-y-1 transition-all duration-300 ease-out">
        <svg class="-ml-1 mr-3 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
        View Full Comparison Chart
      </button>
    </div>

  </div>
</div>

3Dグレースケールスポーツフィットネスプログレスバー

スポーツやフィットネスのアプリケーション向けに設計された複雑な3Dグレースケールプログレスバーコンポーネントで、トレーニングの進行状況を奥行きと視覚的なエンゲージメントで表示します。ダークモードのサポートが含まれており、完全にレスポンシブです。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden animate-fade-in-up">
    <div class="p-6 sm:p-8 md:p-10">
      <h2 class="text-3xl sm:text-4xl font-extrabold text-gray-900 dark:text-white mb-6 text-center tracking-tight">Daily Training Progress</h2>

      <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-8">
        <!-- Overall Progress Section -->
        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
          <div class="relative z-10">
            <p class="text-sm uppercase font-bold text-gray-600 dark:text-gray-300 mb-2">Overall Goal</p>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Week 3/12 Training Cycle</h3>

            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-400 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 65%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <span class="absolute inset-0 flex items-center justify-center text-sm sm:text-base font-bold text-gray-900 dark:text-white mix-blend-difference">65% Complete</span>
            </div>

            <div class="mt-4 text-center">
              <button class="px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md shadow-lg transform transition duration-300 hover:scale-105 hover:bg-gray-900 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
                View Full Roadmap
              </button>
            </div>
          </div>
        </div>

        <!-- Daily Progress Section -->
        <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 relative overflow-hidden group">
          <div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
          <div class="relative z-10">
            <p class="text-sm uppercase font-bold text-gray-600 dark:text-gray-300 mb-2">Daily Target</p>
            <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Today's Session: Legs & Core</h3>

            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-8 sm:h-10 relative overflow-hidden shadow-inner">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-400 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 80%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <span class="absolute inset-0 flex items-center justify-center text-sm sm:text-base font-bold text-gray-900 dark:text-white mix-blend-difference">80% Done</span>
            </div>

            <div class="mt-4 text-center">
              <button class="px-4 py-2 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-900 font-semibold rounded-md shadow-lg transform transition duration-300 hover:scale-105 hover:bg-gray-900 dark:hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
                Log Workout
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- Individual Metrics Progress Bars -->
      <div class="mb-8">
        <h3 class="text-xl sm:text-2xl font-bold text-gray-900 dark:text-white mb-4 text-center">Key Performance Indicators</h3>
        <div class="space-y-6">

          <!-- Metric 1: Strength -->
          <div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
            <div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 75%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
                <span>Strength</span>
                <span>75%</span>
              </div>
            </div>
          </div>

          <!-- Metric 2: Endurance -->
          <div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
            <div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 85%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
                <span>Endurance</span>
                <span>85%</span>
              </div>
            </div>
          </div>

          <!-- Metric 3: Flexibility -->
          <div class="relative bg-gray-100 dark:bg-gray-700 rounded-full p-1 shadow-md shadow-inset-dark overflow-hidden">
            <div class="absolute inset-0 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-600 dark:to-gray-700 rounded-full transform -skew-y-3 blur-sm"></div>
            <div class="relative z-10 w-full bg-white dark:bg-gray-800 rounded-full h-10 shadow-inner overflow-hidden">
              <div class="absolute inset-0 bg-gradient-to-r from-gray-400 to-gray-500 dark:from-gray-500 dark:to-gray-600 rounded-full h-full transform transition-transform duration-1000 ease-out" style="width: 60%;">
                <div class="absolute inset-0 bg-white opacity-20 dark:bg-gray-900 dark:opacity-20 blend-overlay"></div>
              </div>
              <div class="absolute inset-0 flex items-center justify-between px-4 text-sm font-semibold text-gray-900 dark:text-white mix-blend-difference">
                <span>Flexibility</span>
                <span>60%</span>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- Call to Action / Next Steps -->
      <div class="text-center bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-lg relative overflow-hidden group">
        <div class="absolute -inset-1 bg-gradient-to-br from-gray-200 via-gray-300 to-gray-400 dark:from-gray-600 dark:via-gray-700 dark:to-gray-800 rounded-lg blur opacity-0 group-hover:opacity-100 transition duration-300 pointer-events-none"></div>
        <div class="relative z-10">
          <p class="text-gray-700 dark:text-gray-200 mb-4 text-lg">Ready for your next challenge?</p>
          <button class="bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 font-bold py-3 px-8 rounded-full text-lg shadow-xl uppercase tracking-wider transform transition duration-300 hover:scale-105 hover:bg-gray-700 dark:hover:bg-white focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-gray-400">
            Plan Next Workout
          </button>
        </div>
      </div>

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

<style>
  /* Custom utility for inner shadow, simulating 3D depth */
  .shadow-inset-dark {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 -2px 4px rgba(255, 255, 255, 0.1);
  }

  .dark .shadow-inset-dark {
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8), inset 0 -2px 4px rgba(255, 255, 255, 0.05);
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
  }

  .blend-overlay {
    mix-blend-mode: overlay;
  }
</style>

レーティングシステムコンポーネント

セピア/ブラウンの色調、ダークモードのサポート、マイクロインタラクションに焦点を当てたスタイリングを備えたシンプルで応答性の高い評価システムコンポーネントで、政府/公共サービスのWebサイトに適しています。

開けるプレビュー

                <div class="flex flex-col items-center justify-center p-6 bg-brown-50 dark:bg-stone-900 min-h-screen font-sans">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-white dark:bg-stone-800 transition-colors duration-300 transform hover:scale-105">
    <h2 class="text-2xl font-semibold text-stone-800 dark:text-stone-100 mb-4 text-center">Rate Our Service</h2>
    <p class="text-sm text-stone-600 dark:text-stone-300 mb-6 text-center">Your feedback helps us improve public services.</p>

    <div class="flex justify-center space-x-2 sm:space-x-4 mb-6">
      <!-- Star 1 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>
      
      <!-- Star 2 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>

      <!-- Star 3 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>

      <!-- Star 4 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>

      <!-- Star 5 -->
      <button class="peer group flex items-center justify-center w-12 h-12 sm:w-16 sm:h-16 rounded-full bg-stone-200 dark:bg-stone-700 hover:bg-amber-300 dark:hover:bg-amber-600 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-amber-500 transform hover:scale-110 active:scale-95">
        <svg class="w-7 h-7 sm:w-9 sm:h-9 text-stone-600 dark:text-stone-400 group-hover:text-amber-700 dark:group-hover:text-amber-200 transition-colors duration-200" fill="currentColor" viewBox="0 0 24 24">
          <path d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279L12 18.896l-7.416 3.931 1.48-8.279L.332 9.306l8.332-1.151L12 .587z"/>
        </svg>
      </button>
    </div>

    <button class="w-full py-3 rounded-md bg-stone-700 text-white dark:bg-amber-700 dark:text-stone-100 hover:bg-stone-800 dark:hover:bg-amber-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-stone-500 dark:focus:ring-amber-500 transform hover:scale-105 active:scale-95">
      Submit Rating
    </button>
  </div>
</div>

1 ... 14 15 16 17 18 ... 315

検索コンポーネント

カテゴリ

すべてのコンポーネント