検索コンポーネント

すべてのコンポーネント

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

サイバーパンクCRMグリッド

サイバーパンクの未来的なネオンの美学を備えたCRM/ビジネスツール用のレスポンシブグリッドレイアウトコンポーネントで、暗い背景と暖かい夕日のアクセントカラーが特徴です。インタラクティブ要素とダークモードのサポートが含まれています。

                <div class="min-h-screen bg-gray-950 text-orange-200 p-4 sm:p-6 lg:p-8 font-mono dark:bg-gray-950 dark:text-orange-200">

  <!-- Header/Title Section -->
  <div class="mb-8 text-center">
    <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-orange-400 mb-2 drop-shadow-xl shadow-orange-500/50 dark:text-orange-400">
      <span class="animate-pulse-slow">CYBERNETIC</span> DECK // <span class="text-orange-500">CRM_OPS</span>
    </h1>
    <p class="text-lg sm:text-xl text-yellow-300 dark:text-yellow-300">Enhanced Customer Interface Protocol</p>
  </div>

  <!-- Main Grid Container -->
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-min">

    <!-- Customer Overview Card -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path></svg>
        CLIENT PROFILES
      </h2>
      <p class="text-sm text-yellow-200 mb-4 z-10 relative">Active customer profiles and recent interactions.</p>
      <ul class="space-y-3 z-10 relative">
        <li class="flex items-center bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <img class="w-8 h-8 rounded-full mr-3 border border-orange-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-sm font-semibold text-orange-300">NeoTech Dynamics</p>
            <p class="text-xs text-yellow-400">Last login: 2 days ago</p>
          </div>
          <span class="text-xs text-green-400">+1.2%</span>
        </li>
        <li class="flex items-center bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <img class="w-8 h-8 rounded-full mr-3 border border-orange-500" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-sm font-semibold text-orange-300">Synaptic Nexus Corp</p>
            <p class="text-xs text-yellow-400">New lead: 5 hours ago</p>
          </div>
          <span class="text-xs text-yellow-400">New</span>
        </li>
        <li class="flex items-center bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <img class="w-8 h-8 rounded-full mr-3 border border-orange-500" src="https://randomuser.me/api/portraits/men/50.jpg" alt="User Avatar">
          <div class="flex-1">
            <p class="text-sm font-semibold text-orange-300">Quantum Robotics</p>
            <p class="text-xs text-yellow-400">Upcoming meeting</p>
          </div>
          <span class="text-xs text-red-400">-0.5%</span>
        </li>
      </ul>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">View All Customers</button>
    </div>

    <!-- Sales Performance Card -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 3a1 1 0 011-1h2a1 1 0 011 1v13a1 1 0 01-1 1h-2a1 1 0 01-1-1V3z"></path></svg>
        SALES OVERVIEW
      </h2>
      <div class="text-center mb-4 z-10 relative">
        <p class="text-4xl font-bold text-orange-300 mb-1"><span class="text-yellow-400">$</span>128,450</p>
        <p class="text-sm text-yellow-200">Revenue this cycle</p>
      </div>
      <div class="relative w-full h-32 bg-gray-800/70 rounded-md p-2 mb-4 z-10 relative">
        <!-- Placeholder for a more complex chart (e.g., SVG or image) -->
        <img src="https://picsum.photos/400/200?random=1" alt="Sales Chart" class="w-full h-full object-cover rounded-md opacity-70 group-hover:opacity-90 transition-opacity duration-300" />
        <div class="absolute inset-0 flex items-center justify-center text-orange-400 font-bold text-sm leading-none">[ANALYTICS FEED]</div>
      </div>
      <div class="flex justify-between text-sm z-10 relative">
        <div>
          <p class="text-yellow-400">Avg Deal:</p>
          <p class="text-orange-300">$2,560</p>
        </div>
        <div>
          <p class="text-yellow-400">Conversion:</p>
          <p class="text-orange-300">18.3%</p>
        </div>
        <div>
          <p class="text-yellow-400">Growth:</p>
          <p class="text-green-400">+4.7%</p>
        </div>
      </div>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">Deep Dive Analytics</button>
    </div>

    <!-- Interactive Task Management Card - Span 2 columns on larger screens -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden lg:col-span-2 group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
        TASK_FLOW CONTROL
      </h2>
      <div class="flex flex-col sm:flex-row gap-4 mb-4 z-10 relative">
        <input type="text" placeholder="New task description..." class="flex-1 bg-gray-800 border border-orange-700 px-4 py-2 rounded-md text-orange-200 placeholder-yellow-300/50 focus:outline-none focus:ring-2 focus:ring-orange-500" />
        <button class="bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 px-5 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200">Add Task</button>
      </div>
      <ul class="space-y-3 z-10 relative">
        <li class="flex items-center bg-gray-800/50 p-3 rounded-md hover:bg-gray-700/70 transition duration-200">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-orange-500 bg-gray-700 border-orange-700 rounded focus:ring-orange-500 cursor-pointer" checked>
          <div class="ml-4 flex-1">
            <p class="text-orange-300 font-semibold line-through">Finalize Q3 Synergy Report</p>
            <p class="text-xs text-yellow-400">Due: 2024-10-26</p>
          </div>
          <span class="text-xs text-green-400">Completed</span>
        </li>
        <li class="flex items-center bg-gray-800/50 p-3 rounded-md hover:bg-gray-700/70 transition duration-200">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-orange-500 bg-gray-700 border-orange-700 rounded focus:ring-orange-500 cursor-pointer">
          <div class="ml-4 flex-1">
            <p class="text-orange-300 font-semibold">Client Call: Project Alpha Status</p>
            <p class="text-xs text-yellow-400">Due: 2024-10-28 <span class="text-red-400">[PRIORITY]</span></p>
          </div>
          <span class="text-xs text-yellow-400">Pending</span>
        </li>
        <li class="flex items-center bg-gray-800/50 p-3 rounded-md hover:bg-gray-700/70 transition duration-200">
          <input type="checkbox" class="form-checkbox h-5 w-5 text-orange-500 bg-gray-700 border-orange-700 rounded focus:ring-orange-500 cursor-pointer">
          <div class="ml-4 flex-1">
            <p class="text-orange-300 font-semibold">Review CRM Logs for Anomaly 7</p>
            <p class="text-xs text-yellow-400">Due: 2024-10-29</p>
          </div>
          <span class="text-xs text-yellow-400">Pending</span>
        </li>
      </ul>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">Manage All Tasks</button>
    </div>

    <!-- Quick Stats Card -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17.883 11.232C17.265 10.485 16.29 10 15 10c-1.396 0-2.584.279-3.522.687L9 11.232V14.5A.5.5 0 018.5 15h-2a.5.5 0 01-.5-.5V8.216A.5.5 0 016.146 7.785l.775-.775C7.309 6.275 8.04 6 9 6c.71 0 1.34.162 1.895.424L12 7.375V11a.5.5 0 01-.5.5h-2a.5.5 0 01-.5-.5v-4.883c.969-.344 2.148-.595 3.52-.595 1.765 0 3.23.513 4.143 1.258l-.634.789c-.5-.402-1.3-.647-2.274-.647-1.127 0-2.12.39-2.828.98L13 13h-2v3a1 1 0 001 1h4a1 1 0 001-1v-5.285c.618-.466 1.07-1.077 1.383-1.815z"></path></svg>
        SYSTEM STATUS
      </h2>
      <div class="text-sm space-y-3 z-10 relative">
        <div class="flex justify-between items-center">
          <span class="text-yellow-400">Client Connections:</span>
          <span class="text-orange-300 font-bold">482_online</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-yellow-400">Data Traffic:</span>
          <span class="text-orange-300 font-bold">~1.2 TB/hr</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-yellow-400">Server Latency:</span>
          <span class="text-green-400 font-bold">&lt;50ms</span>
        </div>
        <div class="flex justify-between items-center">
          <span class="text-yellow-400">Active Sessions:</span>
          <span class="text-orange-300 font-bold">127</span>
        </div>
      </div>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">Run Diagnostics</button>
    </div>

    <!-- Recent Activities Feed Card -->
    <div class="relative bg-gray-900 border border-orange-700/50 rounded-lg p-5 shadow-lg shadow-orange-950/70 overflow-hidden group hover:shadow-orange-700/50 transition duration-300 dark:bg-gray-900 dark:border-orange-700/50">
      <div class="absolute inset-0 bg-gradient-to-tr from-amber-900/20 to-orange-900/20 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      <h2 class="text-2xl font-bold text-orange-400 mb-4 flex items-center z-10 relative">
        <svg class="w-6 h-6 mr-2 text-yellow-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z" clip-rule="evenodd"></path></svg>
        ACTIVITY LOG
      </h2>
      <ul class="space-y-3 text-sm z-10 relative">
        <li class="flex items-start bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <div class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5 mr-3 bg-green-500"></div>
          <div>
            <p class="text-orange-300"><span class="text-yellow-400 font-semibold">User 'JADE_OPS'</span> updated lead status for <span class="text-orange-400">'Project Chimera'</span>.</p>
            <p class="text-xs text-yellow-400">15 minutes ago</p>
          </div>
        </li>
        <li class="flex items-start bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <div class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5 mr-3 bg-blue-500"></div>
          <div>
            <p class="text-orange-300"><span class="text-yellow-400 font-semibold">System_Bot_RX</span> initiated data backup protocol.</p>
            <p class="text-xs text-yellow-400">1 hour ago</p>
          </div>
        </li>
        <li class="flex items-start bg-gray-800/50 p-2 rounded-md hover:bg-gray-700/70 transition duration-200">
          <div class="flex-shrink-0 w-2 h-2 rounded-full mt-1.5 mr-3 bg-red-500"></div>
          <div>
            <p class="text-orange-300"><span class="text-yellow-400 font-semibold">Client 'NeuralNet Inc.'</span> payment processing FAILED. Alert issued.</p>
            <p class="text-xs text-yellow-400">3 hours ago</p>
          </div>
        </li>
      </ul>
      <button class="mt-4 w-full bg-orange-700 text-yellow-50 shadow-md shadow-orange-950/50 py-2 rounded-md hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 hover:scale-[1.01] transition-transform duration-200 z-10 relative">View Full Log</button>
    </div>

  </div>

  <!-- Footer/System Info -->
  <div class="mt-8 text-center text-yellow-500/70 text-sm">
    <p>© 2077 CyberCorp Solutions. All rights reserved. // <span class="text-orange-600">SECURE_CHANNEL_ACTIVE</span></p>
  </div>

  <!-- Tailwind JIT compatibility (not part of component, but useful for dev) -->
  <style>
    @keyframes pulse-slow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    .animate-pulse-slow {
      animation: pulse-slow 3s infinite ease-in-out;
    }
  </style>

