検索コンポーネント

カテゴリ

カード

関連情報を含む長方形のコンテナ

Skeuomorphic_Crypto_Cards

暗号通貨またはブロックチェーンアプリケーション用に設計されたレスポンシブでスキューモーフィックなカードのセット。パステルカラー、微妙なシャドウとハイライト、ダークモードのサポートが特徴です。

                <div class="p-4 sm:p-8 bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 min-h-screen dark:from-gray-900 dark:via-gray-800 dark:to-gray-700 flex flex-col items-center justify-center font-sans">

  <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-gray-800 mb-10 text-center tracking-tight drop-shadow-lg dark:text-gray-100">
    <span class="block">Crypto Portfolio</span>
    <span class="block text-2xl sm:text-3xl text-gray-600 dark:text-gray-300 font-medium mt-2">Your Digital Assets</span>
  </h1>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 w-full max-w-6xl">

    <!-- Card 1: Bitcoin -->
    <div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
      <div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
      <div class="flex items-center mb-4">
        <img src="https://www.picsum.photos/id/60/60" alt="Bitcoin Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
        <h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Bitcoin</h2>
      </div>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The first and most well-known cryptocurrency.</p>
      <div class="grid grid-cols-2 gap-2 text-sm mb-4">
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Price:</span>
          <span class="block text-pink-600 dark:text-pink-400 font-bold text-lg">$65,432.10</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Change (24h):</span>
          <span class="block text-green-600 dark:text-green-400 font-bold text-lg">+3.15%</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Holdings:</span>
          <span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">0.5 BTC</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Value:</span>
          <span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$32,716.05</span>
        </div>
      </div>
      <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-pink-400 to-purple-500 shadow-lg shadow-purple-300/50 dark:shadow-purple-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-pink-500 active:to-purple-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
        <span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade Bitcoin</span>
        <span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
      </button>
    </div>

    <!-- Card 2: Ethereum -->
    <div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
      <div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
      <div class="flex items-center mb-4">
        <img src="https://www.picsum.photos/id/65/60" alt="Ethereum Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
        <h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">Ethereum</h2>
      </div>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The decentralized platform for smart contracts.</p>
      <div class="grid grid-cols-2 gap-2 text-sm mb-4">
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Price:</span>
          <span class="block text-teal-600 dark:text-teal-400 font-bold text-lg">$3,456.78</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Change (24h):</span>
          <span class="block text-red-600 dark:text-red-400 font-bold text-lg">-1.50%</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Holdings:</span>
          <span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">3.0 ETH</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Value:</span>
          <span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$10,370.34</span>
        </div>
      </div>
      <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-green-400 to-teal-500 shadow-lg shadow-teal-300/50 dark:shadow-teal-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-green-500 active:to-teal-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
        <span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade Ethereum</span>
        <span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
      </button>
    </div>

    <!-- Card 3: BNB -->
    <div class="relative flex flex-col justify-between p-6 rounded-3xl backdrop-filter backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/80 shadow-[inset_0_1px_0px_rgba(255,255,255,0.7),_0_4px_16px_rgba(0,0,0,0.1),_0_12px_48px_rgba(0,0,0,0.05)] dark:from-gray-700/80 dark:to-gray-800/80 dark:shadow-[inset_0_1px_0px_rgba(255,255,255,0.05),_0_4px_16px_rgba(0,0,0,0.4),_0_12px_48px_rgba(0,0,0,0.2)] transform transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
      <div class="absolute inset-0 rounded-3xl border-2 border-white/50 dark:border-gray-600/50 pointer-events-none"></div>
      <div class="flex items-center mb-4">
        <img src="https://www.picsum.photos/id/70/60" alt="BNB Icon" class="w-16 h-16 rounded-full shadow-lg border-2 border-white dark:border-gray-600 drop-shadow-md">
        <h2 class="ml-4 text-3xl font-bold text-gray-800 dark:text-gray-100 drop-shadow-sm">BNB</h2>
      </div>
      <p class="text-gray-600 dark:text-gray-300 mb-4 text-lg">The native cryptocurrency of the Binance Smart Chain.</p>
      <div class="grid grid-cols-2 gap-2 text-sm mb-4">
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Price:</span>
          <span class="block text-red-600 dark:text-red-400 font-bold text-lg">$589.99</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Change (24h):</span>
          <span class="block text-green-600 dark:text-green-400 font-bold text-lg">+0.80%</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Holdings:</span>
          <span class="block text-purple-600 dark:text-purple-400 font-bold text-lg">10.0 BNB</span>
        </div>
        <div class="bg-white/70 dark:bg-gray-700/70 p-3 rounded-xl shadow-inner-lg shadow-gray-200/50 dark:shadow-gray-900/50 border border-white dark:border-gray-600 text-gray-700 dark:text-gray-200">
          <span class="block font-medium">Value:</span>
          <span class="block text-yellow-600 dark:text-yellow-400 font-bold text-lg">$5,899.90</span>
        </div>
      </div>
      <button class="w-full flex items-center justify-center px-6 py-3 rounded-full text-lg font-semibold text-white bg-gradient-to-br from-blue-400 to-indigo-500 shadow-lg shadow-indigo-300/50 dark:shadow-indigo-800/50 active:shadow-inner-sm border border-white/50 active:border-white/80 active:from-blue-500 active:to-indigo-600 transition-all duration-150 transform active:scale-98 relative overflow-hidden group">
        <span class="relative z-10 group-hover:scale-105 transition-transform duration-200">Trade BNB</span>
        <span class="absolute inset-0 bg-white/20 opacity-0 group-hover:opacity-100 group-active:opacity-0 transition-opacity duration-200"></span>
      </button>
    </div>

  </div>

  <footer class="mt-12 text-center text-gray-600 dark:text-gray-400 text-sm">
    <p>&copy; 2023 Crypto Portfolio. All rights reserved.</p>
  </footer>

