搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

会话超时警报组件

一个复杂的响应式会话超时警报组件，采用等宽/开发人员设计、黑白方案和明亮的强调色，适用于教育平台。包括深色模式支持和倒计时。

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900 bg-opacity-75 dark:bg-gray-950 dark:bg-opacity-85 font-mono">
  <div class="relative w-full max-w-md mx-auto p-6 border-2 border-green-500 bg-gray-800 text-gray-100 shadow-lg dark:bg-gray-900 dark:text-gray-50 overflow-hidden
              before:content-[''] before:absolute before:inset-0 before:border-t-2 before:border-l-2 before:border-green-500 before:pointer-events-none before:animate-pulse-border
              after:content-[''] after:absolute after:inset-0 after:border-b-2 after:border-r-2 after:border-green-500 after:pointer-events-none after:animate-pulse-border-alt">
    
    <!-- Terminal Header (simulated) -->
    <div class="flex items-center space-x-2 pb-4 mb-4 border-b border-green-500">
      <span class="block w-3 h-3 bg-red-500 rounded-full"></span>
      <span class="block w-3 h-3 bg-yellow-500 rounded-full"></span>
      <span class="block w-3 h-3 bg-lime-500 rounded-full"></span>
      <div class="flex-1 text-center text-green-400 text-sm"></div>
      <span class="text-green-400 text-sm">TERMINAL::SESSION_STATUS</span>
    </div>

    <h2 class="text-2xl font-bold mb-4 text-green-400 flex items-center">
      <svg class="w-6 h-6 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="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"></path>
      </svg>
      SESSION EXPIRED SOON
    </h2>

    <p class="text-gray-300 text-sm mb-6 dark:text-gray-300">
      Your current session is about to expire due to inactivity.
      Please confirm to extend your session or you will be logged out.
    </p>

    <!-- Countdown Section -->
    <div class="bg-gray-900 border border-green-500 p-4 mb-6 text-center shadow-inner relative overflow-hidden">
      <div class="absolute inset-0 bg-gradient-to-r from-green-900/50 to-transparent animate-pulse-background pointer-events-none"></div>
      <p class="text-green-400 text-lg sm:text-xl md:text-2xl font-bold uppercase tracking-wider mb-2 z-10 relative">
        Session Timeout In:
      </p>
      <div class="text-white text-3xl sm:text-4xl lg:text-5xl font-extrabold flex justify-center items-baseline z-10 relative">
        <span class="countdown-digit min-w-[2.5rem] sm:min-w-[3rem] md:min-w-[4rem] text-right">00</span>
        <span class="text-green-500 mx-1 sm:mx-2">:</span>
        <span class="countdown-digit min-w-[2.5rem] sm:min-w-[3rem] md:min-w-[4rem] text-left">59</span>
      </div>
      <p class="text-gray-400 text-xs sm:text-sm mt-1 z-10 relative">(minutes:seconds)</p>
    </div>

    <!-- Actions -->
    <div class="flex flex-col sm:flex-row gap-4">
      <button class="flex-1 py-3 px-6 bg-green-600 text-white font-semibold uppercase text-sm
                     hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:ring-offset-gray-800
                     active:bg-green-800 transition duration-200 ease-in-out
                     border border-green-500 shadow-md transform hover:scale-105 active:scale-100
                     sm:order-1">
        <span class="flex items-center justify-center">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
          </svg>
          EXTEND SESSION
        </span>
      </button>
      <button class="flex-1 py-3 px-6 bg-gray-700 text-gray-200 font-semibold uppercase text-sm
                     hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 focus:ring-offset-gray-800
                     active:bg-gray-700 transition duration-200 ease-in-out
                     border border-gray-600 shadow-md transform hover:scale-105 active:scale-100
                     sm:order-2">
        <span class="flex items-center justify-center">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
          </svg>
          LOG OUT NOW
        </span>
      </button>
    </div>

    <!-- Background Terminal Glitch Effect (CSS for this is conceptual, would need actual JS for real glitch) -->
    <div class="absolute inset-0 pointer-events-none overflow-hidden">
      <div class="absolute top-0 left-0 w-full h-full animate-flicker brightness-125 saturate-150" style="background-image: linear-gradient(to bottom, rgba(0,255,0,0.1) 0%, rgba(0,0,0,0) 50%, rgba(0,255,0,0.1) 100%); mix-blend-mode: overlay;"></div>
      <div class="absolute top-0 left-0 w-full h-full animate-scanline" style="background-image: linear-gradient(to bottom, transparent 49%, rgba(0,255,0,0.1) 50%, transparent 51%); background-size: 100% 3px;"></div>
    </div>

  </div>
</div>

<style>
  /* Keyframes for animations */
  @keyframes pulse-border {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.01); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes pulse-border-alt {
    0% { transform: scale(1); opacity: 1;}
    50% { transform: scale(0.99); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
  }
  @keyframes pulse-background {
    0% { transform: translateX(-100%); opacity: 0.2; }
    50% { transform: translateX(0%); opacity: 0.5; }
    100% { transform: translateX(100%); opacity: 0.2; }
  }
  @keyframes flicker {
    0%, 100% { opacity: 1; }
    5% { opacity: 0.95; }
    10% { opacity: 1.05; }
    20% { opacity: 0.98; }
    30% { opacity: 1.02; }
    40% { opacity: 0.97; }
    50% { opacity: 1.03; }
    60% { opacity: 0.99; }
    70% { opacity: 1.01; }
    80% { opacity: 0.96; }
    90% { opacity: 1.04; }
  }
  @keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
  }

  .animate-pulse-border {
    animation: pulse-border 2.5s ease-in-out infinite;
  }
  .animate-pulse-border-alt {
    animation: pulse-border-alt 2.5s ease-in-out infinite reverse;
  }
  .animate-pulse-background {
    animation: pulse-background 3s linear infinite;
  }
  .animate-flicker {
    animation: flicker 0.5s infinite alternate;
  }
  .animate-scanline {
    animation: scanline 2s infinite linear;
  }
  .countdown-digit {
    display: inline-block;
    /* Monospace font styling for digits */
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    text-shadow: 0 0 5px rgba(0,255,0,0.5), 0 0 10px rgba(0,255,0,0.3);
  }
  
  /* Dark mode specific styles */
  .dark .bg-gray-800 {
    background-color: #1a202c; /* Deeper dark for dialog */
  }
  .dark .text-gray-100 {
    color: #edf2f7; /* Lighter text in dark mode */
  }
  .dark .border-green-500 {
    border-color: #10B981; /* Maintain green accent in dark */
  }
  .dark .text-green-400 {
    color: #34D399; /* Adjust green text lightnes */
  }
  .dark .bg-gray-900 {
    background-color: #000000; /* Even darker inner background */
  }
  .dark .border-gray-600 {
    border-color: #4A5568;
  }
  .dark .text-gray-200 {
    color: #e2e8f0; /* Lighter text for secondary button */
  }
</style>

野兽派图库组件

一个响应迅速、受野兽派启发的娱乐平台画廊组件，具有高对比度的冷色中性色和深色模式支持。

打开预览

                <div class="font-sans bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 p-4 sm:p-8 md:p-12 lg:p-16 min-h-screen">

  <div class="max-w-7xl mx-auto">
    <h1 class="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-8 sm:mb-12 text-gray-900 dark:text-gray-50 border-b-4 border-gray-900 dark:border-gray-50 pb-4 tracking-tighter uppercase">
      <span class="block">The Vault</span>
      <span class="block text-2xl sm:text-3xl md:text-4xl font-light normal-case">A Gallery of Visual Noise</span>
    </h1>

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

      <!-- Gallery Item 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1018/600/400" alt="Abstract Visual" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Dystopian Horizon</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">A raw exploration of forgotten landscapes, echoing the solitude of derelict futures. Captured with a stark, unforgiving lens.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            View Project
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">HD</div>
      </div>

      <!-- Gallery Item 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1043/600/400" alt="Geometric Composition" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Concrete Echoes</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">Harsh light and deep shadows define this urban series, a tribute to the monumental structures that shape our existence.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            Explore More
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">4K</div>
      </div>

      <!-- Gallery Item 3 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1069/600/400" alt="Industrial Abstraction" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">System Failure</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">A raw glimpse into the gears and conduits of a collapsing system. Beauty in the breakdown, stark and unyielding.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            See Portfolio
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">NEW</div>
      </div>

      <!-- Gallery Item 4 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1080/600/400" alt="Monolithic Structure" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Urban Decay</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">Unflinching views of abandoned spaces, where rust and resilience tell stories of cycles lost and found.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            View Collection
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">HD</div>
      </div>

      <!-- Gallery Item 5 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1084/600/400" alt="Gritty Texture" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Raw Data</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">Bare, unadorned visuals stripping away veneer to reveal the harsh truth beneath. A digital deconstruction.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            Download Raws
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">LIVE</div>
      </div>

      <!-- Gallery Item 6 -->
      <div class="bg-gray-200 dark:bg-gray-800 border-4 border-gray-900 dark:border-gray-50 shadow-lg relative group overflow-hidden">
        <img src="https://picsum.photos/id/1049/600/400" alt="Minimalist Concrete" class="w-full h-56 sm:h-64 md:h-72 object-cover object-center border-b-4 border-gray-900 dark:border-gray-50 transform transition-transform group-hover:scale-105 duration-300 ease-in-out">
        <div class="p-4 sm:p-6 text-gray-900 dark:text-gray-100">
          <h2 class="text-xl sm:text-2xl font-bold mb-2 uppercase tracking-tight">Oblivion Walls</h2>
          <p class="text-sm sm:text-base mb-4 line-clamp-3">Exploring the vast indifference of stark, unyielding architecture. A commentary on human scale in colossal spaces.</p>
          <a href="#" class="inline-block bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-2 border-gray-900 dark:border-gray-50 py-2 px-4 uppercase text-xs sm:text-sm font-bold tracking-wider hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-200">
            View Series
          </a>
        </div>
        <div class="absolute top-4 right-4 bg-gray-900 dark:bg-gray-50 text-gray-50 dark:text-gray-900 text-xs px-2 py-1 font-bold border-2 border-gray-900 dark:border-gray-50">VR</div>
      </div>

    </div>

    <div class="mt-12 text-center">
      <button type="button" class="bg-gray-900 text-gray-50 dark:bg-gray-50 dark:text-gray-900 border-4 border-gray-900 dark:border-gray-50 py-3 px-8 text-lg sm:text-xl font-bold uppercase tracking-wider shadow-lg hover:bg-gray-700 dark:hover:bg-gray-200 transition-colors duration-300">
        Load More Chaos
      </button>
    </div>

  </div>

