Search Components

All Components

Browse all available Tailwind CSS components

Cyberpunk CRM Grid

A responsive grid layout component for CRM/Business Tools with a cyberpunk-futuristic neon aesthetic, featuring dark backgrounds and warm sunset accent colors. Includes interactive elements and dark mode support.

Open Preview

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

Chat Window Component

A responsive and modern chat window component with a 3D design aesthetic, warm neutral color scheme, and full dark mode support, suitable for Technology/SaaS applications.

Open Preview

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

Carousel Slider Component

A complex, retro/vintage styled carousel slider component for educational platforms, featuring muted colors, professional design, and full responsiveness with dark mode support. Designed for corporate/professional environments.

Open Preview

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

Back to Top Button Component - Brutalism Earth Tones

A complex 'Back to Top' button component designed in a brutalist style with an earthy color scheme, suitable for blog/content sites. It is responsive and includes dark mode support.

Open Preview

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

Session Timeout Alert Component

A minimalist and flat design session timeout alert component with a retro/vintage color scheme, featuring a simple layout, full responsiveness, and dark mode support for blog/content sites.

Open Preview

                <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

A responsive and visually appealing grid layout component for educational platforms, featuring course cards with warm sunset tones, Material Design shadows, and dark mode support.

Open Preview

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

Real Estate Property Listing Card

A complex, paper/print-inspired real estate property listing card with corporate blue tones, designed for property listing platforms. It features responsive layout, dark mode support, and multiple details about a property.

Open Preview

                <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

A moderate complexity retro/vintage inspired layout component for entertainment platforms, featuring rich jewel tones and full responsiveness with dark mode support.

Open Preview

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

A complex, code-inspired CAPTCHA component with a candy/sweet color scheme, designed for social media interfaces. Features a responsive layout, dark mode support, and interactive elements.

Open Preview

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

Alert Messages Component

An alert messages component designed with a dark UI, autumn color scheme, suitable for professional consulting services. It is responsive and supports dark mode.

Open Preview

                <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