</div>

ArtDeco_EarthTones_Cards_Technology_SaaS

アールデコ調の幾何学模様と自然なアースカラーの配色に触発された、テクノロジー/ SaaSアプリケーション向けのシンプルでレスポンシブなカードコンポーネント。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-stone-100 to-stone-200 dark:from-stone-900 dark:to-stone-950 min-h-screen flex items-center justify-center font-serif">
  <div class="container mx-auto px-4 py-8 sm:py-12 md:py-16">
    <h2 class="text-center text-3xl sm:text-4xl md:text-5xl font-extrabold text-stone-800 dark:text-stone-100 mb-6 sm:mb-8 md:mb-12 tracking-wide">
      <span class="block">Our <span class="text-amber-700 dark:text-amber-500">SaaS</span> Offerings</span>
    </h2>
    
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

      <!-- Card 1: Core Analytics -->
      <div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
        <div class="relative p-6 sm:p-8 z-10">
          <img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/25/64/64" alt="Analytics Icon">
          <h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Core Analytics</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
            Gain profound insights with our advanced, real-time data analytics. Understand patterns, predict trends.
          </p>
          <ul class="space-y-3 mb-6">
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Intuitive Dashboards
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Real-time Processing
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Customizable Reports
            </li>
          </ul>
          <button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
            Learn More
          </button>
        </div>
      </div>

      <!-- Card 2: Secure Cloud Storage -->
      <div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
        <div class="relative p-6 sm:p-8 z-10">
          <img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/29/64/64" alt="Storage Icon">
          <h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Secure Cloud Storage</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
            Keep your data safe with our robust, encrypted cloud storage solutions.
          </p>
          <ul class="space-y-3 mb-6">
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              End-to-End Encryption
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Automated Backups
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Access Controls
            </li>
          </ul>
          <button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
            Explore Features
          </button>
        </div>
      </div>

      <!-- Card 3: Collaborative Workspace -->
      <div class="group bg-stone-50 dark:bg-stone-800 rounded-lg overflow-hidden shadow-xl dark:shadow-2xl transition-all duration-300 ease-in-out transform hover:scale-[1.02] hover:shadow-2xl dark:hover:shadow-amber-500/30 border-2 border-stone-200 dark:border-stone-700 relative">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-100/30 via-stone-100/30 to-zinc-100/30 dark:from-amber-900/20 dark:via-stone-900/20 dark:to-zinc-900/20 rounded-lg opacity-0 transition-opacity duration-300 group-hover:opacity-100" style="clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 80% 100%, 0% 100%);"></div>
        <div class="relative p-6 sm:p-8 z-10">
          <img class="w-16 h-16 mb-4 sm:mb-6 mx-auto" src="https://picsum.photos/id/35/64/64" alt="Collaboration Icon">
          <h3 class="text-2xl sm:text-3xl font-bold text-amber-800 dark:text-amber-500 mb-3 text-center tracking-wider">Collaborate Seamlessly</h3>
          <p class="text-stone-700 dark:text-stone-300 text-base sm:text-lg leading-relaxed mb-6 text-center">
            Empower your team with a shared, dynamic workspace for optimal productivity.
          </p>
          <ul class="space-y-3 mb-6">
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Live Document Editing
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Integrated Communication
            </li>
            <li class="flex items-center text-stone-600 dark:text-stone-400">
              <svg class="w-5 h-5 mr-3 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>
              Task Management
            </li>
          </ul>
          <button class="block w-full py-3 px-6 rounded-md bg-amber-700 text-stone-50 font-semibold text-lg uppercase tracking-wider shadow-md hover:bg-amber-800 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-offset-2 dark:bg-amber-600 dark:hover:bg-amber-700 dark:focus:ring-amber-400 transition-colors duration-300">
            Start Collaborating
          </button>
        </div>
      </div>

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

Crypto_Blockchain_Cards_Component

暗号通貨およびブロックチェーンアプリケーション向けに設計されたレスポンシブカードのセットで、温かみのあるニュートラルな配色、マテリアルにインスパイアされたシャドウ、ダークモードのサポートが特徴です。