</div>

受纸张启发的充满活力的医疗保健网格

一个简单的、受纸张/打印启发的网格布局组件，具有鲜艳的色彩，专为医疗保健/医疗应用程序而设计。它是完全响应式的，包括深色模式支持，并使用语义 HTML。

打开预览

                <div class="p-4 sm:p-6 md:p-8 lg:p-12 min-h-screen bg-gradient-to-br from-indigo-100 via-purple-100 to-pink-100 dark:from-purple-950 dark:via-indigo-950 dark:to-blue-950 font-sans">

  <div class="max-w-7xl mx-auto grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8 lg:gap-10">

    <!-- Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
                border-4 border-indigo-500 dark:border-indigo-600
                relative pb-6 md:pb-8 lg:pb-10">
      <div class="absolute inset-0 bg-gradient-to-tr from-indigo-100 to-purple-100 dark:from-indigo-900 dark:to-purple-900 opacity-20"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex items-center mb-4">
          <img src="https://picsum.photos/id/1005/60/60" alt="Microscope" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
          <h3 class="text-2xl font-extrabold text-indigo-700 dark:text-indigo-400 ml-4">Lab Results</h3>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Access your latest diagnostic reports and detailed analysis from our state-of-the-art laboratory.</p>
        <a href="#" class="inline-flex items-center px-5 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-indigo-800">
          View Details
          <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 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
                border-4 border-sky-500 dark:border-sky-600
                relative pb-6 md:pb-8 lg:pb-10">
      <div class="absolute inset-0 bg-gradient-to-tr from-sky-100 to-cyan-100 dark:from-sky-900 dark:to-cyan-900 opacity-20"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex items-center mb-4">
          <img src="https://picsum.photos/id/177/60/60" alt="Pills and Stethoscope" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
          <h3 class="text-2xl font-extrabold text-sky-700 dark:text-sky-400 ml-4">Medication Refills</h3>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Easily request prescription refills and manage your current medication schedule online.</p>
        <a href="#" class="inline-flex items-center px-5 py-2 bg-sky-600 hover:bg-sky-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-sky-300 dark:focus:ring-sky-800">
          Order Refill
          <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 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden transform transition-transform duration-300 hover:scale-105
                border-4 border-emerald-500 dark:border-emerald-600
                relative pb-6 md:pb-8 lg:pb-10">
      <div class="absolute inset-0 bg-gradient-to-tr from-emerald-100 to-lime-100 dark:from-emerald-900 dark:to-lime-900 opacity-20"></div>
      <div class="relative p-6 sm:p-8 z-10">
        <div class="flex items-center mb-4">
          <img src="https://picsum.photos/id/453/60/60" alt="Heart Monitor" class="w-16 h-16 rounded-full object-cover border-4 border-white dark:border-gray-700 shadow-md">
          <h3 class="text-2xl font-extrabold text-emerald-700 dark:text-emerald-400 ml-4">Health Records</h3>
        </div>
        <p class="text-gray-700 dark:text-gray-300 text-base leading-relaxed mb-4">Keep track of your complete medical history, immunizations, and past appointments securely.</p>
        <a href="#" class="inline-flex items-center px-5 py-2 bg-emerald-600 hover:bg-emerald-700 text-white font-semibold rounded-full shadow-lg transition-colors duration-200 outline-none focus:ring-4 focus:ring-emerald-300 dark:focus:ring-emerald-800">
          Access Records
          <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 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
        </a>
      </div>
    </div>

  </div>
</div>

Brutalism_Photography_Maps_Component

用于摄影作品集的简单野兽派风格地图组件，具有大胆的紫色配色方案，具有高对比度和深色模式支持。

打开预览

                <div class="p-4 sm:p-6 md:p-8 bg-violet-200 dark:bg-violet-950 text-violet-900 dark:text-violet-100 font-mono min-h-screen">
  <h2 class="text-3xl sm:text-4xl md:text-5xl font-extrabold mb-6 sm:mb-8 tracking-tighter uppercase border-b-4 border-violet-900 dark:border-violet-400 pb-2">
    Photographic Locations // Map<span class="text-violet-700 dark:text-violet-400">.</span>Focus
  </h2>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8 lg:gap-10">
    <!-- Map Placeholder Section -->
    <div class="relative bg-violet-400 dark:bg-violet-800 border-4 border-violet-900 dark:border-violet-400 overflow-hidden group">
      <img src="https://picsum.photos/id/1080/800/600" alt="Abstract map visual" class="w-full h-64 sm:h-80 md:h-96 object-cover object-center transform transition-transform duration-500 group-hover:scale-105 saturate-150 brightness-75">
      <div class="absolute inset-0 bg-gradient-to-t from-violet-900 via-transparent to-transparent opacity-80 dark:from-violet-950 dark:opacity-90"></div>
      <div class="absolute bottom-0 left-0 p-4 sm:p-6 text-violet-100 tracking-tighter">
        <p class="text-xl sm:text-2xl font-bold uppercase mb-1 drop-shadow-lg">[Location: Unknown]</p>
        <p class="text-sm sm:text-base font-light opacity-80 drop-shadow-lg">Coordinates: [DATA REDACTED]</p>
      </div>
      <div class="absolute top-4 right-4 text-violet-900 dark:text-violet-200 bg-violet-200 dark:bg-violet-700 px-3 py-1 text-sm font-bold border-2 border-violet-900 dark:border-violet-400 uppercase">
        Interactive View Coming.
      </div>
    </div>

    <!-- Location List / Details -->
    <div class="bg-violet-400 dark:bg-violet-800 border-4 border-violet-900 dark:border-violet-400 p-4 sm:p-6 lg:p-8">
      <h3 class="text-xl sm:text-2xl font-extrabold uppercase mb-4 border-b-2 border-violet-900 dark:border-violet-400 pb-1">Selected Locations // Shots.</h3>
      <ul class="space-y-4 sm:space-y-5">
        <li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[-2deg] hover:skew-x-0">
          <span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">01.</span>
          <div>
            <p class="font-bold text-lg sm:text-xl uppercase leading-tight">Urban Sprawl</p>
            <p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Downtown Concrete. 2023.</p>
          </div>
        </li>
        <li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[2deg] hover:skew-x-0">
          <span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">02.</span>
          <div>
            <p class="font-bold text-lg sm:text-xl uppercase leading-tight">Coastal Edge</p>
            <p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Sea Storm Horizon. 2022.</p>
          </div>
        </li>
        <li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[-2deg] hover:skew-x-0">
          <span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">03.</span>
          <div>
            <p class="font-bold text-lg sm:text-xl uppercase leading-tight">Desert Solitude</p>
            <p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Vast Sands, Empty Skies. 2020.</p>
          </div>
        </li>
        <li class="flex items-start gap-3 bg-violet-300 dark:bg-violet-700 p-3 sm:p-4 border-2 border-violet-900 dark:border-violet-400 transition-transform duration-300 hover:scale-[1.02] transform skew-x-[2deg] hover:skew-x-0">
          <span class="text-3xl font-extrabold text-violet-900 dark:text-violet-100 flex-shrink-0">04.</span>
          <div>
            <p class="font-bold text-lg sm:text-xl uppercase leading-tight">Forest Veil</p>
            <p class="text-sm sm:text-base font-light text-violet-800 dark:text-violet-200">Deep Woods Mystique. 2021.</p>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <div class="mt-8 sm:mt-10 text-center">
    <button class="px-6 py-3 sm:px-8 sm:py-4 bg-violet-900 dark:bg-violet-400 text-violet-100 dark:text-violet-900 text-lg sm:text-xl font-bold uppercase border-4 border-violet-900 dark:border-violet-400 shadow-[8px_8px_0px_rgba(79,0,172,1)] dark:shadow-[8px_8px_0px_rgba(139,92,246,1)] transition-all duration-200 hover:shadow-[4px_4px_0px_rgba(79,0,172,1)] dark:hover:shadow-[4px_4px_0px_rgba(139,92,246,1)]">
      Explore More Locations // Get.Dirty
    </button>
  </div>
</div>

会话超时警报组件

一个简单、响应迅速的单色会话超时警报组件，具有霓虹灯/发光效果，专为教育/学习平台而设计。包括深色模式支持。