</div>

チャットウィンドウコンポーネント

3Dデザインの美学、温かみのあるニュートラルな配色、および完全なダークモードサポートを備えたレスポンシブでモダンなチャットウィンドウコンポーネントで、テクノロジー/ SaaSアプリケーションに適しています。

開けるプレビュー

                <div class="flex h-screen bg-gray-100 dark:bg-gray-900 justify-center items-center p-4 sm:p-6 lg:p-8 font-sans">
  <div class="relative w-full max-w-4xl h-[calc(100vh-4rem)] md:h-[600px] flex flex-col bg-gradient-to-br from-warm-beige-100 to-warm-beige-200 dark:from-gray-800 dark:to-gray-850 rounded-3xl shadow-2xl overflow-hidden transform perspective-1000">

    <!-- 3D Overlay/Bevel Effect -->
    <div class="absolute inset-0 rounded-3xl pointer-events-none" style="
        background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 50%, rgba(0,0,0,0.05) 100%),
                  linear-gradient(225deg, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 0 0 2px rgba(255,255,255,0.05),
                    inset 5px 5px 10px rgba(0,0,0,0.1), inset -5px -5px 10px rgba(255,255,255,0.05);
        filter: blur(0.5px);
    "></div>

    <!-- Header -->
    <div class="flex items-center justify-between p-4 sm:p-5 lg:p-6 border-b border-warm-beige-300/50 dark:border-gray-700/50 shadow-inner-top z-10" 
         style="box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.05);">
      <div class="flex items-center space-x-3">
        <img class="w-10 h-10 rounded-full object-cover shadow-md transition-transform duration-300 hover:scale-105" 
             src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-100">Alice Johnson</h2>
          <p class="text-sm text-gray-600 dark:text-gray-300">Online</p>
        </div>
      </div>
      <div class="flex space-x-3">
        <button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684L10.3 11a1 1 0 00.729.584l4.249.708a1 1 0 01.921.235l4.629 4.629a1 1 0 01.235.921l-.708 4.249a1 1 0 00-.584.729L14 20.7a1 1 0 01-.684.948H5a2 2 0 01-2-2V5z"></path></svg>
        </button>
        <button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
          <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 1.5V6a2 2 0 002 2h3.5m-3.5 13.5v-4.5a2 2 0 00-2-2H8"></path></svg>
        </button>
      </div>
    </div>

    <!-- Chat Messages Area -->
    <div class="flex-1 p-4 sm:p-6 overflow-y-auto space-y-4 md:space-y-6 scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-thin scrollbar-thumb-gray-400 dark:scrollbar-thumb-gray-600 scrollbar-track-warm-beige-200 dark:scrollbar-track-gray-800">

      <!-- Received Message Example (3D card) -->
      <div class="flex justify-start">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-warm-beige-300 to-warm-beige-400 dark:from-gray-700 dark:to-gray-750 text-gray-800 dark:text-gray-50 shadow-lg transform -rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <p>Hi Alice, how are you doing today? I wanted to check in on the latest project updates.</p>
          <span class="block text-xs font-medium text-gray-600 dark:text-gray-300 mt-1 text-right">10:30 AM</span>
          <div class="absolute -left-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-warm-beige-400 dark:bg-gray-750 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

      <!-- Sent Message Example (3D card) -->
      <div class="flex justify-end">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 text-white shadow-lg transform rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <p>I'm good, thanks! The project's on track. I'll send you a brief update document by the end of the day.</p>
          <span class="block text-xs font-medium text-blue-100 mt-1 text-left">10:35 AM</span>
          <div class="absolute -right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-blue-400 dark:bg-blue-700 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

      <!-- Another Received Message -->
      <div class="flex justify-start">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-4 rounded-xl bg-gradient-to-br from-warm-beige-300 to-warm-beige-400 dark:from-gray-700 dark:to-gray-750 text-gray-800 dark:text-gray-50 shadow-lg transform -rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <p>Sounds perfect! Looking forward to it.</p>
          <span class="block text-xs font-medium text-gray-600 dark:text-gray-300 mt-1 text-right">10:36 AM</span>
          <div class="absolute -left-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-warm-beige-400 dark:bg-gray-750 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

      <!-- Image Message (Sent) -->
      <div class="flex justify-end">
        <div class="relative max-w-[75%] lg:max-w-[60%] p-2 rounded-xl bg-gradient-to-br from-blue-300 to-blue-400 dark:from-blue-600 dark:to-blue-700 text-white shadow-lg transform rotate-x-1 duration-200 hover:rotate-x-0 transition-transform" 
             style="box-shadow: 0 4px 8px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.1);">
          <img src="https://picsum.photos/400/300" alt="Image attachment" class="rounded-lg mb-2 shadow-md">
          <p class="text-sm">Check out this new dashboard mock-up.</p>
          <span class="block text-xs font-medium text-blue-100 mt-1 text-left">10:40 AM</span>
          <div class="absolute -right-1.5 top-1/2 -translate-y-1/2 w-3 h-3 bg-blue-400 dark:bg-blue-700 transform rotate-45 rounded-sm shadow-md" style="clip-path: polygon(0 0, 100% 0, 100% 100%);"></div>
        </div>
      </div>

    </div>

    <!-- Message Input Area -->
    <div class="p-4 sm:p-5 lg:p-6 border-t border-warm-beige-300/50 dark:border-gray-700/50 flex items-center space-x-3 sm:space-x-4 shadow-inner-bottom z-10" 
         style="box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05), inset 0 1px 0 rgba(0,0,0,0.05), 0 -2px 5px rgba(0,0,0,0.05);">
      <button class="p-2 rounded-full bg-warm-beige-300/70 dark:bg-gray-700/70 text-gray-700 dark:text-gray-200 hover:bg-warm-beige-400 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-105 shadow-md">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path></svg>
      </button>
      <input type="text" placeholder="Type a message..." class="flex-1 p-3 rounded-full bg-warm-beige-200 dark:bg-gray-700 text-gray-800 dark:text-gray-100 border border-warm-beige-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-warm-beige-400 dark:focus:ring-blue-500 shadow-inner 3d-input-effect" 
             style="box-shadow: inset 2px 2px 5px rgba(0,0,0,0.1), inset -2px -2px 5px rgba(255,255,255,0.1);">
      <button class="p-2 rounded-full bg-gradient-to-br from-blue-400 to-blue-500 dark:from-blue-600 dark:to-blue-700 text-white hover:from-blue-500 hover:to-blue-600 dark:hover:from-blue-700 dark:hover:to-blue-800 transition-colors duration-200 transform hover:scale-105 shadow-lg message-send-button">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
      </button>
    </div>

  </div>
</div>

<!-- Custom Styles for 3D effect / Scrollbar / Colors -->
<style>
  /* Warm Neutral Colors */
  .bg-warm-beige-100 { background-color: #f7f3ed; } /* Lightest */
  .bg-warm-beige-200 { background-color: #ede7de; } /* Light */
  .bg-warm-beige-300 { background-color: #dcd3c4; } /* Medium */
  .bg-warm-beige-300\/70 { background-color: rgba(220, 211, 196, 0.7); }
  .bg-warm-beige-400 { background-color: #c9bfb0; } /* Dark */
  .border-warm-beige-300 { border-color: #dcd3c4; }
  .border-warm-beige-300\/50 { border-color: rgba(220, 211, 196, 0.5); }
  .focus\:ring-warm-beige-400:focus { --tw-ring-color: #c9bfb0; }

  /* Dark Mode specific background-colors for gradients */
  .dark\:from-gray-850 { --tw-gradient-from: #1f2937; --tw-gradient-to: rgba(31, 41, 55, 0); }
  .dark\:to-gray-850 { --tw-gradient-to: #1f2937; }
  .dark\:from-gray-750 { --tw-gradient-from: #374151; --tw-gradient-to: rgba(55, 65, 81, 0); }
  .dark\:to-gray-750 { --tw-gradient-to: #374151; }

  /* Custom Scrollbar for Webkit */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: var(--tw-scrollbar-thumb) var(--tw-scrollbar-track);
  }
  .scrollbar-thumb-gray-400 { --tw-scrollbar-thumb: #9ca3af; }
  .scrollbar-track-warm-beige-200 { --tw-scrollbar-track: #ede7de; }
  .dark .scrollbar-thumb-gray-600 { --tw-scrollbar-thumb: #4b5563; }
  .dark .scrollbar-track-gray-800 { --tw-scrollbar-track: #1f2937; }

  /* For Chrome, Safari, etc. */
  .scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .scrollbar-thin::-webkit-scrollbar-track {
    background: var(--tw-scrollbar-track);
    border-radius: var(--tw-scrollbar-track-rounded);
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: var(--tw-scrollbar-thumb);
    border-radius: var(--tw-scrollbar-thumb-rounded);
    border: 2px solid var(--tw-scrollbar-track);
  }
  /* Tailwind utility placeholders */
  .scrollbar-thumb-rounded-full::-webkit-scrollbar-thumb { border-radius: 9999px; }
  .scrollbar-track-rounded-full::-webkit-scrollbar-track { border-radius: 9999px; }

  /* 3D specific effects */
  .perspective-1000 {
    perspective: 1000px;
  }
  .transform-rotate-x-1 {
    transform: rotateX(1deg);
  }
  .transform--rotate-x-1 {
    transform: rotateX(-1deg);
  }
  .shadow-inner-top {
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.05);
  }
   .shadow-inner-bottom {
      box-shadow: inset 0 -1px 0 rgba(255,255,255,0.05), inset 0 1px 0 rgba(0,0,0,0.05), 0 -2px 5px rgba(0,0,0,0.05);
  }

  /* Hide the triangle using clip-path on the bubble pseudo-elements */
  .message-send-button {
    position: relative;
    overflow: hidden;
  }

  .message-send-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s ease-out;
    opacity: 0;
  }

  .message-send-button:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

</style>

カルーセルスライダーコンポーネント

教育プラットフォーム向けの複雑なレトロ/ビンテージスタイルのカルーセルスライダーコンポーネントで、落ち着いた色、プロフェッショナルなデザイン、ダークモードをサポートする完全な応答性が特徴です。企業/プロフェッショナルな環境向けに設計されています。

開けるプレビュー

                <section class="relative w-full overflow-hidden bg-gray-50 dark:bg-gray-900 py-8 md:py-16 lg:py-20">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-3xl md:text-4xl font-extrabold text-gray-800 dark:text-gray-100 text-center mb-10 md:mb-14 font-serif relative z-10">
      Explore Our Courses
      <span class="block w-24 h-1 bg-yellow-600 dark:bg-yellow-400 mx-auto mt-2"></span>
    </h2>

    <!-- Carousel Wrapper (Static for this example as JS is not allowed) -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10 relative z-10">

      <!-- Carousel Item 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-t-4 border-l-4 border-blue-700 dark:border-blue-500">
        <img src="https://picsum.photos/400/250?random=1" alt="Course Image" class="w-full h-48 object-cover object-center">
        <div class="p-6">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm font-semibold text-yellow-700 dark:text-yellow-400 bg-yellow-100 dark:bg-yellow-800 px-3 py-1 rounded-full">New</span>
            <span class="text-gray-500 dark:text-gray-400 text-sm">24 Lessons</span>
          </div>
          <h3 class="text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3 leading-tight">Foundations of Digital Marketing</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">Master the essentials of online advertising, SEO, social media, and content creation to build effective digital campaigns.</p>
          <div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex items-center justify-between">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Instructor Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-rose-500">
              <span class="text-gray-700 dark:text-gray-200 text-sm font-medium">Dr. Alex Turner</span>
            </div>
            <a href="#" class="inline-flex items-center px-4 py-2 bg-blue-700 dark:bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200">
              Enroll Now
              <svg class="ml-2 -mr-1 w-4 h-4" 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>

      <!-- Carousel Item 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-t-4 border-l-4 border-green-700 dark:border-green-500">
        <img src="https://picsum.photos/400/250?random=2" alt="Course Image" class="w-full h-48 object-cover object-center">
        <div class="p-6">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm font-semibold text-rose-700 dark:text-rose-400 bg-rose-100 dark:bg-rose-800 px-3 py-1 rounded-full">Trending</span>
            <span class="text-gray-500 dark:text-gray-400 text-sm">36 Lessons</span>
          </div>
          <h3 class="text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3 leading-tight">Advanced Data Science with Python</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">Dive deep into machine learning algorithms, statistical modeling, and big data analysis using Python libraries.</p>
          <div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex items-center justify-between">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Instructor Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-blue-500">
              <span class="text-gray-700 dark:text-gray-200 text-sm font-medium">Prof. Sarah Chen</span>
            </div>
            <a href="#" class="inline-flex items-center px-4 py-2 bg-blue-700 dark:bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200">
              Enroll Now
              <svg class="ml-2 -mr-1 w-4 h-4" 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>

      <!-- Carousel Item 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-[1.02] border-t-4 border-l-4 border-rose-700 dark:border-rose-500">
        <img src="https://picsum.photos/400/250?random=3" alt="Course Image" class="w-full h-48 object-cover object-center">
        <div class="p-6">
          <div class="flex items-center justify-between mb-4">
            <span class="text-sm font-semibold text-blue-700 dark:text-blue-400 bg-blue-100 dark:bg-blue-800 px-3 py-1 rounded-full">Popular</span>
            <span class="text-gray-500 dark:text-gray-400 text-sm">18 Lessons</span>
          </div>
          <h3 class="text-xl md:text-2xl font-bold text-gray-800 dark:text-gray-100 mb-3 leading-tight">Effective Business Communication</h3>
          <p class="text-gray-600 dark:text-gray-300 text-sm mb-4 line-clamp-3">Improve your verbal, non-verbal, and written communication skills for professional success in any industry.</p>
          <div class="border-t border-gray-200 dark:border-gray-700 pt-4 flex items-center justify-between">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/women/7.jpg" alt="Instructor Avatar" class="w-8 h-8 rounded-full mr-2 border-2 border-emerald-500">
              <span class="text-gray-700 dark:text-gray-200 text-sm font-medium">Ms. Emily White</span>
            </div>
            <a href="#" class="inline-flex items-center px-4 py-2 bg-blue-700 dark:bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200">
              Enroll Now
              <svg class="ml-2 -mr-1 w-4 h-4" 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>

    <!-- Pagination Dots (Visual only, no JS) -->
    <div class="flex justify-center items-center space-x-3 mt-10 md:mt-14 relative z-10">
      <button type="button" class="w-3 h-3 rounded-full bg-blue-700 dark:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200" aria-label="Slide 1"></button>
      <button type="button" class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 hover:bg-blue-400 dark:hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200" aria-label="Slide 2"></button>
      <button type="button" class="w-3 h-3 rounded-full bg-gray-300 dark:bg-gray-600 hover:bg-blue-400 dark:hover:bg-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors duration-200" aria-label="Slide 3"></button>
    </div>

    <!-- Decorative Background Elements (Visual only) -->
    <div class="absolute inset-0 z-0 opacity-10 dark:opacity-5">
      <svg class="w-full h-full" viewBox="0 0 1440 320" preserveAspectRatio="none">
        <defs>
          <pattern id="retro-pattern" patternUnits="userSpaceOnUse" width="60" height="60">
            <rect x="0" y="0" width="60" height="60" fill="var(--color-bg)"/>
            <path d="M30 0L60 30L30 60L0 30Z" fill="var(--color-pattern-dark)" opacity="0.2"/>
            <rect x="15" y="15" width="30" height="30" fill="var(--color-pattern-light)" opacity="0.3"/>
          </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#retro-pattern)"/>
        <style>
          .dark {
            --color-bg: #111827; /* gray-900 */
            --color-pattern-dark: #374151; /* gray-700 */
            --color-pattern-light: #4b5563; /* gray-600 */
          }
          /* Default (Light Mode) */
          :not(.dark) {
            --color-bg: #f9fafb; /* gray-50 */
            --color-pattern-dark: #d1d5db; /* gray-300 */
            --color-pattern-light: #e5e7eb; /* gray-200 */
          }
        </style>
      </svg>
    </div>

  </div>
</section>

トップに戻るボタンコンポーネント - Brutalism Earth Tones

ブルータリズムスタイルでデザインされた複雑な「Back to Top」ボタンコンポーネントで、素朴な配色で、ブログ/コンテンツサイトに適しています。レスポンシブで、ダークモードのサポートが含まれています。

開けるプレビュー

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Outer 'Frame' Element -->
  <div class="p-2 border-2 border-stone-800 dark:border-stone-200 bg-stone-100 dark:bg-stone-900 shadow-brutalist-light dark:shadow-brutalist-dark transition-colors duration-300 md:p-3 lg:p-4">
    <!-- Inner 'Button' Element -->
    <a href="#top" aria-label="Scroll back to top" class="block w-16 h-16 md:w-20 md:h-20 lg:w-24 lg:h-24 bg-stone-700 dark:bg-stone-300 text-stone-100 dark:text-stone-900 border-2 border-stone-900 dark:border-stone-100 flex items-center justify-center relative overflow-hidden group transition-all duration-300 transform hover:scale-105 active:scale-95 focus:outline-none focus:ring-4 focus:ring-stone-500 dark:focus:ring-stone-400 focus:ring-offset-2 focus:ring-offset-stone-100 dark:focus:ring-offset-stone-900">
      <!-- Brutalist Background Slash/Pattern -->
      <div class="absolute inset-0 bg-stone-600 dark:bg-stone-400 transform -rotate-45 scale-150 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
      
      <!-- Main Arrow Icon -->
      <svg class="w-10 h-10 md:w-12 md:h-12 lg:w-16 lg:h-16 relative z-10 animate-arrow-bounce group-hover:animate-arrow-static transition-transform duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"></path>
      </svg>
      
      <!-- Brutalist Text Overlay (hidden until hover/focus) -->
      <span class="absolute text-xs md:text-sm lg:text-base font-bold uppercase tracking-widest opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 z-20 -bottom-full group-hover:bottom-2 group-focus:bottom-2 transform rotate-90 origin-bottom-left group-hover:rotate-0 group-focus:rotate-0 transition-all duration-300 text-stone-100 dark:text-stone-900 bg-stone-800 dark:bg-stone-200 px-1 py-0.5 rounded-sm">TOP</span>
    </a>
  </div>
</div>

<style>
  /* Add this if you need custom keyframe animations not covered by default Tailwind */
  @keyframes arrow-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
  }

  .animate-arrow-bounce {
    animation: arrow-bounce 1.5s infinite;
  }

  .group:hover .animate-arrow-bounce, .group:focus .animate-arrow-bounce {
    animation: none; /* Stop bounce on hover/focus */
    transform: translateY(-5px); /* Optional: slight lift on hover */
  }

  /* Custom shadow for brutalism */
  .shadow-brutalist-light {
    box-shadow: 8px 8px 0px 0px #292524; /* Color-aligned with stone-800 */
  }
  .dark .shadow-brutalist-dark {
    box-shadow: 8px 8px 0px 0px #ede9e9; /* Color-aligned with stone-200 */
  }
</style>

セッションタイムアウト警告コンポーネント

レトロ/ビンテージの配色を備えたミニマリストでフラットなデザインのセッションタイムアウトアラートコンポーネントで、シンプルなレイアウト、完全な応答性、ブログ/コンテンツサイトのダークモードサポートを特徴としています。

開けるプレビュー

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-500 bg-opacity-60 dark:bg-gray-900 dark:bg-opacity-75 font-sans">
  <div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-orange-100 dark:bg-stone-800 text-stone-800 dark:text-stone-100 border-t-4 border-orange-500 dark:border-orange-600 transform transition-all duration-300 ease-in-out scale-100 hover:scale-105 hover:shadow-2xl">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-xl md:text-2xl font-bold text-orange-700 dark:text-orange-400">Session Expiring Soon!</h3>
      <svg class="w-8 h-8 text-orange-600 dark:text-orange-500" 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 16zm-1-8a1 1 0 10-2 0v4a1 1 0 102 0v-4zm-1-3a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd"></path>
      </svg>
    </div>
    <p class="text-sm md:text-base mb-6 text-stone-700 dark:text-stone-200 leading-relaxed">
      Your session is about to expire due to inactivity. Please extend your session to continue browsing.
    </p>
    <div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-3">
      <button class="flex-1 px-5 py-2 rounded-md font-semibold text-sm bg-orange-500 hover:bg-orange-600 dark:bg-orange-600 dark:hover:bg-orange-700 text-white shadow-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-opacity-75">
        Extend Session
      </button>
      <button class="flex-1 px-5 py-2 rounded-md font-semibold text-sm bg-gray-300 hover:bg-gray-400 dark:bg-stone-700 dark:hover:bg-stone-600 text-stone-700 dark:text-stone-200 shadow-md transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-75">
        Log Out
      </button>
    </div>
  </div>
</div>

Course_Grid_Layout_Component

教育プラットフォーム向けのレスポンシブで視覚的に魅力的なグリッドレイアウトコンポーネントで、温かみのある夕焼けの色調、マテリアルデザインの影、ダークモードのサポートを備えたコースカードを備えています。

開けるプレビュー

                <div class="bg-gradient-to-br from-orange-50 to-amber-100 py-12 dark:from-gray-900 dark:to-gray-800 transition-colors duration-500 min-h-screen">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl font-extrabold text-orange-800 mb-8 text-center dark:text-amber-300">
      Explore Our Courses
    </h2>
    <p class="text-lg text-orange-700 mb-12 text-center max-w-2xl mx-auto dark:text-gray-300">
      Dive into a world of knowledge with our expertly curated courses. From foundational concepts to advanced topics, there's always something new to learn.
    </p>

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

      <!-- Course Card 1 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=1" alt="Course thumbnail - Web Development Basics" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Web Development Fundamentals</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Learn the essentials of HTML, CSS, and JavaScript to build your first websites. Perfect for beginners!</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.8 (1,234 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/7.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">John Doe</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 2 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=2" alt="Course thumbnail - Data Science Essentials" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Data Science Essentials</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Uncover the power of data analysis, statistics, and machine learning algorithms using Python.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.9 (987 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Jane Smith</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 3 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=3" alt="Course thumbnail - Mobile App Development" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Mobile App Development with React Native</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Build cross-platform mobile applications for iOS and Android using a single codebase.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.7 (765 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/9.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Emily White</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 4 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=4" alt="Course thumbnail - Digital Marketing Strategy" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Digital Marketing Strategy</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Master SEO, social media, content marketing, and paid advertising to boost online presence.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.6 (1,012 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">David Lee</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 5 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=5" alt="Course thumbnail - UI/UX Design Fundamentals" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">UI/UX Design Fundamentals</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Craft intuitive and beautiful user interfaces and experiences with design principles.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.9 (890 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/11.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Chris Green</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 6 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=6" alt="Course thumbnail - Cloud Computing Basics" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Cloud Computing Fundamentals</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Get started with cloud platforms like AWS, Azure, and Google Cloud, covering core services.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.7 (654 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/12.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Olivia Brown</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 7 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=7" alt="Course thumbnail - Cybersecurity Introduction" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Cybersecurity Intro</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Understand common cyber threats and how to protect systems and data from attacks.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-yellow-500 dark:text-yellow-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.5 (501 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/men/13.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Robert Hall</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

      <!-- Course Card 8 -->
      <div class="bg-white rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 dark:bg-gray-800 dark:shadow-slate-700 dark:hover:shadow-slate-600 flex flex-col">
        <img src="https://picsum.photos/400/250?random=8" alt="Course thumbnail - Project Management Basics" class="rounded-t-xl object-cover h-48 w-full">
        <div class="p-6 flex-grow flex flex-col">
          <h3 class="text-xl font-bold text-orange-800 mb-2 dark:text-amber-300">Project Management PMBOK</h3>
          <p class="text-sm text-gray-600 mb-4 dark:text-gray-400 flex-grow">Learn agile methodologies, project planning, execution, and risk management.</p>
          <div class="flex items-center text-sm text-gray-500 mb-4 dark:text-gray-400">
            <svg class="w-4 h-4 mr-1 text-orange-500 dark:text-orange-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.565-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.92 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
            <span>4.8 (1,500 reviews)</span>
          </div>
          <div class="flex items-center mb-4">
            <img class="w-8 h-8 rounded-full mr-3 border-2 border-orange-300 dark:border-amber-500" src="https://randomuser.me/api/portraits/women/14.jpg" alt="Instructor avatar">
            <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Sophia Clark</span>
          </div>
          <a href="#" class="mt-auto inline-block bg-orange-600 text-white font-medium py-3 px-6 rounded-lg text-center shadow-md hover:bg-orange-700 transition-colors duration-300 dark:bg-amber-600 dark:hover:bg-amber-700">
            View Course
          </a>
        </div>
      </div>

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

不動産物件リスティングカード

不動産リスティングプラットフォーム向けに設計された、企業の青い色調の複雑な紙/印刷風の不動産物件リスティングカード。レスポンシブレイアウト、ダークモードのサポート、およびプロパティに関する複数の詳細を備えています。

開けるプレビュー

                <div class="font-sans antialiased bg-blue-50 dark:bg-gray-900 min-h-screen p-4 sm:p-6 lg:p-8 flex items-center justify-center">
  <div class="max-w-6xl w-full bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden md:flex flex-col xl:flex-row relative z-10 animate-fade-in-up">
    
    <!-- Paper Texture Overlay (Non-interactive, for aesthetic) -->
    <div class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/paper-fibers.png')] opacity-20 dark:opacity-10 pointer-events-none z-0"></div>

    <!-- Property Image Section -->
    <div class="md:flex-shrink-0 md:w-1/2 xl:w-2/5 p-4 sm:p-5 md:p-6 lg:p-8 relative flex items-center justify-center z-10">
      <div class="relative w-full h-64 sm:h-72 md:h-80 xl:h-full max-h-[600px] rounded-lg overflow-hidden shadow-lg border border-blue-100 dark:border-blue-900">
        <img src="https://picsum.photos/id/1050/800/600" alt="Luxury Modern Home Exterior" class="w-full h-full object-cover object-center transform transition-transform duration-500 hover:scale-105">
        <div class="absolute top-4 left-4 bg-blue-600 text-white text-xs sm:text-sm px-3 py-1 rounded-full font-semibold shadow-md">FOR SALE</div>
        <div class="absolute bottom-4 right-4 bg-white/90 dark:bg-gray-700/90 text-blue-800 dark:text-blue-200 text-sm sm:text-base px-3 py-1 rounded-full font-bold shadow-md ring-1 ring-blue-200 dark:ring-blue-700">$1,250,000</div>
        <button class="absolute top-4 right-4 bg-white/90 dark:bg-gray-700/90 text-blue-600 dark:text-blue-400 p-2 rounded-full shadow-md hover:bg-white dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
        </button>
        <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/60 to-transparent p-4 text-white text-sm flex justify-between">
          <span>Photos (18)</span>
          <span>Video Tour</span>
        </div>
      </div>
    </div>

    <!-- Property Details Section -->
    <div class="p-4 sm:p-5 md:p-6 lg:p-8 md:flex-grow xl:w-3/5 flex flex-col justify-between z-10">
      <div>
        <h2 class="text-2xl sm:text-3xl lg:text-4xl font-extrabold text-blue-900 dark:text-blue-100 mb-2 leading-tight">
          <a href="#" class="hover:underline">Elegant Family Residence</a>
        </h2>
        <p class="text-blue-700 dark:text-blue-300 text-base sm:text-lg mb-4 flex items-center">
          <svg class="w-5 h-5 mr-2 text-blue-500" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"></path></svg>
          123 Harmony Lane, Metropolis City, NY
        </p>
        <p class="text-gray-700 dark:text-gray-300 text-sm sm:text-base leading-relaxed mb-6">
          Discover the perfect blend of luxury and comfort in this stunning new-build home. Boasting an open-concept design, premium finishes, and a sprawling backyard, it's an entertainer's dream. Located in a top-rated school district with easy access to urban amenities.
        </p>

        <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-6 text-blue-800 dark:text-blue-200">
          <div class="flex items-center text-sm sm:text-base font-medium">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1 sm:mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.459 4.805a1 1 0 01-1.395 0c-.604-.621-1.258-1.28-1.944-1.895A10.027 10.027 0 0110 15c-1.574 0-3.1-.383-4.402-1.155-.686.615-1.339 1.274-1.943 1.895a1 1 0 01-1.395 0 1 1 0 010-1.395c.966-.996 2.015-2.046 3.146-3.047A7.004 7 0 003 10a7 7 0 0014 0 7.004 7 0 00-3.602-5.442c-1.13.996-2.18 2.046-3.146 3.047a1 1 0 010 1.395z"></path></svg>
            5 Beds
          </div>
          <div class="flex items-center text-sm sm:text-base font-medium">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1 sm:mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8 4a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V8a2 2 0 00-2-2h-3V5a1 1 0 00-1-1H8zm1 3H8v1h4V7h-1v1zM6 9v1h8V9H6zm0 2h8v1H6zm0 2h8v1H6zm0 2h8v1H6z" clip-rule="evenodd"></path></svg>
            3 Baths
          </div>
          <div class="flex items-center text-sm sm:text-base font-medium">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1 sm:mr-2 text-blue-500 dark:text-blue-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 6a3 3 0 013-3h10a1 1 0 01.8.4l2 3a1 1 0 010 1.2l-2 3a1 1 0 01-.8.4H6a3 3 0 01-3-3V6zm4-1a1 1 0 00-1 1v4a1 1 0 001 1h2a1 1 0 001-1V6a1 1 0 00-1-1H7z" clip-rule="evenodd"></path></svg>
            3,200 sqft
          </div>
          <div class="flex items-center text-sm sm:text-base font-medium">
            <svg class="w-5 h-5 sm:w-6 sm:h-6 mr-1 sm:mr-2 text-blue-500 dark:text-blue-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 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l3 3a1 1 0 001.414-1.414L11 9.586V6z" clip-rule="evenodd"></path></svg>
            Built 2022
          </div>
        </div>

        <!-- Additional Details Tabs/Sections -->
        <div class="border-t border-b border-blue-100 dark:border-blue-700 py-4 mb-6">
          <div class="flex space-x-4 overflow-x-auto pb-2 scrollbar-hide">
            <button class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-full bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100 shadow hover:bg-blue-200 dark:hover:bg-blue-600 transition-colors duration-200">Overview</button>
            <button class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200">Features</button>
            <button class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200">Neighborhood</button>
            <button class="flex-shrink-0 px-4 py-2 text-sm font-medium rounded-full bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors duration-200">Mortgage</button>
          </div>
        </div>

        <div class="text-gray-700 dark:text-gray-300 text-sm mb-6 flex flex-wrap gap-2 sm:gap-4">
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Central Air</span>
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Hardwood Floors</span>
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Two-Car Garage</span>
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Smart Home Tech</span>
          <span class="px-3 py-1 bg-blue-50 dark:bg-gray-700 rounded-full text-blue-700 dark:text-blue-300 text-xs sm:text-sm font-medium border border-blue-100 dark:border-blue-600">Spacious Yard</span>
        </div>

      </div>

      <!-- Agent Contact & Action Buttons -->
      <div class="flex flex-col sm:flex-row sm:items-center justify-between pt-4 border-t border-blue-100 dark:border-blue-700 mt-auto">
        <div class="flex items-center mb-4 sm:mb-0">
          <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Agent Name" class="w-10 h-10 rounded-full mr-3 border-2 border-blue-400 dark:border-blue-600 shadow-md">
          <div>
            <p class="text-gray-800 dark:text-blue-100 font-semibold text-sm sm:text-base">John Doe</p>
            <p class="text-blue-600 dark:text-blue-300 text-xs sm:text-sm">Leading Agent</p>
          </div>
        </div>
        <div class="flex flex-col sm:flex-row gap-3 w-full sm:w-auto">
          <button class="flex-grow sm:flex-grow-0 px-5 py-2.5 rounded-full bg-blue-700 text-white font-semibold text-sm sm:text-base hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700 shadow-lg transform active:scale-95 transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path></svg>
            Call Agent
          </button>
          <button class="flex-grow sm:flex-grow-0 px-5 py-2.5 rounded-full border border-blue-700 dark:border-blue-500 text-blue-700 dark:text-blue-400 font-semibold text-sm sm:text-base hover:bg-blue-50 dark:hover:bg-blue-800 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500">
            <svg class="w-4 h-4 sm:w-5 sm:h-5 inline-block mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"></path><path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"></path></svg>
            Email Agent
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  /* Custom scrollbar for better aesthetics, especially in dark mode */
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  
  /* Animation for the card */
  @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.6s ease-out forwards;
  }
</style>

Retro_Jewel_Tone_Entertainment_Layout

エンターテインメントプラットフォーム向けの適度な複雑さのレトロ/ビンテージ風のレイアウトコンポーネントで、豊かなジュエルトーンとダークモードのサポートによる完全な応答性が特徴です。

開けるプレビュー

                <div class="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 text-purple-200 dark:bg-gradient-to-br dark:from-gray-900 dark:via-black dark:to-gray-900 dark:text-gray-200 font-sans">

  <!-- Header -->
  <header class="bg-purple-950/70 backdrop-blur-sm shadow-lg py-4 px-6 md:px-10 dark:bg-black/70 flex justify-between items-center z-10 relative">
    <div class="flex items-center space-x-4">
      <img src="https://picsum.photos/60/60?random=1" alt="Logo" class="h-10 w-10 md:h-12 md:w-12 rounded-full border-2 border-emerald-500 shadow-md retro-glow-md">
      <h1 class="text-3xl md:text-4xl font-bold tracking-wider text-emerald-400 drop-shadow-lg font-mono-retro">VCR-Vision</h1>
    </div>
    <nav class="hidden md:flex space-x-6">
      <a href="#" class="text-emerald-300 hover:text-emerald-100 transition duration-300 transform hover:scale-105 px-3 py-1 rounded-md text-lg relative group overflow-hidden font-header-retro">
        Home
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-400 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-emerald-300 hover:text-emerald-100 transition duration-300 transform hover:scale-105 px-3 py-1 rounded-md text-lg relative group overflow-hidden font-header-retro">
        Movies
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-400 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-emerald-300 hover:text-emerald-100 transition duration-300 transform hover:scale-105 px-3 py-1 rounded-md text-lg relative group overflow-hidden font-header-retro">
        TV Shows
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-400 transition-all duration-300 group-hover:w-full"></span>
      </a>
      <a href="#" class="text-emerald-300 hover:text-emerald-100 transition duration-300 transform hover:scale-105 px-3 py-1 rounded-md text-lg relative group overflow-hidden font-header-retro">
        Genres
        <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-emerald-400 transition-all duration-300 group-hover:w-full"></span>
      </a>
    </nav>
    <div class="flex items-center space-x-4">
        <button class="md:hidden text-emerald-300 hover:text-emerald-100">
            <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="M4 6h16M4 12h16M4 18h16"></path></svg>
        </button>
        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="User Avatar" class="h-10 w-10 md:h-12 md:w-12 rounded-full border-2 border-sapphire-400 shadow-md retro-glow-sm">
    </div>
  </header>

  <!-- Main Content Area -->
  <main class="container mx-auto px-4 py-8 md:py-12 relative z-0">

    <!-- Hero Section -->
    <section class="mb-12 relative rounded-lg overflow-hidden shadow-2xl border-4 border-sapphire-500 backdrop-blur-lg animated-shadow-border">
      <img src="https://picsum.photos/1200/600?random=2" alt="Featured Content" class="w-full h-64 md:h-96 object-cover object-top filter dark:brightness-75">
      <div class="absolute inset-0 bg-gradient-to-t from-black via-transparent to-transparent opacity-90">
        <div class="absolute bottom-0 left-0 p-6 md:p-10">
          <h2 class="text-4xl md:text-6xl font-bold mb-2 text-ruby-400 drop-shadow-lg font-mono-retro tracking-wide">The Pixel Odyssey</h2>
          <p class="text-xl md:text-2xl text-emerald-200 mb-4 max-w-2xl font-body-retro leading-snug tracking-wide">Explore a groundbreaking journey through digital realms. A visual spectacle unlike any other, rated PG-13.</p>
          <div class="flex space-x-4">
            <button class="bg-ruby-600 hover:bg-ruby-700 text-white font-bold py-3 px-6 rounded-lg text-lg transform hover:scale-105 transition duration-300 shadow-lg border-2 border-ruby-400 retro-button-glow">
              Play Now
            </button>
            <button class="bg-transparent border-2 border-emerald-500 text-emerald-300 hover:bg-emerald-500 hover:text-white font-bold py-3 px-6 rounded-lg text-lg transform hover:scale-105 transition duration-300 shadow-lg retro-button-glow">
              More Info
            </button>
          </div>
        </div>
      </div>
    </section>

    <!-- Content Carousel/Categories -->
    <section class="mb-12">
      <h3 class="text-3xl md:text-4xl font-bold mb-6 text-sapphire-400 font-mono-retro tracking-wider drop-shadow-md">Trending Now</h3>
      <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-6">
        <!-- Card 1 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
          <img src="https://picsum.photos/300/200?random=3" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
          <div class="p-4">
            <h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">Galactic Glitch</h4>
            <p class="text-sm text-purple-300">Sci-Fi Adventure</p>
          </div>
        </div>
        <!-- Card 2 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
          <img src="https://picsum.photos/300/200?random=4" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
          <div class="p-4">
            <h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">Neon Nights</h4>
            <p class="text-sm text-purple-300">Cyberpunk Thriller</p>
          </div>
        </div>
        <!-- Card 3 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
          <img src="https://picsum.photos/300/200?random=5" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
          <div class="p-4">
            <h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">VHS Voodoo</h4>
            <p class="text-sm text-purple-300">Horror Mystery</p>
          </div>
        </div>
        <!-- Card 4 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
          <img src="https://picsum.photos/300/200?random=6" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
          <div class="p-4">
            <h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">Digital Dreamscapes</h4>
            <p class="text-sm text-purple-300">Fantasy Epic</p>
          </div>
        </div>
        <!-- Card 5 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 transform hover:scale-105 transition duration-300 group retro-card-glow">
          <img src="https://picsum.photos/300/200?random=7" alt="Content Title" class="w-full h-36 object-cover group-hover:brightness-125 transition-all duration-300">
          <div class="p-4">
            <h4 class="text-lg font-semibold text-emerald-300 mb-1 font-body-retro">Arcade Apocalypse</h4>
            <p class="text-sm text-purple-300">Action Comedy</p>
          </div>
        </div>
      </div>
    </section>

    <!-- Interactive Block (e.g., ad or special offer) -->
    <section class="mb-12 bg-emerald-800/60 p-8 rounded-lg shadow-xl border-4 border-emerald-500 text-center relative overflow-hidden animated-scanline">
        <div class="absolute inset-0 bg-grid-pattern opacity-10 dark:opacity-5"></div>
        <h3 class="text-3xl md:text-5xl font-extrabold text-ruby-300 mb-4 relative z-10 font-mono-retro drop-shadow-xl animated-text-flicker">EXCLUSIVE RETRO DEAL!</h3>
        <p class="text-xl md:text-2xl text-emerald-200 mb-6 relative z-10 font-body-retro leading-tight">Get 3 months FREE on premium access with code:
            <span class="block mt-2 text-ruby-400 text-4xl md:text-5xl font-bold bg-purple-900/50 inline-block px-4 py-2 rounded-lg border-2 border-ruby-500 box-shadow-code retro-button-glow">VCR-GEMS</span>
        </p>
        <button class="bg-ruby-700 hover:bg-ruby-800 text-white font-bold py-4 px-8 rounded-full text-xl transform hover:scale-105 transition duration-300 shadow-xl border-4 border-ruby-500 relative z-10 retro-button-glow">
            Claim Offer Now!
        </button>
    </section>

    <!-- More Content Categories -->
    <section>
      <h3 class="text-3xl md:text-4xl font-bold mb-6 text-sapphire-400 font-mono-retro tracking-wider drop-shadow-md">Staff Picks</h3>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
        <!-- Featured Item 1 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 md:flex items-center text-left retro-card-glow">
          <img src="https://picsum.photos/400/250?random=8" alt="Staff Pick" class="w-full md:w-1/2 h-56 md:h-auto object-cover">
          <div class="p-6 flex-1">
            <h4 class="text-2xl font-bold text-emerald-300 mb-2 font-mono-retro">The Quantum Loop</h4>
            <p class="text-base text-purple-300 mb-4 font-body-retro">A mind-bending sci-fi thriller about time paradoxes and alternate realities. Gripping from start to finish.</p>
            <button class="bg-sapphire-600 hover:bg-sapphire-700 text-white font-bold py-2 px-5 rounded-md text-base retro-button-glow">
              Watch Now
            </button>
          </div>
        </div>
        <!-- Featured Item 2 -->
        <div class="bg-purple-950/60 rounded-lg overflow-hidden shadow-xl border-2 border-purple-700 md:flex items-center text-left retro-card-glow">
          <img src="https://picsum.photos/400/250?random=9" alt="Staff Pick" class="w-full md:w-1/2 h-56 md:h-auto object-cover">
          <div class="p-6 flex-1">
            <h4 class="text-2xl font-bold text-emerald-300 mb-2 font-mono-retro">Synthwave City</h4>
            <p class="text-base text-purple-300 mb-4 font-body-retro">Dive into the vibrant, dangerous streets of a neon-soaked metropolis. A must-see for all 80s enthusiasts.</p>
            <button class="bg-sapphire-600 hover:bg-sapphire-700 text-white font-bold py-2 px-5 rounded-md text-base retro-button-glow">
              Watch Now
            </button>
          </div>
        </div>
      </div>
    </section>

  </main>

  <!-- Footer -->
  <footer class="bg-purple-950/70 backdrop-blur-sm py-8 px-6 md:px-10 dark:bg-black/70 mt-12 shadow-inner border-t-2 border-purple-800 dark:border-gray-800">
    <div class="container mx-auto flex flex-col md:flex-row justify-between items-center text-sm">
      <div class="mb-4 md:mb-0 text-emerald-400 font-mono-retro drop-shadow-md">
        &copy; 2023 VCR-Vision. All rights reserved.
      </div>
      <nav class="flex flex-wrap justify-center md:justify-end gap-x-6 gap-y-2 text-emerald-300 font-header-retro">
        <a href="#" class="hover:text-emerald-100 transition duration-200 transform hover:scale-105">Privacy Policy</a>
        <a href="#" class="hover:text-emerald-100 transition duration-200 transform hover:scale-105">Terms of Service</a>
        <a href="#" class="hover:text-emerald-100 transition duration-200 transform hover:scale-105">Contact Us</a>
        <a href="#" class="hover:text-emerald-100 transition duration-200 transform hover:scale-105">Sitemap</a>
      </nav>
    </div>
  </footer>

  <!-- Custom Styles (for fonts and animations) - typically in a <style> tag or CSS file -->
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');

    .font-mono-retro {
        font-family: 'Press Start 2P', cursive;
    }
    .font-header-retro {
        font-family: 'Press Start 2P', cursive;
        font-size: 0.9em; /* Adjust to make it fit better */
    }
    .font-body-retro {
        font-family: 'VT323', monospace;
    }

    /* Retro Glow Effect for Elements */
    .retro-glow-md {
        box-shadow: 0 0px 10px rgba(6, 182, 212, 0.7), /* Cyan */
                    0 0px 20px rgba(139, 92, 246, 0.5); /* Violet */
        transition: all 0.3s ease-in-out;
    }
    .retro-glow-sm {
        box-shadow: 0 0px 8px rgba(6, 182, 212, 0.5), /* Cyan */
                    0 0px 15px rgba(139, 92, 246, 0.3); /* Violet */
        transition: all 0.3s ease-in-out;
    }
    .retro-button-glow:hover {
        box-shadow: 0 0 15px rgba(251, 191, 36, 0.8), /* Amber */
                    0 0 25px rgba(239, 68, 68, 0.6); /* Red */
    }
    .retro-card-glow {
        transition: all 0.3s ease-out;
    }
    .retro-card-glow:hover {
        box-shadow: 0 0 15px rgba(16, 185, 129, 0.8), /* Green */
                    0 0 25px rgba(59, 130, 246, 0.6); /* Blue */
    }

    /* Animated Scanline Effect */
    .animated-scanline {
        position: relative;
        overflow: hidden;
    }
    .animated-scanline::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: linear-gradient(to right, transparent, rgba(255,255,255,0.7), transparent);
        animation: scanlineEffect 4s linear infinite;
        opacity: 0.5;
    }

    @keyframes scanlineEffect {
        0% { transform: translateY(0%); }
        50% { transform: translateY(1000%); }
        100% { transform: translateY(0%); opacity: 0; }
    }

    /* Animated Shadow Border for Hero */
    .animated-shadow-border {
        position: relative;
        z-index: 0;
    }
    .animated-shadow-border::before {
        content: '';
        position: absolute;
        inset: -5px; /* Adjust to size the glow */
        border-radius: inherit; /* Match border-radius of parent */
        background: linear-gradient(45deg, #10b981, #6366f1, #ef4444, #f59e0b, #3b82f6);
        background-size: 400% 400%;
        animation: glowBorder 10s ease infinite;
        filter: blur(10px); /* Adjust blur for glow intensity */
        z-index: -1;
        opacity: 0.7;
    }

    @keyframes glowBorder {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
    }

    /* Grid pattern for the interactive block */
    .bg-grid-pattern {
        background-image: linear-gradient(to right, rgba(0,255,255,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,255,255,0.1) 1px, transparent 1px);
        background-size: 20px 20px;
    }

    /* Text flicker effect */
    .animated-text-flicker {
        animation: textFlicker 3s infinite alternate;
    }

    @keyframes textFlicker {
        0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { text-shadow: 0 0 5px currentColor, 0 0 10px currentColor, 0 0 15px currentColor; }
        20%, 24%, 55% { text-shadow: none; }
    }

    /* Box Shadow for Code */
    .box-shadow-code {
        box-shadow: 0 0 5px rgba(251, 191, 36, 0.7), 
                    0 0 10px rgba(239, 68, 68, 0.5);
    }
  </style>
</div>

CAPTCHAコンポーネント

ソーシャルメディアインターフェース用に設計された、キャンディー/スウィートカラースキームを備えた、コードにインスパイアされた複雑なCAPTCHAコンポーネント。レスポンシブレイアウト、ダークモードのサポート、インタラクティブな要素を備えています。

開けるプレビュー

                <div class="flex items-center justify-center min-h-screen p-4 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-950 dark:to-pink-950 font-mono">
  <div class="w-full max-w-md p-6 rounded-lg shadow-xl bg-white dark:bg-gray-800 border-2 border-pink-300 dark:border-purple-600 transform transition duration-300 hover:scale-[1.02] overflow-hidden">
    
    <!-- Header -->
    <div class="flex items-center justify-between mb-6 pb-4 border-b-2 border-pink-200 dark:border-purple-700">
      <h2 class="text-2xl font-bold text-pink-600 dark:text-purple-400"><span class="text-4xl pr-2">🔐</span>&gt; _verify_identity</h2>
      <span class="text-sm text-pink-400 dark:text-purple-500">v1.0.1_beta</span>
    </div>

    <!-- Instruction Panel -->
    <div class="mb-6 p-4 rounded bg-pink-50 dark:bg-gray-700 border border-pink-200 dark:border-purple-600 text-pink-800 dark:text-gray-300 text-sm leading-relaxed overflow-x-auto">
      <pre class="whitespace-pre-wrap"><code>&gt; user_action: click_matching_pair()
&gt; goal: prove_humanity()
&gt; status: pending...

_Choose the two images that form a logical pair.</code></pre>
    </div>

    <!-- Image Grid -->
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-3 mb-6">
      <!-- Image 1 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/60/200/200" alt="Image 1" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_001]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 2 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/61/200/200" alt="Image 2" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_002]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 3 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/62/200/200" alt="Image 3" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_003]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 4 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/63/200/200" alt="Image 4" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_004]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 5 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/64/200/200" alt="Image 5" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_005]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
      <!-- Image 6 -->
      <label class="block cursor-pointer">
        <input type="checkbox" class="hidden peer">
        <div class="relative rounded-lg overflow-hidden border-2 border-pink-200 dark:border-purple-700 transition duration-200 peer-checked:border-pink-500 peer-checked:ring-2 peer-checked:ring-pink-300 dark:peer-checked:border-purple-400 dark:peer-checked:ring-purple-600 transform hover:scale-[1.03]">
          <img src="https://picsum.photos/id/65/200/200" alt="Image 6" class="w-full h-24 sm:h-28 object-cover">
          <span class="absolute top-1 right-1 text-xs px-2 py-1 rounded-full bg-pink-100 dark:bg-gray-700 text-pink-600 dark:text-purple-400">[IMG_006]</span>
          <div class="absolute inset-0 bg-pink-500 dark:bg-purple-500 opacity-0 peer-checked:opacity-30 transition-opacity flex items-center justify-center">
            <svg class="h-8 w-8 text-white dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
          </div>
        </div>
      </label>
    </div>

    <!-- Action Buttons -->
    <div class="flex justify-between items-center gap-4">
      <button class="flex-1 py-3 px-4 rounded-lg bg-pink-500 dark:bg-purple-600 text-white dark:text-gray-100 font-bold text-lg hover:bg-pink-600 dark:hover:bg-purple-700 transition-all duration-200 transform hover:scale-105 shadow-md flex items-center justify-center">
        <svg class="w-5 h-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><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>
        _confirm(_selection)
      </button>
      <button title="Refresh images" class="p-3 rounded-lg bg-mint-50 dark:bg-gray-700 border border-mint-200 dark:border-purple-600 text-mint-600 dark:text-purple-400 hover:bg-mint-100 dark:hover:bg-gray-600 transition-colors duration-200 transform hover:scale-110 shadow-sm">
        <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004 12v.621m15.821-6.196L15.424 4.1a1.999 1.999 0 00-2.616.488L7 12m10 8l-4.168-4.168A1.999 1.999 0 0013.916 16H8a1.999 1.999 0 00-1.999 1.999v1.001m0-8h.01M20 12l-1 1-1-1"></path></svg>
      </button>
    </div>

    <!-- Footer Info -->
    <div class="mt-6 pt-4 border-t-2 border-pink-200 dark:border-purple-700 text-center text-xs text-pink-400 dark:text-gray-500">
      <p>_powered_by: secure_identity_protocol_v2.1</p>
      <div class="flex items-center justify-center mt-2">
        <img src="https://randomuser.me/api/portraits/lego/1.jpg" alt="Developer Avatar" class="h-6 w-6 rounded-full mr-2 border border-pink-300 dark:border-purple-600">
        <span class="text-pink-500 dark:text-purple-400">// CAPTCHA_DevTeam Inc.</span>
      </div>
    </div>

  </div>
</div>

アラートメッセージコンポーネント

ダークUI、秋の配色で設計されたアラートメッセージコンポーネントで、専門的なコンサルティングサービスに適しています。応答性が高く、ダークモードをサポートしています。

開けるプレビュー

                <div class="p-4 sm:p-8 bg-gray-900 dark:bg-black min-h-screen font-sans">
  <h2 class="text-3xl sm:text-4xl font-extrabold text-amber-500 mb-8 sm:mb-12 text-center">
    Consulting Service Alerts
  </h2>

  <div class="max-w-4xl mx-auto space-y-6 sm:space-y-8">

    <!-- Success Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-emerald-900/40 border border-emerald-700 dark:bg-emerald-950/60 dark:border-emerald-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-emerald-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-emerald-200 mb-1">Success! Your Request Has Been Processed.</h3>
        <p class="text-sm sm:text-base text-emerald-300 leading-relaxed">
          Thank you for choosing our consulting services. Your recent inquiry has been successfully submitted and our team will get back to you shortly.
        </p>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-emerald-400 hover:bg-emerald-800 focus:outline-none focus:ring-2 focus:ring-emerald-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Warning Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-orange-900/40 border border-orange-700 dark:bg-orange-950/60 dark:border-orange-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-orange-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-orange-200 mb-1">Upcoming Changes to Our Service Offerings.</h3>
        <p class="text-sm sm:text-base text-orange-300 leading-relaxed">
          Please be aware of upcoming adjustments to our service packages starting next quarter. We encourage you to review the updated terms and conditions on our website.
        </p>
        <a href="#" class="text-sm sm:text-base text-orange-200 mt-2 inline-block underline hover:text-orange-100">Learn more about changes</a>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-orange-400 hover:bg-orange-800 focus:outline-none focus:ring-2 focus:ring-orange-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Information Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-blue-900/40 border border-blue-700 dark:bg-sky-950/60 dark:border-sky-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-blue-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-blue-200 mb-1">New Whitepaper Available: Future of Digital Consulting.</h3>
        <p class="text-sm sm:text-base text-blue-300 leading-relaxed">
          Explore our latest insights on the evolving landscape of digital consulting. Download our new whitepaper for free today!
        </p>
        <button class="mt-3 px-4 py-2 bg-blue-700 text-blue-100 rounded-md hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2 focus:ring-offset-gray-900 dark:focus:ring-offset-transparent text-sm sm:text-base">
          Download Now
        </button>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-blue-400 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

    <!-- Error Alert -->
    <div class="flex items-start p-4 sm:p-5 rounded-lg shadow-lg bg-red-900/40 border border-red-700 dark:bg-red-950/60 dark:border-red-800 transition-all duration-300 ease-in-out hover:shadow-xl">
      <div class="flex-shrink-0 text-red-300 mr-3 sm:mr-4 mt-0.5">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
      </div>
      <div class="flex-grow">
        <h3 class="text-lg sm:text-xl font-semibold text-red-200 mb-1">Action Required: Incomplete Profile Information.</h3>
        <p class="text-sm sm:text-base text-red-300 leading-relaxed">
          Your user profile is incomplete. Please update your details to ensure uninterrupted access to all our premium consulting resources.
        </p>
        <a href="#" class="text-sm sm:text-base text-red-200 mt-2 inline-block underline hover:text-red-100">Update Profile</a>
      </div>
      <button class="flex-shrink-0 ml-3 sm:ml-4 -mt-1 p-1 rounded-full text-red-400 hover:bg-red-800 focus:outline-none focus:ring-2 focus:ring-red-700">
        <span class="sr-only">Dismiss</span>
        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
        </svg>
      </button>
    </div>

  </div>
</div>

1 ... 81 82 83 84 85 ... 335

検索コンポーネント

カテゴリ

すべてのコンポーネント