開けるプレビュー

                <div class="bg-stone-50 dark:bg-stone-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center font-sans">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-7xl mx-auto">

    <!-- Card 1: Asset Overview -->
    <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
      <div class="p-6 relative z-10">
        <div class="flex items-center justify-between mb-4">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100">Bitcoin (BTC)</h3>
          <span class="text-stone-500 dark:text-stone-400 text-sm">Your Balance</span>
        </div>
        <div class="flex items-center space-x-3 mb-2">
          <img class="w-8 h-8 rounded-full shadow-md" src="https://picsum.photos/id/1043/40/40" alt="Bitcoin Logo">
          <p class="text-3xl font-bold text-stone-900 dark:text-stone-50">0.05 BTC</p>
        </div>
        <p class="text-stone-600 dark:text-stone-300 text-lg mb-6">$ 3,450.78 <span class="text-emerald-600 dark:text-emerald-400 text-base font-semibold">+1.2%</span></p>
        <div class="flex justify-between items-center text-sm">
          <span class="text-stone-500 dark:text-stone-400">24h Change:</span>
          <span class="text-emerald-600 dark:text-emerald-400 font-medium">+ $45.21</span>
        </div>
        <div class="flex justify-end mt-4">
          <button class="px-4 py-2 bg-amber-600 text-white rounded-md shadow-md hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-75 transition duration-200">
            View Details
          </button>
        </div>
      </div>
    </div>

    <!-- Card 2: Recent Transactions -->
    <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
      <div class="p-6 relative z-10">
        <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-100 mb-4">Recent Transactions</h3>
        <ul class="space-y-4">
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="bg-emerald-100 dark:bg-emerald-900 p-2 rounded-full">
                <svg class="w-5 h-5 text-emerald-600 dark:text-emerald-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 11c.902-1.705 2.128-3.037 3.551-4L15 8l-3 4m0 0l3 4m-3-4c-1.423.963-2.649 2.295-3.551 4"></path></svg>
              </div>
              <div>
                <p class="text-stone-800 dark:text-stone-100 font-medium">Received ETH</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm">From: 0x...abc</p>
              </div>
            </div>
            <span class="text-emerald-600 dark:text-emerald-400 font-semibold">+0.15 ETH</span>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="bg-rose-100 dark:bg-rose-900 p-2 rounded-full">
                <svg class="w-5 h-5 text-rose-600 dark:text-rose-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 13l-5 5m0 0l-5-5m5 5V6"></path></svg>
              </div>
              <div>
                <p class="text-stone-800 dark:text-stone-100 font-medium">Sent BTC</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm">To: 0x...def</p>
              </div>
            </div>
            <span class="text-rose-600 dark:text-rose-400 font-semibold">-0.002 BTC</span>
          </li>
          <li class="flex items-center justify-between">
            <div class="flex items-center space-x-3">
              <div class="bg-blue-100 dark:bg-blue-900 p-2 rounded-full">
                <svg class="w-5 h-5 text-blue-600 dark:text-blue-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="M9 7h6m-3 2v4m-3 3h6m-3-6h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </div>
              <div>
                <p class="text-stone-800 dark:text-stone-100 font-medium">Staked ADA</p>
                <p class="text-stone-500 dark:text-stone-400 text-sm">Pool: CardanoStake</p>
              </div>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">+50 ADA</span>
          </li>
        </ul>
        <div class="flex justify-end mt-4">
          <button class="px-4 py-2 border border-stone-300 dark:border-stone-600 text-stone-700 dark:text-stone-300 rounded-md hover:bg-stone-100 dark:hover:bg-stone-700 focus:outline-none focus:ring-2 focus:ring-stone-400 focus:ring-opacity-75 transition duration-200">
            View All
          </button>
        </div>
      </div>
    </div>

    <!-- Card 3: Blockchain News / Updates -->
    <div class="bg-white dark:bg-stone-800 rounded-lg shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden perspective group">
      <div class="relative pb-2/3 overflow-hidden rounded-t-lg">
        <img class="absolute h-full w-full object-cover" src="https://picsum.photos/id/29/600/400" alt="Blockchain News">
        <div class="absolute inset-0 bg-gradient-to-t from-stone-900 to-transparent opacity-75"></div>
        <div class="absolute bottom-0 left-0 p-4 w-full">
          <span class="text-xs font-semibold text-stone-200 dark:text-stone-400 uppercase tracking-wide">News</span>
          <h3 class="text-lg font-semibold text-white dark:text-stone-50 leading-tight">Ethereum 'Merge' Success: A New Era for Crypto</h3>
        </div>
      </div>
      <div class="p-6 relative z-10">
        <p class="text-stone-700 dark:text-stone-300 mb-4 text-sm leading-relaxed">The highly anticipated Ethereum 'Merge' has been successfully completed, transitioning the network to Proof-of-Stake. This marks a significant milestone...</p>
        <div class="flex items-center justify-between text-xs text-stone-500 dark:text-stone-400">
          <span>September 15, 2023</span>
          <a href="#" class="text-amber-600 hover:underline dark:text-amber-500">Read more</a>
        </div>
      </div>
    </div>

  </div>
</div>

バウハウスウェザーカードコンポーネント