打开预览

                <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/70 dark:bg-black/80 backdrop-blur-sm">
  <div class="relative p-6 rounded-lg shadow-2xl transition-all duration-300 ease-in-out
              bg-purple-900 border border-purple-700
              dark:bg-violet-950 dark:border-violet-700
              transform scale-95 opacity-0 animate-scale-in-fade-in" 
       style="animation-delay: 0.1s;">

    <!-- Glow Effect 1 (Purple) -->
    <div class="absolute -inset-1 rounded-lg bg-gradient-to-r from-purple-500 to-fuchsia-500 blur-xl opacity-75 animate-pulse-slow z-[-1]
                dark:from-violet-500 dark:to-indigo-500"></div>

    <!-- Glow Effect 2 (Subtle) -->
    <div class="absolute -inset-2 rounded-lg bg-gradient-to-r from-purple-400 to-fuchsia-400 opacity-20 blur-2xl z-[-1]
                dark:from-violet-400 dark:to-indigo-400"></div>


    <div class="text-center space-y-4 relative z-10">
      <svg class="mx-auto h-16 w-16 text-purple-300 animate-bounce-subtle dark:text-violet-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>

      <h3 class="text-3xl font-extrabold text-purple-100 drop-shadow-[0_0_10px_rgba(255,255,255,0.3)] dark:text-violet-100 sm:text-4xl">
        Session Expiring Soon!
      </h3>

      <p class="text-lg text-purple-200 leading-relaxed max-w-sm mx-auto dark:text-violet-200">
        Your session will expire in <span class="font-bold text-yellow-300 dark:text-amber-300">2:00</span> minutes due to inactivity.
      </p>

      <div class="flex flex-col sm:flex-row justify-center gap-4 pt-2">
        <button class="px-6 py-3 rounded-full text-lg font-semibold whitespace-nowrap
                       bg-purple-600 text-white shadow-lg shadow-purple-500/50 hover:bg-purple-700
                       focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-purple-900
                       transition-all transform hover:scale-105 active:scale-95
                       dark:bg-violet-600 dark:shadow-violet-500/50 dark:hover:bg-violet-700 dark:focus:ring-violet-400 dark:focus:ring-offset-violet-950">
          Keep Me Logged In
        </button>
        <button class="px-6 py-3 rounded-full text-lg font-semibold whitespace-nowrap
                       bg-transparent border border-purple-400 text-purple-200 hover:bg-purple-800 hover:border-purple-300
                       focus:outline-none focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-purple-900
                       transition-all transform hover:scale-105 active:scale-95
                       dark:border-violet-400 dark:text-violet-200 dark:hover:bg-violet-800 dark:hover:border-violet-300 dark:focus:ring-violet-400 dark:focus:ring-offset-violet-950">
          Log Out Now
        </button>
      </div>
    </div>
  </div>
</div>