バウハウスのデザイン原則にインスパイアされたシンプルでレスポンシブなウェザー/クライメートカードコンポーネントで、幾何学的なフォルムとトライアドカラースキームが特徴です。ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="p-4 sm:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans tracking-wide">
  <div class="container max-w-7xl grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">

    <!-- Today's Weather Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-red-500 dark:border-red-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
      <div class="p-6 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Today</h2>
          <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-4">28°C</p>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Sunny with scattered clouds</p>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
          <div>
            <span class="font-semibold block">Humidity:</span> 65%
          </div>
          <div>
            <span class="font-semibold block">Wind:</span> 12 km/h NE
          </div>
          <div>
            <span class="font-semibold block">UV Index:</span> Low
          </div>
          <div>
            <span class="font-semibold block">Precip:</span> 0%
          </div>
        </div>
      </div>
      <div class="px-6 py-3 bg-yellow-500 dark:bg-yellow-600 text-sm font-semibold text-white uppercase text-center">
        Current Conditions
      </div>
    </div>

    <!-- Tomorrow's Forecast Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-blue-500 dark:border-blue-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
      <div class="p-6 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Tomorrow</h2>
          <p class="text-4xl font-extrabold text-red-600 dark:text-red-400 mb-4">25°C</p>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Partly cloudy, chance of showers</p>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
          <div>
            <span class="font-semibold block">Humidity:</span> 78%
          </div>
          <div>
            <span class="font-semibold block">Wind:</span> 15 km/h NW
          </div>
          <div>
            <span class="font-semibold block">UV Index:</span> Moderate
          </div>
          <div>
            <span class="font-semibold block">Precip:</span> 30%
          </div>
        </div>
      </div>
      <div class="px-6 py-3 bg-red-500 dark:bg-red-600 text-sm font-semibold text-white uppercase text-center">
        Expected Forecast
      </div>
    </div>

    <!-- Day After Tomorrow's Forecast Card -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-yellow-500 dark:border-yellow-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
      <div class="p-6 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Fri, May 24</h2>
          <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 mb-4">22°C</p>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Mostly cloudy, few showers</p>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 grid grid-cols-2 gap-2 text-sm text-gray-700 dark:text-gray-400">
          <div>
            <span class="font-semibold block">Humidity:</span> 85%
          </div>
          <div>
            <span class="font-semibold block">Wind:</span> 10 km/h W
          </div>
          <div>
            <span class="font-semibold block">UV Index:</span> Low
          </div>
          <div>
            <span class="font-semibold block">Precip:</span> 60%
          </div>
        </div>
      </div>
      <div class="px-6 py-3 bg-blue-500 dark:bg-blue-600 text-sm font-semibold text-white uppercase text-center">
        Long Range Outlook
      </div>
    </div>

    <!-- Climate Data Card (Example with Placeholder Image) -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-b-4 border-l-4 border-green-500 dark:border-green-600 transform transition-transform duration-300 hover:scale-[1.02] flex flex-col">
      <img src="https://picsum.photos/400/250?random=1" alt="Climate Data Visualization" class="w-full h-40 object-cover border-b-4 border-green-500 dark:border-green-600 group-hover:scale-105 transition duration-300" loading="lazy">
      <div class="p-6 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white capitalize">Climate Trends</h2>
          <p class="text-lg text-gray-600 dark:text-gray-300 mb-4">Analyzing global temperature shifts</p>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 text-sm text-gray-700 dark:text-gray-400">
          <p class="font-semibold">Average Anomaly:</p>
          <p class="mb-2">+0.85°C (past decade)</p>
          <p class="font-semibold">CO2 Levels:</p>
          <p>420 ppm (rising)</p>
        </div>
      </div>
      <div class="px-6 py-3 bg-green-500 dark:bg-green-600 text-sm font-semibold text-white uppercase text-center">
        Environmental Impact
      </div>
    </div>

  </div>
</div>

Music_Cards_Component

ジュエルトーンの豊かなグラデーションとスムーズなトランジションが特徴のレスポンシブミュージック/オーディオカードコンポーネントで、ダークモードにも対応しています。アルバムやトラックの表示のためのシンプルなレイアウト。