<style>
  @keyframes pulse-slow {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 0.9; transform: scale(1.02); }
  }
  .animate-pulse-slow {
    animation: pulse-slow 4s infinite ease-in-out;
  }

  @keyframes bounce-subtle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
  .animate-bounce-subtle {
    animation: bounce-subtle 3s infinite ease-in-out;
  }

  @keyframes scaleInFadeIn {
    0% { transform: scale(0.95); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
  }
  .animate-scale-in-fade-in {
    animation: scaleInFadeIn 0.5s ease-out forwards;
  }
</style>

User Profiles 组件

专为加密货币/区块链应用程序设计的响应式专业用户档案组件，具有干净、值得信赖的设计、互补的配色方案和深色模式支持。

打开预览

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans">
  <div class="max-w-7xl mx-auto py-8">
    <h2 class="text-3xl sm:text-4xl font-extrabold text-center mb-12 text-gray-900 dark:text-white leading-tight">
      Blockchain Innovators
    </h2>

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

      <!-- Profile Card 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="relative h-32 bg-gradient-to-r from-purple-600 to-indigo-600 dark:from-purple-800 dark:to-indigo-800">
          <img class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-md" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Profile Picture">
        </div>
        <div class="pt-16 pb-8 px-6 text-center">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">John Doe</h3>
          <p class="text-sm text-blue-600 dark:text-blue-400 mt-1">CEO, CryptoCorp</p>
          <p class="text-gray-600 dark:text-gray-400 mt-4 text-sm leading-relaxed">Visionary leader driving innovation in decentralized finance and blockchain solutions.</p>
          <div class="mt-6 flex justify-center space-x-4">
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.25c-.21.16-.48.24-.76.24a.8.8 0 01-.6-.24c-.33-.25-.53-.6-.53-1.01h0V10.1h-3A.7.7 0 012 9.4c0-.4.32-.7.7-.7h3.1V6.15c0-1.8 1.4-3.23 3.14-3.23.86 0 1.6.3 2.18.9l.06.06c.03.04.05.08.08.12.03.05.06.09.09.14l.03.05.02.03c.01.02.02.04.03.05.7-.7 1.8-1.12 3-1.12 2 0 3.6 1.62 3.6 3.6v1.3H21a.7.7 0 01.7.7c0 .4-.32.7-.7.7h-.9v7.8c0 .4-.35.7-.76.7h0a.8.8 0 01-.6-.24l-3.9-3c-.15-.12-.35-.18-.56-.18h-.12c-.2 0-.4.06-.55.18l-3.9 3zm-1.8-8.2c-.34 0-.63.2-.74.47-.07.16-.1.32-.1.49v6.5l3.5-2.7c.18-.14.4-.2.62-.2h.1c.22 0 .42.06.6.2l3.4 2.7V12.5a.7.7 0 01-.7-.7h-7a.7.7 0 01-.7-.7zM16.9 6.8c0-1.2-.9-2.1-2.1-2.1-.6 0-1.2.25-1.6.7-.4.4-.6.9-.6 1.6v1.7h4.3V6.8zM7.5 4.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v1.7H9.2V6.4c0-.5-.2-.9-.5-1.2-.3-.3-.7-.5-1.2-.5z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.417 2.865 8.163 6.833 9.488.5.092.682-.217.682-.483 0-.237-.008-.867-.013-1.702-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.46-1.11-1.46-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.64.354-1.088.649-1.339-2.22-.253-4.555-1.112-4.555-4.93 0-1.088.387-1.979 1.029-2.673-.103-.253-.446-1.268.099-2.64 0 0 .84-.268 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.026 2.747-1.026.546 1.372.202 2.387.099 2.64.642.694 1.029 1.585 1.029 2.673 0 3.827-2.339 4.673-4.566 4.92.359.309.678.92.678 1.855 0 1.339-.012 2.419-.012 2.747 0 .268.18.577.688.483C21.137 20.17 24 16.423 24 12.017 24 6.484 19.522 2 14 2h-2z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.25 6.75H3.75A1.75 1.75 0 002 8.5v7A1.75 1.75 0 003.75 17h16.5A1.75 1.75 0 0022 15.5v-7A1.75 1.75 0 0020.25 6.75zM8.5 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM11.25 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM14 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM16.75 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM20 9.5a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="relative h-32 bg-gradient-to-r from-teal-500 to-green-500 dark:from-teal-700 dark:to-green-700">
          <img class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-md" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Profile Picture">
        </div>
        <div class="pt-16 pb-8 px-6 text-center">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Jane Smith</h3>
          <p class="text-sm text-green-600 dark:text-green-400 mt-1">CTO, Decentralized Labs</p>
          <p class="text-gray-600 dark:text-gray-400 mt-4 text-sm leading-relaxed">Lead architect for secure and scalable smart contract development and dApps.</p>
          <div class="mt-6 flex justify-center space-x-4">
             <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.25c-.21.16-.48.24-.76.24a.8.8 0 01-.6-.24c-.33-.25-.53-.6-.53-1.01h0V10.1h-3A.7.7 0 012 9.4c0-.4.32-.7.7-.7h3.1V6.15c0-1.8 1.4-3.23 3.14-3.23.86 0 1.6.3 2.18.9l.06.06c.03.04.05.08.08.12.03.05.06.09.09.14l.03.05.02.03c.01.02.02.04.03.05.7-.7 1.8-1.12 3-1.12 2 0 3.6 1.62 3.6 3.6v1.3H21a.7.7 0 01.7.7c0 .4-.32.7-.7.7h-.9v7.8c0 .4-.35.7-.76.7h0a.8.8 0 01-.6-.24l-3.9-3c-.15-.12-.35-.18-.56-.18h-.12c-.2 0-.4.06-.55.18l-3.9 3zm-1.8-8.2c-.34 0-.63.2-.74.47-.07.16-.1.32-.1.49v6.5l3.5-2.7c.18-.14.4-.2.62-.2h.1c.22 0 .42.06.6.2l3.4 2.7V12.5a.7.7 0 01-.7-.7h-7a.7.7 0 01-.7-.7zM16.9 6.8c0-1.2-.9-2.1-2.1-2.1-.6 0-1.2.25-1.6.7-.4.4-.6.9-.6 1.6v1.7h4.3V6.8zM7.5 4.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v1.7H9.2V6.4c0-.5-.2-.9-.5-1.2-.3-.3-.7-.5-1.2-.5z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.417 2.865 8.163 6.833 9.488.5.092.682-.217.682-.483 0-.237-.008-.867-.013-1.702-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.46-1.11-1.46-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.64.354-1.088.649-1.339-2.22-.253-4.555-1.112-4.555-4.93 0-1.088.387-1.979 1.029-2.673-.103-.253-.446-1.268.099-2.64 0 0 .84-.268 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.026 2.747-1.026.546 1.372.202 2.387.099 2.64.642.694 1.029 1.585 1.029 2.673 0 3.827-2.339 4.673-4.566 4.92.359.309.678.92.678 1.855 0 1.339-.012 2.419-.012 2.747 0 .268.18.577.688.483C21.137 20.17 24 16.423 24 12.017 24 6.484 19.522 2 14 2h-2z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.25 6.75H3.75A1.75 1.75 0 002 8.5v7A1.75 1.75 0 003.75 17h16.5A1.75 1.75 0 0022 15.5v-7A1.75 1.75 0 0020.25 6.75zM8.5 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM11.25 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM14 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM16.75 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM20 9.5a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="relative h-32 bg-gradient-to-r from-orange-500 to-red-500 dark:from-orange-700 dark:to-red-700">
          <img class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-md" src="https://randomuser.me/api/portraits/men/3.jpg" alt="Profile Picture">
        </div>
        <div class="pt-16 pb-8 px-6 text-center">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Michael Chen</h3>
          <p class="text-sm text-red-600 dark:text-red-400 mt-1">Head of Research, QuantumChain</p>
          <p class="text-gray-600 dark:text-gray-400 mt-4 text-sm leading-relaxed">Expert in cryptographic research and quantum-resistant blockchain technologies.</p>
          <div class="mt-6 flex justify-center space-x-4">
             <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.25c-.21.16-.48.24-.76.24a.8.8 0 01-.6-.24c-.33-.25-.53-.6-.53-1.01h0V10.1h-3A.7.7 0 012 9.4c0-.4.32-.7.7-.7h3.1V6.15c0-1.8 1.4-3.23 3.14-3.23.86 0 1.6.3 2.18.9l.06.06c.03.04.05.08.08.12.03.05.06.09.09.14l.03.05.02.03c.01.02.02.04.03.05.7-.7 1.8-1.12 3-1.12 2 0 3.6 1.62 3.6 3.6v1.3H21a.7.7 0 01.7.7c0 .4-.32.7-.7.7h-.9v7.8c0 .4-.35.7-.76.7h0a.8.8 0 01-.6-.24l-3.9-3c-.15-.12-.35-.18-.56-.18h-.12c-.2 0-.4.06-.55.18l-3.9 3zm-1.8-8.2c-.34 0-.63.2-.74.47-.07.16-.1.32-.1.49v6.5l3.5-2.7c.18-.14.4-.2.62-.2h.1c.22 0 .42.06.6.2l3.4 2.7V12.5a.7.7 0 01-.7-.7h-7a.7.7 0 01-.7-.7zM16.9 6.8c0-1.2-.9-2.1-2.1-2.1-.6 0-1.2.25-1.6.7-.4.4-.6.9-.6 1.6v1.7h4.3V6.8zM7.5 4.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v1.7H9.2V6.4c0-.5-.2-.9-.5-1.2-.3-.3-.7-.5-1.2-.5z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.417 2.865 8.163 6.833 9.488.5.092.682-.217.682-.483 0-.237-.008-.867-.013-1.702-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.46-1.11-1.46-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.64.354-1.088.649-1.339-2.22-.253-4.555-1.112-4.555-4.93 0-1.088.387-1.979 1.029-2.673-.103-.253-.446-1.268.099-2.64 0 0 .84-.268 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.026 2.747-1.026.546 1.372.202 2.387.099 2.64.642.694 1.029 1.585 1.029 2.673 0 3.827-2.339 4.673-4.566 4.92.359.309.678.92.678 1.855 0 1.339-.012 2.419-.012 2.747 0 .268.18.577.688.483C21.137 20.17 24 16.423 24 12.017 24 6.484 19.522 2 14 2h-2z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.25 6.75H3.75A1.75 1.75 0 002 8.5v7A1.75 1.75 0 003.75 17h16.5A1.75 1.75 0 0022 15.5v-7A1.75 1.75 0 0020.25 6.75zM8.5 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM11.25 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM14 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM16.75 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM20 9.5a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
            </a>
          </div>
        </div>
      </div>

      <!-- Profile Card 4 -->
      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1 overflow-hidden border border-gray-200 dark:border-gray-700">
        <div class="relative h-32 bg-gradient-to-r from-blue-500 to-cyan-500 dark:from-blue-700 dark:to-cyan-700">
          <img class="absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-1/2 w-24 h-24 rounded-full object-cover border-4 border-white dark:border-gray-800 shadow-md" src="https://randomuser.me/api/portraits/women/4.jpg" alt="Profile Picture">
        </div>
        <div class="pt-16 pb-8 px-6 text-center">
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Emily White</h3>
          <p class="text-sm text-cyan-600 dark:text-cyan-400 mt-1">Community Manager, Ethos Network</p>
          <p class="text-gray-600 dark:text-gray-400 mt-4 text-sm leading-relaxed">Engaging the blockchain community and fostering global adoption.</p>
          <div class="mt-6 flex justify-center space-x-4">
             <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.29 20.25c-.21.16-.48.24-.76.24a.8.8 0 01-.6-.24c-.33-.25-.53-.6-.53-1.01h0V10.1h-3A.7.7 0 012 9.4c0-.4.32-.7.7-.7h3.1V6.15c0-1.8 1.4-3.23 3.14-3.23.86 0 1.6.3 2.18.9l.06.06c.03.04.05.08.08.12.03.05.06.09.09.14l.03.05.02.03c.01.02.02.04.03.05.7-.7 1.8-1.12 3-1.12 2 0 3.6 1.62 3.6 3.6v1.3H21a.7.7 0 01.7.7c0 .4-.32.7-.7.7h-.9v7.8c0 .4-.35.7-.76.7h0a.8.8 0 01-.6-.24l-3.9-3c-.15-.12-.35-.18-.56-.18h-.12c-.2 0-.4.06-.55.18l-3.9 3zm-1.8-8.2c-.34 0-.63.2-.74.47-.07.16-.1.32-.1.49v6.5l3.5-2.7c.18-.14.4-.2.62-.2h.1c.22 0 .42.06.6.2l3.4 2.7V12.5a.7.7 0 01-.7-.7h-7a.7.7 0 01-.7-.7zM16.9 6.8c0-1.2-.9-2.1-2.1-2.1-.6 0-1.2.25-1.6.7-.4.4-.6.9-.6 1.6v1.7h4.3V6.8zM7.5 4.7c-.5 0-.9.2-1.2.5-.3.3-.5.7-.5 1.2v1.7H9.2V6.4c0-.5-.2-.9-.5-1.2-.3-.3-.7-.5-1.2-.5z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.417 2.865 8.163 6.833 9.488.5.092.682-.217.682-.483 0-.237-.008-.867-.013-1.702-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.46-1.11-1.46-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.529 2.341 1.088 2.91.829.092-.64.354-1.088.649-1.339-2.22-.253-4.555-1.112-4.555-4.93 0-1.088.387-1.979 1.029-2.673-.103-.253-.446-1.268.099-2.64 0 0 .84-.268 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.294 2.747-1.026 2.747-1.026.546 1.372.202 2.387.099 2.64.642.694 1.029 1.585 1.029 2.673 0 3.827-2.339 4.673-4.566 4.92.359.309.678.92.678 1.855 0 1.339-.012 2.419-.012 2.747 0 .268.18.577.688.483C21.137 20.17 24 16.423 24 12.017 24 6.484 19.522 2 14 2h-2z"/></svg>
            </a>
            <a href="#" class="text-gray-500 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400 transition-colors duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M20.25 6.75H3.75A1.75 1.75 0 002 8.5v7A1.75 1.75 0 003.75 17h16.5A1.75 1.75 0 0022 15.5v-7A1.75 1.75 0 0020.25 6.75zM8.5 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM11.25 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM14 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM16.75 12.75a1.25 1.25 0 11-2.5 0 1.25 1.25 0 012.5 0v.001zM20 9.5a.75.75 0 100 1.5.75.75 0 000-1.5z"/></svg>
            </a>
          </div>
        </div>
      </div>

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

Neon_Glow_Healthcare_Container_Component

一个复杂的响应式容器组件，适用于医疗保健应用，具有霓虹灯/发光黑白配色方案和充满活力的点缀。具有多个交互式元素、深色模式支持和语义 HTML。

打开预览

                <div class="min-h-screen bg-gray-950 text-gray-200 dark:bg-black dark:text-gray-100 p-4 sm:p-8 flex items-center justify-center font-sans tracking-wide">
  <div class="w-full max-w-6xl bg-gray-900 border border-purple-700 rounded-xl shadow-2xl dark:bg-gray-950 dark:border-purple-600 overflow-hidden
    relative
    before:content-[''] before:absolute before:inset-0 before:blur-3xl before:bg-gradient-to-br before:from-purple-900 before:to-fuchsia-900 before:opacity-20 before:z-0
    after:content-[''] after:absolute after:inset-0 after:blur-3xl after:bg-gradient-to-tl after:from-cyan-900 after:to-teal-900 after:opacity-20 after:z-0
    hover:shadow-[0_0_80px_rgba(128,0,128,0.7),_0_0_120px_rgba(255,0,255,0.7)] transition-all duration-500 will-change-transform transform hover:-translate-y-1">

    <div class="relative z-10 p-6 sm:p-10 lg:p-12">
      <!-- Header Section -->
      <div class="text-center mb-10">
        <h1 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-white mb-4 leading-tight tracking-tighter
          text-shadow-neon-purple drop-shadow-[0_0_15px_rgba(255,0,255,0.8)] dark:drop-shadow-[0_0_20px_rgba(238,130,238,0.9)] transition-colors duration-300">
          <span class="block">Precision Health Portal</span>
        </h1>
        <p class="text-purple-300 text-lg sm:text-xl font-light leading-relaxed
          text-shadow-neon-cyan drop-shadow-[0_0_10px_rgba(0,255,255,0.5)] dark:drop-shadow-[0_0_15px_rgba(0,191,255,0.7)] transition-colors duration-300">
          Advanced Diagnostics & Personalized Care
        </p>
      </div>

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

        <!-- Card 1: Patient Overview -->
        <div class="col-span-1 rounded-lg p-5 bg-gray-800 border border-purple-800 shadow-lg dark:bg-gray-850 dark:border-purple-700
          relative overflow-hidden group
          before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-transparent before:via-purple-900/10 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          hover:shadow-purple-glow-sm transform hover:-translate-y-1 transition-all duration-300">
          <h2 class="text-2xl font-bold text-purple-400 mb-3 tracking-wide
            text-shadow-neon-purple-xs">Patient Summary</h2>
          <p class="text-gray-300 mb-4 text-sm">Quick glance at essential patient data.</p>
          <div class="flex items-center space-x-4 mb-4">
            <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Patient Avatar" class="w-16 h-16 rounded-full border-2 border-purple-500 shadow-md group-hover:border-cyan-400 transition-colors duration-300">
            <div>
              <p class="text-lg text-white font-semibold">John Doe</p>
              <p class="text-purple-300 text-sm">DOB: 12/05/1980</p>
            </div>
          </div>
          <ul class="list-none space-y-2 text-sm text-gray-300">
            <li class="flex items-center text-cyan-300 group-hover:text-cyan-400"><svg class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 2a8 8 0 100 16 8 8 0 000-16zM8 9a1 1 0 11-2 0 1 1 0 012 0zm5-1a1 1 0 10-2 0 1 1 0 002 0zm-3 4a3 3 0 100-6 3 3 0 000 6z" clip-rule="evenodd"></path></svg>Allergies: Penicillin</li>
            <li class="flex items-center text-cyan-300 group-hover:text-cyan-400"><svg class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform duration-200" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z"></path><path fill-rule="evenodd" d="M4 5a2 2 0 012-2h4a2 2 0 012 2v2H4V5zm3 4h4a1 1 0 011 1v7a1 1 0 01-1 1H7a1 1 0 01-1-1v-7a1 1 0 011-1z" clip-rule="evenodd"></path></svg>Medications: Simvastatin</li>
            <li class="flex items-center text-cyan-300 group-hover:text-cyan-400"><svg class="w-4 h-4 mr-2 group-hover:scale-110 transition-transform duration-200" 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>Last Visit: 2023-10-26</li>
          </ul>
          <button class="mt-6 w-full py-2 px-4 rounded-md bg-purple-700 text-white font-semibold transform hover:scale-105
            shadow-md shadow-purple-900 group-hover:bg-purple-600 transition-all duration-300
            relative overflow-hidden
            before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:animate-shimmer">
            <span class="relative z-10">View Full Record</span>
          </button>
        </div>

        <!-- Card 2: Upcoming Appointments -->
        <div class="col-span-1 rounded-lg p-5 bg-gray-800 border border-cyan-800 shadow-lg dark:bg-gray-850 dark:border-cyan-700
          relative overflow-hidden group
          before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-transparent before:via-cyan-900/10 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          hover:shadow-cyan-glow-sm transform hover:-translate-y-1 transition-all duration-300">
          <h2 class="text-2xl font-bold text-cyan-400 mb-3 tracking-wide
            text-shadow-neon-cyan-xs">Appointments</h2>
          <p class="text-gray-300 mb-4 text-sm">Your next medical consultations.</p>
          <ul class="space-y-4">
            <li class="flex items-start bg-gray-700 p-3 rounded-md border border-cyan-700 group-hover:border-cyan-600 transition-colors duration-300">
              <div class="flex-shrink-0 mr-3 text-cyan-300 group-hover:text-cyan-400"><svg class="w-6 h-6" 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></div>
              <div>
                <p class="font-semibold text-white">Cardiology Checkup</p>
                <p class="text-sm text-cyan-200">Dec 15, 2023 | 10:00 AM</p>
                <p class="text-xs text-gray-400">Dr. Emily Chen - Clinic B</p>
              </div>
            </li>
            <li class="flex items-start bg-gray-700 p-3 rounded-md border border-cyan-700 group-hover:border-cyan-600 transition-colors duration-300">
              <div class="flex-shrink-0 mr-3 text-cyan-300 group-hover:text-cyan-400"><svg class="w-6 h-6" 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></div>
              <div>
                <p class="font-semibold text-white">Radiology Scan</p>
                <p class="text-sm text-cyan-200">Jan 05, 2024 | 02:30 PM</p>
                <p class="text-xs text-gray-400">Imaging Dept.</p>
              </div>
            </li>
          </ul>
          <button class="mt-6 w-full py-2 px-4 rounded-md bg-cyan-700 text-white font-semibold transform hover:scale-105
            shadow-md shadow-cyan-900 group-hover:bg-cyan-600 transition-all duration-300
            relative overflow-hidden
            before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:animate-shimmer">
            <span class="relative z-10">Schedule New Appointment</span>
          </button>
        </div>

        <!-- Card 3: Recent Test Results -->
        <div class="col-span-1 rounded-lg p-5 bg-gray-800 border border-purple-800 shadow-lg dark:bg-gray-850 dark:border-purple-700
          relative overflow-hidden group
          before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-transparent before:via-purple-900/10 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          hover:shadow-purple-glow-sm transform hover:-translate-y-1 transition-all duration-300">
          <h2 class="text-2xl font-bold text-purple-400 mb-3 tracking-wide
            text-shadow-neon-purple-xs">Test Results</h2>
          <p class="text-gray-300 mb-4 text-sm">View your latest lab results.</p>
          <ul class="space-y-4">
            <li class="flex items-start bg-gray-700 p-3 rounded-md border border-purple-700 group-hover:border-purple-600 transition-colors duration-300">
              <div class="flex-shrink-0 mr-3 text-purple-300 group-hover:text-purple-400"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 01-3 3H7a3 3 0 01-3-3V4a3 3 0 013-3h6a3 3 0 013 3v1a3 3 0 01-3 3h-2.1l-.85 2.1c-.24.58-.69 1.03-1.27 1.27L9 14.15V19a1 1 0 11-2 0v-4.85l-.85-2.1c-.24-.58-.69-1.03-1.27-1.27L4 8a3 3 0 01-3-3V4a3 3 0 013-3h6a3 3 0 013 3v1a3 3 0 01-3 3h-2.1z M13 4a1 1 0 10-2 0V3a1 1 0 102 0v1z" clip-rule="evenodd"></path></svg></div>
              <div>
                <p class="font-semibold text-white">Complete Blood Count</p>
                <p class="text-sm text-purple-200">Result: Normal</p>
                <p class="text-xs text-gray-400">Date: 2023-11-20</p>
              </div>
            </li>
            <li class="flex items-start bg-gray-700 p-3 rounded-md border border-purple-700 group-hover:border-purple-600 transition-colors duration-300">
              <div class="flex-shrink-0 mr-3 text-purple-300 group-hover:text-purple-400"><svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7 4a3 3 0 016 0v1a3 3 0 01-3 3H7a3 3 0 01-3-3V4a3 3 0 013-3h6a3 3 0 013 3v1a3 3 0 01-3 3h-2.1l-.85 2.1c-.24.58-.69 1.03-1.27 1.27L9 14.15V19a1 1 0 11-2 0v-4.85l-.85-2.1c-.24-.58-.69-1.03-1.27-1.27L4 8a3 3 0 01-3-3V4a3 3 0 013-3h6a3 3 0 013 3v1a3 3 0 01-3 3h-2.1z M13 4a1 1 0 10-2 0V3a1 1 0 102 0v1z" clip-rule="evenodd"></path></svg></div>
              <div>
                <p class="font-semibold text-white">Thyroid Panel</p>
                <p class="text-sm text-purple-200">Result: TSH Elevated</p>
                <p class="text-xs text-gray-400">Date: 2023-11-15</p>
              </div>
            </li>
          </ul>
          <button class="mt-6 w-full py-2 px-4 rounded-md bg-purple-700 text-white font-semibold transform hover:scale-105
            shadow-md shadow-purple-900 group-hover:bg-purple-600 transition-all duration-300
            relative overflow-hidden
            before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:animate-shimmer">
            <span class="relative z-10">Download All Results</span>
          </button>
        </div>

        <!-- Card 4: Health Articles (Full Width on Small Screens) -->
        <div class="lg:col-span-2 col-span-1 md:col-span-2 rounded-lg p-5 bg-gray-800 border border-cyan-800 shadow-lg dark:bg-gray-850 dark:border-cyan-700
          relative overflow-hidden group
          before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-transparent before:via-cyan-900/10 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          hover:shadow-cyan-glow-sm transform hover:-translate-y-1 transition-all duration-300">
          <h2 class="text-2xl font-bold text-cyan-400 mb-3 tracking-wide
            text-shadow-neon-cyan-xs">Health Insights</h2>
          <p class="text-gray-300 mb-4 text-sm">Stay informed with our latest health articles.</p>
          <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            <article class="bg-gray-700 p-4 rounded-md border border-cyan-700 group-hover:border-cyan-600 transition-colors duration-300">
              <img src="https://picsum.photos/300/200?random=1" alt="Healthy eating" class="w-full h-32 object-cover rounded-md mb-3 border border-cyan-800">
              <h3 class="font-semibold text-white mb-1">The Benefits of Mindful Eating</h3>
              <p class="text-sm text-gray-300 mb-2">Learn how mindful eating can improve your digestion and overall well-being.</p>
              <a href="#" class="text-purple-400 hover:text-purple-300 font-medium text-sm transition-colors duration-200">Read More <span class="ml-1">&gt;</span></a>
            </article>
            <article class="bg-gray-700 p-4 rounded-md border border-cyan-700 group-hover:border-cyan-600 transition-colors duration-300">
              <img src="https://picsum.photos/300/200?random=2" alt="Exercise" class="w-full h-32 object-cover rounded-md mb-3 border border-cyan-800">
              <h3 class="font-semibold text-white mb-1">Effective Home Workouts for Heart Health</h3>
              <p class="text-sm text-gray-300 mb-2">Simple exercises you can do at home to boost your cardiovascular health.</p>
              <a href="#" class="text-purple-400 hover:text-purple-300 font-medium text-sm transition-colors duration-200">Read More <span class="ml-1">&gt;</span></a>
            </article>
          </div>
          <button class="mt-6 w-full py-2 px-4 rounded-md bg-cyan-700 text-white font-semibold transform hover:scale-105
            shadow-md shadow-cyan-900 group-hover:bg-cyan-600 transition-all duration-300
            relative overflow-hidden
            before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:animate-shimmer">
            <span class="relative z-10">Explore All Articles</span>
          </button>
        </div>

        <!-- Card 5: Emergency Contacts (Smaller Card) -->
        <div class="col-span-1 rounded-lg p-5 bg-gray-800 border border-purple-800 shadow-lg dark:bg-gray-850 dark:border-purple-700
          relative overflow-hidden group
          before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-br before:from-transparent before:via-purple-900/10 before:to-transparent before:opacity-0 group-hover:before:opacity-100 before:transition-opacity before:duration-500
          hover:shadow-purple-glow-sm transform hover:-translate-y-1 transition-all duration-300">
          <h2 class="text-2xl font-bold text-purple-400 mb-3 tracking-wide
            text-shadow-neon-purple-xs">Emergency</h2>
          <p class="text-gray-300 mb-4 text-sm">Important contacts for emergencies.</p>
          <ul class="space-y-3">
            <li class="flex items-center text-gray-300 group-hover:text-white transition-colors duration-200">
              <svg class="w-5 h-5 mr-3 text-red-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 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 102 0V8a1 1 0 00-.445-.832l-1-.5z" clip-rule="evenodd"></path></svg>
              <a href="tel:911" class="font-semibold text-purple-300 hover:text-purple-200 transition-colors duration-200">Emergency Services: 911</a>
            </li>
            <li class="flex items-center text-gray-300 group-hover:text-white transition-colors duration-200">
              <svg class="w-5 h-5 mr-3 text-cyan-500" 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.774a11.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>
              <span class="font-semibold text-purple-300">Family Contact:</span> <a href="tel:+15551234567" class="ml-1 hover:text-purple-200 transition-colors duration-200">+1 (555) 123-4567</a>
            </li>
          </ul>
          <button class="mt-6 w-full py-2 px-4 rounded-md bg-purple-700 text-white font-semibold transform hover:scale-105
            shadow-md shadow-purple-900 group-hover:bg-purple-600 transition-all duration-300
            relative overflow-hidden
            before:content-[''] before:absolute before:inset-0 before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent before:animate-shimmer">
            <span class="relative z-10">Call Now</span>
          </button>
        </div>

      </div>

      <!-- Footer for additional navigation or information -->
      <div class="mt-12 text-center text-gray-400">
        <p class="mb-4">© 2023 Precision Health Solutions. All rights reserved.</p>
        <nav class="flex justify-center space-x-6">
          <a href="#privacy" class="text-purple-400 hover:text-purple-300 font-medium transition-colors duration-200">Privacy Policy</a>
          <a href="#terms" class="text-purple-400 hover:text-purple-300 font-medium transition-colors duration-200">Terms of Service</a>
          <a href="#support" class="text-purple-400 hover:text-purple-300 font-medium transition-colors duration-200">Support</a>
        </nav>
      </div>

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

<style>
  /* Custom Tailwind CSS classes for animations and glow effects (add to your CSS or use JIT mode for arbitrary values) */
  @keyframes shimmer {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(100%);
    }
  }

  .animate-shimmer {
    animation: shimmer 1.5s infinite linear;
  }

  .text-shadow-neon-purple {
    text-shadow: 
      0 0 7px #a78bfa,
      0 0 10px #a78bfa,
      0 0 21px #a78bfa,
      0 0 42px #c084fc,
      0 0 62px #c084fc,
      0 0 82px #c084fc,
      0 0 92px #c084fc,
      0 0 102px #c084fc;
  }

  .text-shadow-neon-cyan {
    text-shadow: 
      0 0 7px #67e8f9,
      0 0 10px #67e8f9,
      0 0 21px #67e8f9,
      0 0 42px #22d3ee,
      0 0 62px #22d3ee,
      0 0 82px #22d3ee,
      0 0 92px #22d3ee,
      0 0 102px #22d3ee;
  }

  .text-shadow-neon-purple-xs {
    text-shadow: 
      0 0 3px #a78bfa,
      0 0 5px #a78bfa,
      0 0 7px #a78bfa;
  }

  .text-shadow-neon-cyan-xs {
    text-shadow: 
      0 0 3px #67e8f9,
      0 0 5px #67e8f9,
      0 0 7px  #67e8f9;
  }

  .shadow-purple-glow-sm {
    box-shadow: 0 0 20px rgba(162, 28, 255, 0.4),
                0 0 30px rgba(162, 28, 255, 0.3);
  }

  .shadow-cyan-glow-sm {
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4),
                0 0 30px rgba(0, 255, 255, 0.3);
  }
</style>

Brutalist_RealEstate_VideoPlayer

一个复杂的野兽派风格的视频播放器组件，适用于房地产列表，具有高对比度、森林/绿色调色板和响应式设计，支持深色模式。包括属性详细信息、代理信息和作按钮。

打开预览

                <div class="font-mono min-h-screen bg-emerald-100 text-emerald-900 dark:bg-emerald-950 dark:text-emerald-100 p-4 sm:p-8 flex items-center justify-center">
  <div class="w-full max-w-6xl border-4 border-emerald-900 dark:border-emerald-100 grid grid-cols-1 lg:grid-cols-3 gap-0 bg-emerald-50 dark:bg-emerald-900 shadow-[8px_8px_0px_0px_rgba(4,72,55,1)] dark:shadow-[8px_8px_0px_0px_rgba(204,251,235,1)]">

    <!-- Left Column: Video Player & Controls -->
    <div class="col-span-1 lg:col-span-2 border-b-4 lg:border-r-4 lg:border-b-0 border-emerald-900 dark:border-emerald-100 flex flex-col">
      <div class="relative w-full aspect-video bg-black group overflow-hidden">
        <img src="https://picsum.photos/1280/720?random=1" alt="Property Video Thumbnail" class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105 opacity-80">
        <div class="absolute inset-0 bg-black/60 flex items-center justify-center opacity-100 group-hover:opacity-75 transition-opacity duration-300">
          <svg class="h-24 w-24 sm:h-32 sm:w-32 text-emerald-300 dark:text-emerald-700 border-4 border-emerald-300 dark:border-emerald-700 p-2 cursor-pointer transition-colors duration-300 hover:text-emerald-100 hover:bg-emerald-700 dark:hover:text-emerald-900 dark:hover:bg-emerald-300" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M7.29 14.71L14.71 12 7.29 9.29V14.71zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z" clip-rule="evenodd" />
          </svg>
        </div>
        <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/80 to-transparent text-emerald-100 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
          <div class="flex items-center justify-between pointer-events-none">
            <div class="w-full h-2 bg-emerald-700 dark:bg-emerald-300 relative overflow-hidden">
              <div class="absolute top-0 left-0 bg-emerald-300 dark:bg-emerald-700 h-full w-2/5"></div>
            </div>
          </div>
          <div class="flex justify-between items-center mt-2 text-sm">
            <span>2:35 / 5:10</span>
            <div class="flex gap-2">
                <button class="flex items-center gap-1 text-emerald-100 border-2 border-emerald-100 px-2 py-1 hover:bg-emerald-700 hover:border-emerald-700 transition-colors duration-200">
                    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M9.707 16.707a1 1 0 01-1.414 0l-6-6a1 1 0 010-1.414l6-6a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l4.293 4.293a1 1 0 010 1.414z" clip-rule="evenodd"/></svg>
                </button>
                <button class="flex items-center gap-1 text-emerald-100 border-2 border-emerald-100 px-2 py-1 hover:bg-emerald-700 hover:border-emerald-700 transition-colors duration-200">
                    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                </button>
            </div>
          </div>
        </div>
      </div>
      <div class="p-4 sm:p-6 space-y-4 flex-grow flex flex-col justify-between">
        <div>
          <h2 class="text-2xl sm:text-3xl font-extrabold leading-tight tracking-tighter uppercase mb-2 border-b-2 border-emerald-900 dark:border-emerald-100 pb-1">
            Modern Forest Residence
          </h2>
          <p class="text-xl sm:text-2xl font-bold mb-4 flex items-baseline gap-2">
            $1,250,000 <span class="text-lg text-emerald-700 dark:text-emerald-300 font-normal ml-2">• 3 beds • 4 baths • 2,800 sqft</span>
          </p>
          <p class="text-emerald-700 dark:text-emerald-300 mb-4 text-sm sm:text-base">
            123 Evergreen Lane, Forest Hills, CA 90210
          </p>
          <div class="grid grid-cols-2 lg:grid-cols-4 gap-2 text-xs sm:text-sm pt-2 border-t-2 border-emerald-200 dark:border-emerald-700">
              <div class="flex items-center space-x-1">
                  <svg class="h-4 w-4 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
                  <span>Built 2022</span>
              </div>
              <div class="flex items-center space-x-1">
                  <svg class="h-4 w-4 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
                  <span>Forest Views</span>
              </div>
              <div class="flex items-center space-x-1">
                  <svg class="h-4 w-4 text-emerald-600 dark:text-emerald-400" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true"><path fill-rule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 002-2V4H4zm10 2a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h10zm-3 8l3-3m0 0l-3-3m3 3H2v2h12v-2zm-3-4l3-3m0 0l-3-3m3 3H2v2h12v-2z" clip-rule="evenodd"></path></svg>
                  <span>Large Lot</span>
              </div>
          </div>
        </div>

        <div class="flex flex-col sm:flex-row gap-4 mt-6">
          <button class="flex-1 bg-emerald-900 text-emerald-100 py-3 sm:py-4 px-6 uppercase text-base sm:text-lg font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 hover:border-emerald-700 dark:hover:bg-emerald-300 dark:hover:text-emerald-900 transition-colors duration-200 shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
            Schedule Tour
          </button>
          <button class="flex-1 bg-transparent text-emerald-900 dark:text-emerald-100 py-3 sm:py-4 px-6 uppercase text-base sm:text-lg font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 hover:text-emerald-100 dark:hover:bg-emerald-300 dark:hover:text-emerald-900 transition-colors duration-200 shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
            Download Info Pack
          </button>
        </div>
      </div>
    </div>

    <!-- Right Column: Agent & Related Properties -->
    <div class="col-span-1 border-emerald-900 dark:border-emerald-100 flex flex-col pt-4 sm:pt-6">
      <div class="px-4 sm:px-6 mb-6 flex-shrink-0">
        <h3 class="text-lg sm:text-xl font-bold uppercase mb-4 border-b-2 border-emerald-900 dark:border-emerald-100 pb-1">
          Listing Agent
        </h3>
        <div class="flex items-center gap-4">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Agent Emily Green" class="w-20 h-20 sm:w-24 sm:h-24 object-cover border-4 border-emerald-900 dark:border-emerald-100 rounded-full shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
          <div>
            <p class="text-lg sm:text-xl font-bold uppercase leading-snug">Emily Green</p>
            <p class="text-sm text-emerald-700 dark:text-emerald-300">Verdant Realty Group</p>
            <a href="tel:+15551234567" class="text-sm text-emerald-700 dark:text-emerald-300 hover:underline flex items-center mt-1">
              <svg class="h-4 w-4 mr-1" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.774a11.037 11.037 0 006.103 6.103l.774-1.548a1 1 0 011.06-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" clip-rule="evenodd"></path></svg>
              +1 (555) 123-4567
            </a>
          </div>
        </div>
        <button class="w-full mt-4 bg-emerald-700 text-emerald-100 py-2.5 sm:py-3 px-4 uppercase text-sm sm:text-base font-bold border-2 border-emerald-700 dark:border-emerald-100 hover:bg-emerald-900 transition-colors duration-200 shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
          Contact Emily
        </button>
      </div>

      <div class="flex-grow border-t-4 border-emerald-900 dark:border-emerald-100 pb-4 sm:pb-6 px-4 sm:px-6 overflow-hidden flex flex-col">
        <h3 class="text-lg sm:text-xl font-bold uppercase mt-4 mb-4 border-b-2 border-emerald-900 dark:border-emerald-100 pb-1">
          Explore Similar Listings
        </h3>
        <div class="space-y-4 overflow-y-auto custom-scrollbar pr-2">
          <!-- Related Property 1 -->
          <div class="bg-emerald-100 dark:bg-emerald-800 p-3 border-2 border-emerald-900 dark:border-emerald-100 group shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
            <img src="https://picsum.photos/300/200?random=2" alt="Related property thumbnail" class="w-full h-32 object-cover mb-2 border-2 border-emerald-900 dark:border-emerald-100 group-hover:scale-105 transition-transform duration-200">
            <p class="font-bold text-sm sm:text-base uppercase leading-tight">Lakeside Retreat</p>
            <p class="text-emerald-700 dark:text-emerald-300 text-xs sm:text-sm mb-1">$980,000 • 3 beds</p>
            <button class="block w-full bg-emerald-900 text-emerald-100 text-xs sm:text-sm px-3 py-1.5 uppercase font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 transition-colors duration-200">
              View Details
            </button>
          </div>
          <!-- Related Property 2 -->
          <div class="bg-emerald-100 dark:bg-emerald-800 p-3 border-2 border-emerald-900 dark:border-emerald-100 group shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
            <img src="https://picsum.photos/300/200?random=3" alt="Related property thumbnail" class="w-full h-32 object-cover mb-2 border-2 border-emerald-900 dark:border-emerald-100 group-hover:scale-105 transition-transform duration-200">
            <p class="font-bold text-sm sm:text-base uppercase leading-tight">Mountain View Chalet</p>
            <p class="text-emerald-700 dark:text-emerald-300 text-xs sm:text-sm mb-1">$1,500,000 • 4 beds</p>
            <button class="block w-full bg-emerald-900 text-emerald-100 text-xs sm:text-sm px-3 py-1.5 uppercase font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 transition-colors duration-200">
              View Details
            </button>
          </div>
          <!-- Related Property 3 -->
          <div class="bg-emerald-100 dark:bg-emerald-800 p-3 border-2 border-emerald-900 dark:border-emerald-100 group shadow-[4px_4px_0px_0px_rgba(4,72,55,1)] dark:shadow-[4px_4px_0px_0px_rgba(204,251,235,1)]">
            <img src="https://picsum.photos/300/200?random=4" alt="Related property thumbnail" class="w-full h-32 object-cover mb-2 border-2 border-emerald-900 dark:border-emerald-100 group-hover:scale-105 transition-transform duration-200">
            <p class="font-bold text-sm sm:text-base uppercase leading-tight">Urban Eco Loft</p>
            <p class="text-emerald-700 dark:text-emerald-300 text-xs sm:text-sm mb-1">$850,000 • 2 beds</p>
            <button class="block w-full bg-emerald-900 text-emerald-100 text-xs sm:text-sm px-3 py-1.5 uppercase font-bold border-2 border-emerald-900 dark:border-emerald-100 hover:bg-emerald-700 transition-colors duration-200">
              View Details
            </button>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>