開けるプレビュー

                <div class="p-4 sm:p-8 bg-gradient-to-br from-purple-950 via-indigo-950 to-black dark:from-gray-950 dark:via-blue-950 dark:to-teal-950 min-h-screen flex items-center justify-center font-sans">
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 w-full max-w-7xl">

    <!-- Card 1 -->
    <div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
                bg-gradient-to-tr from-fuchsia-700 via-purple-700 to-indigo-700 dark:from-fuchsia-900 dark:via-purple-900 dark:to-indigo-900">
      <div class="relative p-6 z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/seed/music1/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
        <h3 class="text-2xl font-bold text-white mb-2">Groovy Rhythms</h3>
        <p class="text-lg text-indigo-100 mb-4">Artist Name</p>
        <button class="px-6 py-3 rounded-full bg-white text-indigo-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-indigo-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
          Play Now
        </button>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
    </div>

    <!-- Card 2 -->
    <div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
                bg-gradient-to-tr from-purple-700 via-blue-700 to-cyan-700 dark:from-purple-900 dark:via-blue-900 dark:to-cyan-900">
      <div class="relative p-6 z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/seed/music2/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
        <h3 class="text-2xl font-bold text-white mb-2">Electric Dreams</h3>
        <p class="text-lg text-blue-100 mb-4">Another Artist</p>
        <button class="px-6 py-3 rounded-full bg-white text-blue-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-blue-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
          Play Now
        </button>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
    </div>

    <!-- Card 3 -->
    <div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
                bg-gradient-to-tr from-emerald-700 via-teal-700 to-sky-700 dark:from-emerald-900 dark:via-teal-900 dark:to-sky-900">
      <div class="relative p-6 z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/seed/music3/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
        <h3 class="text-2xl font-bold text-white mb-2">Jazzy Beats</h3>
        <p class="text-lg text-teal-100 mb-4">New Age Jazz Ensemble</p>
        <button class="px-6 py-3 rounded-full bg-white text-teal-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-teal-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
          Play Now
        </button>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
    </div>

    <!-- Card 4 -->
    <div class="group relative overflow-hidden rounded-2xl shadow-xl transform transition-all duration-500 ease-in-out hover:scale-105 hover:shadow-2xl
                bg-gradient-to-tr from-red-700 via-pink-700 to-purple-700 dark:from-red-900 dark:via-pink-900 dark:to-purple-900">
      <div class="relative p-6 z-10 flex flex-col items-center text-center">
        <img src="https://picsum.photos/seed/music4/200/200" alt="Album Art" class="rounded-full w-32 h-32 object-cover mb-4 ring-4 ring-white dark:ring-gray-300 transition-transform duration-300 group-hover:scale-110">
        <h3 class="text-2xl font-bold text-white mb-2">Melody Flow</h3>
        <p class="text-lg text-pink-100 mb-4">The Sound Weavers</p>
        <button class="px-6 py-3 rounded-full bg-white text-red-800 font-semibold text-lg shadow-md hover:bg-gray-100 hover:text-red-900 transition-colors duration-300 focus:outline-none focus:ring-2 focus:ring-white focus:ring-opacity-75">
          Play Now
        </button>
      </div>
      <div class="absolute inset-0 bg-gradient-to-br from-transparent via-transparent to-black opacity-30 group-hover:opacity-60 transition-opacity duration-500"></div>
    </div>

  </div>
</div>

Luxury_Sepia_SaaS_Cards_Component

ラグジュアリー/プレミアムなデザインスタイル、セピア/ブラウンの配色、ダークモードのサポートやインタラクティブ要素など、テクノロジー/SaaSアプリケーション向けに最適化された、複雑でレスポンシブなカードコンポーネント。

開けるプレビュー

                <div class="font-sans bg-amber-50 text-stone-800 dark:bg-stone-900 dark:text-stone-100 py-16 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-16">
      <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-stone-900 dark:text-stone-50 mb-6 leading-tight tracking-tight">
        Elevate Your Platform
      </h2>
      <p class="text-lg sm:text-xl text-stone-700 dark:text-stone-300 max-w-3xl mx-auto">
        Discover how our cutting-edge solutions empower businesses to achieve unprecedented efficiency and growth.
      </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

      <!-- Card 1: Advanced Analytics -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1015/600/400" alt="Advanced Analytics" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Advanced Analytics</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Data Intelligence</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Unlock profound insights with our sophisticated analytics suite. Transform raw data into actionable strategies that drive business growth and optimize performance.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Real-time data processing</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Predictive modeling tools</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Customizable dashboards</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            Learn More
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><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>

      <!-- Card 2: Secure Cloud Infrastructure -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1041/600/400" alt="Secure Cloud Infrastructure" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Secure Cloud</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Infrastructure</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Protect your valuable data with our robust and secure cloud infrastructure. Enjoy peace of mind knowing your operations are fortified against modern threats.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>End-to-end encryption</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Compliance certifications</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>24/7 Threat monitoring</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            Explore Security
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><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>

      <!-- Card 3: Seamless Integration -->
      <div class="bg-white dark:bg-stone-800 rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-300 overflow-hidden flex flex-col group">
        <div class="relative w-full h-56 overflow-hidden">
          <img src="https://picsum.photos/id/1043/600/400" alt="Seamless Integration" class="absolute inset-0 w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-500 rounded-t-3xl">
          <div class="absolute inset-0 bg-gradient-to-t from-stone-900/60 to-transparent rounded-t-3xl"></div>
          <div class="absolute bottom-0 left-0 p-6">
            <h3 class="text-white text-3xl font-bold mb-2">Seamless Integration</h3>
            <span class="text-amber-300 text-sm font-semibold uppercase tracking-wider">Ecosystem Harmony</span>
          </div>
        </div>
        <div class="p-8 flex-grow flex flex-col">
          <p class="text-stone-600 dark:text-stone-300 leading-relaxed mb-6 flex-grow">
            Connect effortlessly with your existing tools and workflows. Our platform is designed for maximum compatibility, ensuring a smooth transition and enhanced productivity.
          </p>
          <ul class="space-y-3 mb-6 text-stone-700 dark:text-stone-200">
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>API-first architecture</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Pre-built connectors</li>
            <li class="flex items-center"><svg class="w-5 h-5 text-amber-600 dark:text-amber-400 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>Developer-friendly documentation</li>
          </ul>
          <a href="#" class="mt-auto inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-full shadow-sm text-white bg-amber-700 hover:bg-amber-800 dark:bg-amber-600 dark:hover:bg-amber-700 transition-colors duration-300 self-start">
            View Integrations
            <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><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 class="mt-16 text-center">
      <h3 class="text-3xl font-semibold text-stone-900 dark:text-stone-50 mb-6">What Our Clients Say</h3>
      <div class="max-w-xl mx-auto bg-white dark:bg-stone-800 rounded-3xl shadow-xl p-8 flex flex-col md:flex-row items-center space-y-6 md:space-y-0 md:space-x-8">
        <div class="flex-shrink-0">
          <img class="h-24 w-24 rounded-full object-cover ring-4 ring-amber-500 dark:ring-amber-400" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client Avatar">
        </div>
        <div class="text-center md:text-left">
          <p class="text-lg text-stone-700 dark:text-stone-200 mb-4 italic leading-relaxed">
            "This platform has transformed our data analysis process. The insights are incredibly precise, and the ease of integration is unmatched."
          </p>
          <p class="text-stone-900 dark:text-stone-50 font-bold text-xl">Jane Doe</p>
          <p class="text-amber-700 dark:text-amber-400 text-sm font-medium">CEO, Global Innovations</p>
        </div>
      </div>
    </div>

  </div>