<style>
/* Custom Scrollbar for brutalism style */
.custom-scrollbar::-webkit-scrollbar {
  width: 12px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #d1fae5; /* emerald-100 */
  border: 2px solid #044837; /* emerald-900 */
}

.dark .custom-scrollbar::-webkit-scrollbar-track {
  background: #062f27; /* emerald-950 */
  border: 2px solid #ccfbeB; /* emerald-100 */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #044837; /* emerald-900 */
  border: 2px solid #d1fae5; /* emerald-100 */
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background: #ccfbeB; /* emerald-100 */
  border: 2px solid #044837; /* emerald-900 */
}

.custom-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #044837 #d1fae5; /* thumb color track color */
}

.dark .custom-scrollbar {
  scrollbar-color: #ccfbeB #062f27; /* thumb color track color */
}
</style>

Neon_Glow_Comments_Section

一个响应式评论部分组件，具有充满活力的霓虹灯/发光美感，具有用户头像、时间戳和回复按钮。支持深色模式，专为社交媒体界面而设计。

打开预览

                <div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 min-h-screen p-4 sm:p-8 md:p-12 lg:p-16 flex justify-center items-center">
  <div class="w-full max-w-4xl bg-white dark:bg-gray-800 rounded-lg p-6 sm:p-8 shadow-xl relative overflow-hidden">
    <!-- Neon Border Effect -->
    <div class="absolute inset-0 rounded-lg pointer-events-none 
                before:absolute before:inset-0 before:rounded-lg before:border-2 before:border-purple-500 
                before:dark:border-purple-600 before:shadow-[0_0_15px_rgba(168,85,247,0.7),_inset_0_0_10px_rgba(168,85,247,0.5)] 
                after:absolute after:inset-0 after:rounded-lg after:border-2 after:border-pink-500 
                after:dark:border-pink-600 after:shadow-[0_0_15px_rgba(236,72,153,0.7),_inset_0_0_10px_rgba(236,72,153,0.5)] 
                before:animate-pulse after:animate-pulse-slow
                dark:before:shadow-[0_0_20px_rgba(168,85,247,0.9),_inset_0_0_15px_rgba(168,85,247,0.7)]
                dark:after:shadow-[0_0_20px_rgba(236,72,153,0.9),_inset_0_0_15px_rgba(236,72,153,0.7)]
                "></div>

    <h2 class="text-3xl sm:text-4xl font-extrabold mb-8 text-center 
               bg-clip-text text-transparent bg-gradient-to-r from-purple-500 to-pink-500 
               dark:from-purple-400 dark:to-pink-400 
               shadow-text-glow 
               relative z-10">
      Comments
    </h2>

    <!-- New Comment Input -->
    <div class="mb-8 relative z-10">
      <textarea class="w-full p-4 rounded-lg bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-100 placeholder-gray-400 
                       border border-transparent focus:border-purple-500 focus:ring-2 focus:ring-purple-500 focus:outline-none 
                       shadow-inner shadow-purple-200 dark:shadow-purple-900/50 
                       transition-all duration-300 ease-in-out
                       text-base sm:text-lg"
                placeholder="Write a comment..."></textarea>
      <button class="mt-4 inline-flex items-center px-6 py-3 rounded-full text-white 
                     bg-gradient-to-r from-purple-600 to-pink-600 
                     hover:from-purple-700 hover:to-pink-700 
                     dark:from-purple-500 dark:to-pink-500
                     dark:hover:from-purple-600 dark:hover:to-pink-600
                     shadow-lg shadow-purple-500/50 dark:shadow-purple-800/50 
                     hover:shadow-xl hover:shadow-purple-600/60 dark:hover:shadow-purple-700/60 
                     transition-all duration-300 ease-in-out
                     font-semibold text-base sm:text-lg">
        Post Comment
        <svg class="ml-2 -mr-1 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="M9 5l7 7-7 7"></path>
        </svg>
      </button>
    </div>

    <!-- Comments List -->
    <div class="space-y-6 relative z-10">
      <!-- Comment 1 -->
      <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 sm:p-6 rounded-lg 
                  shadow-md shadow-purple-100 dark:shadow-purple-900/30 
                  border border-transparent hover:border-purple-400 dark:hover:border-purple-600 
                  transition-all duration-300 ease-in-out 
                  relative group">
        <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 sm:mr-6 object-cover 
                    border-2 border-purple-400 dark:border-purple-500 
                    shadow-md shadow-purple-300 dark:shadow-purple-800/50"
             src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
        <div class="flex-1">
          <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-2">
            <p class="font-bold text-lg sm:text-xl text-purple-600 dark:text-purple-400 
                      tracking-tight leading-tight 
                      group-hover:text-purple-700 dark:group-hover:text-purple-300">
              Jane Doe
            </p>
            <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 ml-0 sm:ml-4 mt-1 sm:mt-0">
              2 hours ago
            </span>
          </div>
          <p class="text-gray-700 dark:text-gray-200 text-base sm:text-lg mb-3 leading-relaxed">
            This design is absolutely stunning! The neon glow really makes it pop. Great job!
          </p>
          <button class="text-pink-600 dark:text-pink-400 
                         font-semibold text-sm sm:text-base 
                         hover:text-pink-700 dark:hover:text-pink-300 
                         transition-colors duration-200 ease-in-out 
                         relative 
                         before:absolute before:w-full before:h-0.5 before:bg-pink-500 before:-bottom-1 before:left-0 
                         before:scale-x-0 before:origin-left before:transition-transform before:duration-300
                         hover:before:scale-x-100">
            Reply
          </button>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start bg-gray-50 dark:bg-gray-700 p-4 sm:p-6 rounded-lg 
                  shadow-md shadow-purple-100 dark:shadow-purple-900/30 
                  border border-transparent hover:border-purple-400 dark:hover:border-purple-600 
                  transition-all duration-300 ease-in-out 
                  relative group">
        <img class="w-12 h-12 sm:w-14 sm:h-14 rounded-full mr-4 sm:mr-6 object-cover 
                    border-2 border-pink-400 dark:border-pink-500 
                    shadow-md shadow-pink-300 dark:shadow-pink-800/50"
             src="https://randomuser.me/api/portraits/men/82.jpg" alt="Avatar">
        <div class="flex-1">
          <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-2">
            <p class="font-bold text-lg sm:text-xl text-pink-600 dark:text-pink-400 
                      tracking-tight leading-tight 
                      group-hover:text-pink-700 dark:group-hover:text-pink-300">
              John Smith
            </p>
            <span class="text-xs sm:text-sm text-gray-500 dark:text-gray-400 ml-0 sm:ml-4 mt-1 sm:mt-0">
              1 day ago
            </span>
          </div>
          <p class="text-gray-700 dark:text-gray-200 text-base sm:text-lg mb-3 leading-relaxed">
            Agreed! The colors are incredibly vibrant and energetic. Perfect for a social media app.
          </p>
          <button class="text-purple-600 dark:text-purple-400 
                         font-semibold text-sm sm:text-base 
                         hover:text-purple-700 dark:hover:text-purple-300 
                         transition-colors duration-200 ease-in-out 
                         relative 
                         before:absolute before:w-full before:h-0.5 before:bg-purple-500 before:-bottom-1 before:left-0 
                         before:scale-x-0 before:origin-left before:transition-transform before:duration-300
                         hover:before:scale-x-100">
            Reply
          </button>
          <!-- Nested Reply -->
          <div class="mt-4 pl-8 sm:pl-10 border-l-2 border-pink-300 dark:border-pink-700 ml-4 sm:ml-6">
            <div class="flex items-start bg-gray-100 dark:bg-gray-600 p-3 sm:p-4 rounded-lg 
                        shadow-sm shadow-pink-100 dark:shadow-pink-900/30 
                        border border-transparent hover:border-pink-400 dark:hover:border-pink-600 
                        transition-all duration-300 ease-in-out 
                        relative group">
              <img class="w-10 h-10 sm:w-12 sm:h-12 rounded-full mr-3 sm:mr-4 object-cover
                          border-2 border-pink-400 dark:border-pink-500 
                          shadow-md shadow-pink-300 dark:shadow-pink-800/50"
                   src="https://randomuser.me/api/portraits/women/22.jpg" alt="Avatar">
              <div class="flex-1">
                <div class="flex flex-col sm:flex-row sm:items-center justify-between mb-1">
                  <p class="font-bold text-md sm:text-lg text-pink-600 dark:text-pink-400 
                            tracking-tight leading-tight 
                            group-hover:text-pink-700 dark:group-hover:text-pink-300">
                    Sarah Green
                  </p>
                  <span class="text-xs text-gray-500 dark:text-gray-400 ml-0 sm:ml-4 mt-1 sm:mt-0">
                    23 hours ago
                  </span>
                </div>
                <p class="text-gray-700 dark:text-gray-200 text-sm sm:text-base mb-2 leading-relaxed">
                  Thanks for the feedback, John! I tried to capture that energetic feel.
                </p>
                <button class="text-purple-600 dark:text-purple-400 
                               font-semibold text-xs sm:text-sm 
                               hover:text-purple-700 dark:hover:text-purple-300 
                               transition-colors duration-200 ease-in-out 
                               relative 
                               before:absolute before:w-full before:h-0.5 before:bg-purple-500 before:-bottom-1 before:left-0 
                               before:scale-x-0 before:origin-left before:transition-transform before:duration-300
                               hover:before:scale-x-100">
                  Reply
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
/* Define custom keyframes for glowing text and slow pulse animation */
@keyframes text-glow {
  0%, 100% { text-shadow: 0 0 5px rgba(168, 85, 247, 0.5), 0 0 10px rgba(236, 72, 153, 0.5); }
  50% { text-shadow: 0 0 10px rgba(168, 85, 247, 0.8), 0 0 20px rgba(236, 72, 153, 0.8); }
}

@keyframes text-glow-dark {
  0%, 100% { text-shadow: 0 0 8px rgba(168, 85, 247, 0.7), 0 0 15px rgba(236, 72, 153, 0.7); }
  50% { text-shadow: 0 0 15px rgba(168, 85, 247, 1), 0 0 30px rgba(236, 72, 153, 1); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.shadow-text-glow {
  animation: text-glow 3s ease-in-out infinite;
}

html.dark .shadow-text-glow {
  animation: text-glow-dark 3s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
</style>

Real estate 错误消息

专为房地产平台设计的专业干净的错误消息组件，具有单色配色方案、完全响应能力和深色模式支持。

打开预览

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-50 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="max-w-md w-full mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-xl overflow-hidden ring-1 ring-gray-200 dark:ring-gray-700">
    <div class="p-6 sm:p-8 text-center">
      <div class="flex justify-center mb-4">
        <svg class="w-16 h-16 text-red-500 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
      </div>
      <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 dark:text-white mb-3">Property Not Found</h2>
      <p class="text-gray-600 dark:text-gray-300 text-base sm:text-lg leading-relaxed mb-6">
        We couldn't find the property you're looking for. It might have been sold, removed, or the link is incorrect.
      </p>
      <div class="space-y-3 sm:space-y-0 sm:space-x-3 sm:flex sm:justify-center">
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:bg-blue-500 dark:hover:bg-blue-600 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-9v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
          </svg>
          Go to Homepage
        </a>
        <a href="#" class="inline-flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-md shadow-sm text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-blue-400 dark:focus:ring-offset-gray-800">
          <svg class="-ml-1 mr-2 h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 8h10M7 12h4m1-8a9 9 0 00-9 9 9 9 0 009 9 9 9 0 009-9A9 9 0 007 8z"></path>
          </svg>
          Contact Support
        </a>
      </div>
    </div>
  </div>
</div>

1 ... 65 66 67 68 69 ... 335