</div>

カードコンポーネント

ブッキング/予約システム用のミニマリストでフラットなデザインのカードコンポーネントで、グラデーションのレインボーカラースキームが特徴です。レスポンシブで、ダークモードのサポートが含まれており、シンプルな要素を使用してすっきりとした外観になっています。

開けるプレビュー

                <div class="p-4 sm:p-6 md:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="grid gap-6 sm:grid-cols-1 md:grid-cols-2 lg:grid-cols-3 max-w-6xl mx-auto">

    <!-- Card 1: Available Time Slot -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="p-6 space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-bold dark:text-gray-100">Morning Slot</h3>
          <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 text-white shadow-md">Available</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Wednesday, October 26, 2023</p>
        <p class="text-4xl font-extrabold text-gray-800 dark:text-gray-50">09:00 AM</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 60 minutes</p>
        <button class="w-full py-3 rounded-lg text-white font-semibold transform transition-transform duration-300 active:scale-95
                       bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 hover:from-purple-600 hover:via-pink-600 hover:to-red-600 shadow-lg">
          Book Now
        </button>
      </div>
    </div>

    <!-- Card 2: Fully Booked -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="p-6 space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-bold dark:text-gray-100">Afternoon Slot</h3>
          <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-gray-400 via-gray-500 to-gray-600 text-white shadow-md">Fully Booked</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Wednesday, October 26, 2023</p>
        <p class="text-4xl font-extrabold text-gray-400 dark:text-gray-600">02:00 PM</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 90 minutes</p>
        <button class="w-full py-3 rounded-lg text-white font-semibold cursor-not-allowed opacity-60
                       bg-gradient-to-r from-gray-400 via-gray-500 to-gray-600 shadow-lg">
          View Details
        </button>
      </div>
    </div>

    <!-- Card 3: Next Day Availability -->
    <div class="relative overflow-hidden rounded-xl shadow-lg dark:shadow-xl transform transition-transform duration-300 hover:scale-[1.02] dark:border dark:border-gray-700 bg-white dark:bg-gray-800">
      <div class="p-6 space-y-4">
        <div class="flex items-center justify-between">
          <h3 class="text-2xl font-bold dark:text-gray-100">Evening Slot</h3>
          <span class="px-3 py-1 rounded-full text-sm font-semibold bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-500 text-white shadow-md">Limited</span>
        </div>
        <p class="text-gray-600 dark:text-gray-300 text-sm">Thursday, October 27, 2023</p>
        <p class="text-4xl font-extrabold text-gray-800 dark:text-gray-50">07:30 PM</p>
        <p class="text-gray-500 dark:text-gray-400 text-sm">Duration: 45 minutes</p>
        <button class="w-full py-3 rounded-lg text-white font-semibold transform transition-transform duration-300 active:scale-95
                       bg-gradient-to-r from-teal-500 via-cyan-500 to-blue-500 hover:from-teal-600 hover:via-cyan-600 hover:to-blue-600 shadow-lg">
          Pre-book
        </button>
      </div>
    </div>

  </div>
</div>

レトロリザベーションカード

ダークモードをサポートするレトロなテーマの予約/予約カードのレスポンシブセットで、予約または予約システムに適しています。落ち着いたヴィンテージカラーと、80年代/90年代の繊細な美学が特徴です。

開けるプレビュー

                <div class="min-h-screen bg-gray-100 p-4 font-sans dark:bg-gray-900 md:p-8">
  <div class="container mx-auto px-4 py-8">
    <h1 class="mb-8 text-center text-4xl font-bold uppercase tracking-wider text-gray-800 dark:text-gray-200 md:text-5xl">
      <span class="block animate-pulse text-red-600 dark:text-red-400">Book Your Slot!</span>
      <span class="block text-2xl normal-case text-gray-600 dark:text-gray-400">Pick Your Perfect Time</span>
    </h1>

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

      <!-- Card 1: Available Slot -->
      <div class="transform rounded-lg border-2 border-orange-400 bg-gradient-to-br from-yellow-200 to-orange-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-blue-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Morning Session</h2>
          <span class="rounded-full bg-green-500 px-3 py-1 text-sm font-semibold text-white">Available</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">Start your day right with a productive morning slot.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 26, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 09:00 AM - 10:30 AM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 90 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">Alex Johnson</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-purple-600 px-4 py-3 font-bold uppercase text-white shadow-lg transition-colors duration-300 hover:bg-purple-700 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:bg-purple-500 dark:hover:bg-purple-600 dark:focus:ring-purple-700">
          Book Now!
        </button>
      </div>

      <!-- Card 2: Fully Booked Slot -->
      <div class="transform rounded-lg border-2 border-red-500 bg-gradient-to-br from-red-200 to-red-400 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-red-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Afternoon Deep Dive</h2>
          <span class="rounded-full bg-red-600 px-3 py-1 text-sm font-semibold text-white">Fully Booked</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">This popular slot is currently at full capacity.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 26, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 01:00 PM - 03:00 PM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 120 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">Maria Gomez</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-gray-500 px-4 py-3 font-bold uppercase text-white shadow-lg cursor-not-allowed dark:bg-gray-600" disabled>
          Sold Out
        </button>
      </div>

      <!-- Card 3: Pending Confirmation Slot -->
      <div class="transform rounded-lg border-2 border-blue-500 bg-gradient-to-br from-blue-200 to-cyan-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-green-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Evening Chill</h2>
          <span class="rounded-full bg-yellow-500 px-3 py-1 text-sm font-semibold text-white">Pending</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">Awaiting confirmation for this twilight session.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 27, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 06:00 PM - 07:00 PM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 60 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/men/19.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">David Lee</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-gray-400 px-4 py-3 font-bold uppercase text-white shadow-lg cursor-not-allowed dark:bg-gray-500" disabled>
          Awaiting Conf.
        </button>
      </div>

      <!-- Card 4: Special Event Slot -->
      <div class="transform rounded-lg border-2 border-purple-500 bg-gradient-to-br from-purple-200 to-pink-300 p-6 shadow-xl transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl dark:from-gray-700 dark:to-gray-800 dark:border-orange-600">
        <div class="mb-4 flex items-center justify-between">
          <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Exclusive Workshop</h2>
          <span class="rounded-full bg-blue-600 px-3 py-1 text-sm font-semibold text-white">Special</span>
        </div>
        <p class="mb-4 text-gray-700 dark:text-gray-300">A unique opportunity! Limited spots available.</p>
        <div class="mb-4 text-gray-600 dark:text-gray-400">
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Date:</strong> Oct 28, 2023</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Time:</strong> 10:00 AM - 01:00 PM</p>
          <p class="text-lg"><strong class="text-gray-800 dark:text-gray-200">Duration:</strong> 180 mins</p>
        </div>
        <div class="mb-4 flex items-center">
          <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Host Avatar" class="mr-3 h-10 w-10 rounded-full border-2 border-purple-500 shadow-md">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-100">Hosted by:</p>
            <p class="text-gray-700 dark:text-gray-300">Sophia Kim</p>
          </div>
        </div>
        <button class="w-full rounded-md bg-cyan-600 px-4 py-3 font-bold uppercase text-white shadow-lg transition-colors duration-300 hover:bg-cyan-700 focus:outline-none focus:ring-4 focus:ring-cyan-300 dark:bg-cyan-500 dark:hover:bg-cyan-600 dark:focus:ring-cyan-700">
          Register Now!
        </button>
      </div>

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

カードコンポーネント

企業/専門的なビジネス環境に適したシンプルでクリーンで信頼できるカードコンポーネントで、暗号通貨およびブロックチェーンアプリケーション用に特別に設計されています。補色配色、レスポンシブデザイン、ダークモードのサポートが特徴です。

開けるプレビュー

                <div class="bg-neutral-100 dark:bg-neutral-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <div class="text-center mb-12">
      <h2 class="text-3xl font-extrabold text-neutral-900 dark:text-neutral-100 sm:text-4xl">
        Explore Our Blockchain Solutions
      </h2>
      <p class="mt-4 text-lg text-neutral-600 dark:text-neutral-400">
        Industry-leading technology and secure platforms for your digital assets.
      </p>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Card 1: Secure Wallets -->
      <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl md:hover:shadow-3xl">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/250?random=1" alt="Secure Wallets">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Secure Wallets</h3>
          <p class="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
            Protect your cryptocurrencies with our high-security, multi-signature wallets.
          </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-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
            Learn More
            <svg class="ml-2 -mr-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Card 2: Decentralized Exchange -->
      <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl md:hover:shadow-3xl">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/250?random=2" alt="Decentralized Exchange">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Decentralized Exchange</h3>
          <p class="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
            Trade digital assets directly with other users, ensuring transparency and control.
          </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-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
            Explore DEX
            <svg class="ml-2 -mr-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>

      <!-- Card 3: Blockchain Analytics -->
      <div class="bg-white dark:bg-neutral-800 rounded-lg shadow-xl overflow-hidden transform transition duration-300 hover:scale-105 hover:shadow-2xl md:hover:shadow-3xl">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/400/250?random=3" alt="Blockchain Analytics">
        <div class="p-6">
          <h3 class="text-xl font-semibold text-neutral-900 dark:text-neutral-100 mb-2">Blockchain Analytics</h3>
          <p class="text-neutral-600 dark:text-neutral-400 text-sm mb-4">
            Gain insights into market trends and transaction data with our advanced analytics tools.
          </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-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400">
            View Data
            <svg class="ml-2 -mr-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Luxury_Portfolio_Cards_Ocean_Blue

作品や製品を紹介するためにオーシャン/ブルーの色調でデザインされた、複雑でラグジュアリー/プレミアムなポートフォリオカードコンポーネントです。レスポンシブデザイン、洗練されたタイポグラフィ、エレガントなビジュアル、完全なダークモードのサポートが特徴です。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 dark:from-gray-950 dark:to-blue-900 py-12 px-4 sm:px-6 lg:px-8 font-serif text-gray-800 dark:text-gray-200">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-6 drop-shadow-lg text-blue-900 dark:text-blue-200 leading-tight">
      Our Exquisite Creations
    </h2>
    <p class="text-xl sm:text-2xl text-center mb-16 max-w-3xl mx-auto dark:text-gray-300">
      Dive into a curated collection of our most distinguished projects, crafted with precision and an unwavering pursuit of perfection.
    </p>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

      <!-- Card 1 -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700 ">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1018/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Azure Sky Residency</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A beacon of modern architecture, featuring bespoke interiors and breathtaking panoramic views.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Designer Avatar">
              <span>Anya Sharma</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Architecture</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            View Project
          </a>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1042/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Symphony of the Seas</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An opulent yacht interior design, blending classic elegance with cutting-edge marine technology.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Designer Avatar">
              <span>Julian Thorne</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Interior Design</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            Explore Details
          </a>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1044/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Elysian Gardens Revitalization</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A transformative landscape design, harmonizing natural beauty with sustainable urban living.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/9.jpg" alt="Designer Avatar">
              <span>Lena Petrov</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Landscape</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            See Portfolio
          </a>
        </div>
      </div>

      <!-- Card 4 (Placeholder - could be dynamic) -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/10/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Oceanic Brand Identity</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">Crafting a distinctive visual language for a luxury coastal resort brand.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/71.jpg" alt="Designer Avatar">
              <span>Marcus Finn</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Branding</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            Discover More
          </a>
        </div>
      </div>

      <!-- Card 5 (Placeholder) -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1025/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Digital Horizon App</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">An intuitive and visually stunning mobile application designed for premium travel experiences.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/men/78.jpg" alt="Designer Avatar">
              <span>Chloe Rivers</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">UI/UX Design</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            View Case Study
          </a>
        </div>
      </div>

      <!-- Card 6 (Placeholder) -->
      <div class="group relative overflow-hidden rounded-3xl shadow-xl hover:shadow-2xl transition-all duration-500 ease-in-out transform hover:-translate-y-2 bg-white dark:bg-gray-800 border border-blue-200 dark:border-blue-700">
        <img class="w-full h-64 object-cover object-center transition-transform duration-500 group-hover:scale-105" src="https://picsum.photos/id/1049/600/400" alt="Project Image">
        <div class="p-6 flex flex-col justify-between">
          <div>
            <h3 class="text-2xl font-bold mb-3 text-blue-800 dark:text-blue-300 tracking-wide">Timeless Sculpture Series</h3>
            <p class="text-gray-600 dark:text-gray-400 leading-relaxed mb-4">A collection of bespoke artistic sculptures, blending classical forms with contemporary abstract elements.</p>
          </div>
          <div class="flex items-center justify-between text-sm text-gray-500 dark:text-gray-400 pt-4 border-t border-blue-100 dark:border-gray-700">
            <div class="flex items-center space-x-2">
              <img class="w-8 h-8 rounded-full border-2 border-blue-400 dark:border-blue-600" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Designer Avatar">
              <span>David Hayes</span>
            </div>
            <span class="text-blue-600 dark:text-blue-400 font-semibold">Art & Craft</span>
          </div>
          <a href="#" class="mt-6 block text-center bg-gradient-to-r from-blue-600 to-blue-800 text-white py-3 px-6 rounded-lg text-lg font-semibold hover:from-blue-700 hover:to-blue-900 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800 transition-all duration-300 ease-in-out group-hover:scale-105">
            Discover Collection
          </a>
        </div>
      </div>

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