搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

产品比较组件 - 房地产（纸张/印刷灵感）

一个简单的、受纸张/印刷品启发的商品对比组件，适用于房地产列表，包含两个属性。使用紫色/紫色调并支持深色模式。

                <div class="font-sans bg-white dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
  <div class="max-w-6xl mx-auto">
    <h2 class="text-2xl sm:text-3xl font-serif font-bold text-gray-900 dark:text-gray-100 mb-6 text-center tracking-tight leading-tight uppercase relative w-fit mx-auto">
      <span class="block pb-2">Compare Properties</span>
      <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-16 h-1 bg-purple-500 rounded-full"></span>
    </h2>

    <div class="flex flex-col lg:flex-row gap-6 lg:gap-8">

      <!-- Property Card 1 -->
      <div class="flex-1 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md lg:shadow-xl overflow-hidden
                  bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                  transition-all duration-300 ease-in-out hover:shadow-lg hover:border-purple-300 dark:hover:border-purple-600">
        <div class="relative pb-2/3 h-0">
          <img src="https://picsum.photos/id/1018/600/400" alt="Property Image" class="absolute inset-0 w-full h-full object-cover rounded-t-lg" loading="lazy">
          <span class="absolute top-3 left-3 bg-purple-600 text-white text-xs font-semibold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-sm">New Listing</span>
        </div>
        <div class="p-4 sm:p-5 flex flex-col justify-between flex-grow">
          <div>
            <h3 class="text-xl sm:text-2xl font-serif font-bold text-gray-900 dark:text-gray-100 mb-2 leading-tight">Charming Family Home</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">1234 Maple Drive, Anytown, USA</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-400 mb-4">$450,000</p>

            <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-2 mb-6">
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>4 Beds</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>2 Baths</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>2,100 sqft</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>Built 1998</li>
            </ul>
          </div>
          <a href="#" class="mt-auto block w-full text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-300 shadow-md transform hover:scale-105">
            View Details
          </a>
        </div>
      </div>

      <!-- Comparison line/separator (hidden on mobile, visible on tablet/desktop) -->
      <div class="hidden lg:flex flex-col items-center justify-center relative">
        <div class="h-full w-0.5 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-12 h-12 bg-purple-500 dark:bg-purple-600 rounded-full text-white font-bold text-lg shadow-lg z-10 p-2 border-2 border-white dark:border-gray-900">
          VS
        </div>
      </div>
      <div class="block lg:hidden flex items-center justify-center relative my-4">
        <div class="w-full h-0.5 bg-gray-300 dark:bg-gray-600 rounded-full"></div>
        <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex items-center justify-center w-10 h-10 bg-purple-500 dark:bg-purple-600 rounded-full text-white font-bold text-base shadow-lg z-10 p-2 border-2 border-white dark:border-gray-900">
          VS
        </div>
      </div>

      <!-- Property Card 2 -->
      <div class="flex-1 border border-gray-200 dark:border-gray-700 rounded-lg shadow-md lg:shadow-xl overflow-hidden
                  bg-gradient-to-br from-white to-gray-50 dark:from-gray-800 dark:to-gray-900
                  transition-all duration-300 ease-in-out hover:shadow-lg hover:border-purple-300 dark:hover:border-purple-600">
        <div class="relative pb-2/3 h-0">
          <img src="https://picsum.photos/id/1021/600/400" alt="Property Image" class="absolute inset-0 w-full h-full object-cover rounded-t-lg" loading="lazy">
          <span class="absolute top-3 left-3 bg-purple-600 text-white text-xs font-semibold px-2.5 py-1 rounded-full uppercase tracking-wider shadow-sm">Reduced Price</span>
        </div>
        <div class="p-4 sm:p-5 flex flex-col justify-between flex-grow">
          <div>
            <h3 class="text-xl sm:text-2xl font-serif font-bold text-gray-900 dark:text-gray-100 mb-2 leading-tight">Modern City Apartment</h3>
            <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">5678 Oak Street, Metroville, USA</p>
            <p class="text-lg font-bold text-purple-700 dark:text-purple-400 mb-4">$420,000</p>

            <ul class="text-sm text-gray-700 dark:text-gray-300 space-y-2 mb-6">
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>3 Beds</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>2 Baths</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>1,800 sqft</li>
              <li class="flex items-center"><svg class="w-4 h-4 mr-2 text-purple-500" 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>Built 2015</li>
            </ul>
          </div>
          <a href="#" class="mt-auto block w-full text-center bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-2 px-4 rounded-md transition-colors duration-300 shadow-md transform hover:scale-105">
            View Details
          </a>
        </div>
      </div>

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

Back to Top Button 组件

响应式“Back to Top”按钮组件，具有受纸张/印刷启发的设计、三重配色方案和复杂的视觉元素，适用于电子商务网站。包括深色模式支持。

打开预览

                <div class="fixed bottom-4 right-4 z-50">
  <!-- Back to Top Button -->
  <a href="#top" aria-label="Back to top" class="group relative flex items-center justify-center p-2 sm:p-3 bg-indigo-500 hover:bg-indigo-600 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:bg-emerald-600 dark:hover:bg-emerald-700 dark:focus:ring-emerald-800 rounded-full shadow-lg transition-all duration-300 ease-in-out transform hover:scale-110 active:scale-95 overflow-hidden border-2 border-indigo-700 dark:border-emerald-800 animate-bounce-slow">
    <!-- Paper Fold Effect - Top Right -->
    <div class="absolute top-0 right-0 w-0 h-0 border-t-[10px] border-l-[10px] sm:border-t-[15px] sm:border-l-[15px] border-solid border-transparent border-t-indigo-700 dark:border-t-emerald-800 transform rotate-45 translate-x-[4px] -translate-y-[4px] sm:translate-x-[6px] sm:-translate-y-[6px] group-hover:scale-125 transition-transform duration-300"></div>
    <div class="absolute top-0 right-0 w-0 h-0 border-t-[10px] border-l-[10px] sm:border-t-[15px] sm:border-l-[15px] border-solid border-transparent border-t-white dark:border-t-gray-900 opacity-20 transform rotate-45 translate-x-[6px] -translate-y-[6px] sm:translate-x-[9px] sm:-translate-y-[9px] group-hover:opacity-30 transition-opacity duration-300"></div>

    <!-- Print Lines Texture -->
    <div class="absolute inset-0 bg-[length:16px_16px] opacity-10 dark:opacity-15" style="background-image: repeating-linear-gradient(45deg, transparent, transparent 1px, rgba(255,255,255,0.1) 1px, rgba(255,255,255,0.1) 2px);"></div>
    <div class="absolute inset-0 bg-[length:16px_16px] opacity-10 dark:opacity-15" style="background-image: repeating-linear-gradient(-45deg, transparent, transparent 1px, rgba(0,0,0,0.1) 1px, rgba(0,0,0,0.1) 2px);"></div>

    <!-- Inner Shadow for depth -->
    <div class="absolute inset-0 rounded-full shadow-[inset_0_0_8px_rgba(0,0,0,0.3)] dark:shadow-[inset_0_0_8px_rgba(0,0,0,0.5)]"></div>

    <!-- Icon with subtle 3D effect -->
    <svg class="h-6 w-6 sm:h-8 sm:w-8 text-white dark:text-gray-900 filter drop-shadow-[0_1px_1px_rgba(0,0,0,0.4)] dark:drop-shadow-[0_1px_1px_rgba(255,255,255,0.1)] transition-transform duration-300 group-hover:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>

    <!-- Subtle shine effect on hover -->
    <div class="absolute inset-0 rounded-full opacity-0 group-hover:opacity-100 transition-opacity duration-300" style="background: radial-gradient(circle at 50% 0, rgba(255,255,255,0.3) 0%, transparent 70%);"></div>

    <!-- Hidden text for screen readers (optional, could be replaced by aria-label) -->
    <span class="sr-only">Back to Top</span>
  </a>
</div>

<!-- Just for demonstration purposes to show the button in action -->
<!-- Add a large div to allow scrolling -->
<div id="top" class="min-h-[200vh] bg-neutral-100 dark:bg-gray-800 p-8">
  <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">Scroll Down to See the Button</h1>
  <p class="text-gray-700 dark:text-gray-300">This is placeholder content to make the page scrollable.</p>
  <div class="h-[140vh] flex items-end justify-center">
    <p class="text-gray-700 dark:text-gray-300">Scroll more to truly appreciate the button's presence!</p>
  </div>
</div>

Neumorphic Follow Button 组件

一个复杂的交互式 neumorphic follow 按钮组件，具有海洋/蓝色调，专为社交媒体界面设计。包括深色模式支持和响应式设计。

打开预览

                <div class="flex items-center justify-center min-h-screen p-4 bg-blue-100 dark:bg-gray-900 transition-colors duration-300">
  <!-- Neumorphic Follow Card Container -->
  <div class="w-full max-w-sm p-6 rounded-3xl bg-blue-100 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark transition-all duration-300">
    <div class="flex flex-col items-center space-y-5">
      <!-- Profile Picture and Name -->
      <div class="relative">
        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Profile Picture" class="w-24 h-24 rounded-full object-cover shadow-neumorphic-light-inset dark:shadow-neumorphic-dark-inset transition-colors duration-300">
        <span class="absolute bottom-0 right-0 w-6 h-6 bg-green-400 rounded-full border-2 border-blue-100 dark:border-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark"></span>
      </div>
      <div class="text-center">
        <h2 class="text-2xl font-bold text-blue-900 dark:text-blue-100">Jane Doe</h2>
        <p class="text-blue-700 dark:text-blue-300">@janedoe_official</p>
        <p class="text-sm text-blue-600 dark:text-blue-400 mt-2">UI/UX Designer | Building beautiful experiences.</p>
      </div>

      <!-- Stats Section -->
      <div class="grid grid-cols-3 gap-4 w-full mt-4">
        <div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
          <span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">1.2k</span>
          <span class="text-blue-700 dark:text-blue-300 text-xs">Posts</span>
        </div>
        <div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
          <span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">5.8k</span>
          <span class="text-blue-700 dark:text-blue-300 text-xs">Followers</span>
        </div>
        <div class="flex flex-col items-center p-3 rounded-xl bg-blue-50 dark:bg-gray-700 shadow-neumorphic-light-sm dark:shadow-neumorphic-dark-sm transition-colors duration-300">
          <span class="text-blue-900 dark:text-blue-100 font-semibold text-lg">345</span>
          <span class="text-blue-700 dark:text-blue-300 text-xs">Following</span>
        </div>
      </div>

      <!-- Follow Button Group -->
      <div class="flex flex-col md:flex-row gap-4 w-full mt-5">
        <button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
                       bg-gradient-to-br from-blue-500 to-blue-700 text-white
                       hover:from-blue-600 hover:to-blue-800
                       shadow-neumorphic-blue dark:shadow-neumorphic-dark-blue
                       active:shadow-neumorphic-blue-inset dark:active:shadow-neumorphic-dark-blue-inset
                       transition-all duration-200 ease-in-out
                       focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
                       dark:text-blue-100">
          Follow
        </button>
        <button class="flex-1 py-3 px-6 rounded-full text-lg font-semibold
                       bg-blue-100 dark:bg-gray-800 text-blue-800 dark:text-blue-200
                       shadow-neumorphic-light dark:shadow-neumorphic-dark
                       hover:bg-blue-200 dark:hover:bg-gray-700
                       active:shadow-neumorphic-light-inset dark:active:shadow-neumorphic-dark-inset
                       transition-all duration-200 ease-in-out
                       focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
                       dark:hover:text-blue-100">
          Message
        </button>
      </div>

      <!-- Social Icons -->
      <div class="flex justify-center space-x-6 mt-6 w-full">
        <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path d="M22.23 6.09c.01.59.01 1.18 0 1.77 0 5.43-4.14 11.66-11.67 11.66A11.68 11.68 0 010 19.34c1.61.18 3.23-.27 4.67-1.35.03.02.05.04.08.06A8.25 8.25 0 0010.5 17c-2.45-.4-4.5-1.63-5.97-3.69-.1-.1-.13-.2-.17-.3A.32.32 0 014 12.82c.04.01.07.03.1.04.57.24 1.18.39 1.8.46-1.92-1.3-3.19-3.52-3.19-6.09 0-1.34.37-2.6.98-3.77A8.34 8.34 0 0010.5 9.4c-.05-1.5-.77-2.88-1.95-3.87.5-.1 1-.16 1.5-.16A8.24 8.24 0 0117.84 8.3c1.78-.57 3.42-1.6 4.79-2.9v-.01zM10.5 2C5.83 2 2 5.8 2 10.5c0 3.73 2.45 6.94 5.82 8.37A10.12 10.12 0 0010.5 20c5.79 0 10.5-4.71 10.5-10.5S16.29 2 10.5 2zm6.27 4.28c-.01.02-.02.04-.04.05.02-.01.03-.03.04-.05z"></path>
          </svg>
        </a>
        <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.502 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33V22H12c5.523 0 10-4.477 10-10z" clip-rule="evenodd" />
          </svg>
        </a>
        <a href="#" class="w-12 h-12 flex items-center justify-center rounded-full bg-blue-50 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark hover:shadow-neumorphic-light-inset dark:hover:shadow-neumorphic-dark-inset text-blue-700 dark:text-blue-300 transition-all duration-200 ease-in-out">
          <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path fill-rule="evenodd" d="M12.24 20.3c-.09.02-.19.03-.29.04a2.91 2.91 0 01-1.89-.66c-.34-.23-.62-.51-.83-.84l-.11-.18A.75.75 0 009 18.23l-.1-.08c-.16-.14-.29-.28-.39-.42-.08-.12-.13-.23-.16-.33l-.04-.13a.75.75 0 00-.73-.55h-.01a.75.75 0 00-.63.29c-.06.07-.12.16-.16.27-.05.11-.08.23-.08.36 0 .1.01.2.02.29.02.1.04.2.07.29.03.09.07.17.11.26.04.09.09.18.15.26.06.09.13.17.2.25.07.09.15.16.23.23l.11.1c.09.08.18.15.28.22.1.07.2.13.31.18.06.03.12.06.19.08.08.02.16.03.24.03.05 0 .1-.01.15-.02.05-.01.09-.02.14-.03.04-.01.08-.02.1-.03l.03-.01v-.01a.15.15 0 01.03-.02l.02-.01a.75.75 0 00.32-.98.75.75 0 00-.98-.32l-.02.01-.03.02a.15.15 0 01-.03.02l-.1.05-.18.06-.29-.1c-.1-.04-.19-.09-.28-.15-.08-.07-.16-.15-.22-.24-.07-.1-.13-.2-.17-.3-.05-.1-.08-.2-.11-.3-.02-.08-.03-.17-.03-.26 0-.27.1-.5.3-.65.2-.16.48-.25.75-.25.21 0 .4.07.57.18.17.11.3.26.4.45.06.11.1.23.14.36.03.12.05.25.05.38 0 .22-.04.42-.12.6-.08.19-.19.35-.33.5-.09.09-.19.16-.3.21-.08.03-.16.05-.24.05-.04 0-.08-.01-.12-.02-.04-.01-.07-.02-.1-.04a.75.75 0 00-.9-.57.75.75 0 00-.57.9c.07.16.14.3.24.43.09.12.2.24.32.34.12.1.25.18.39.24.13.06.28.1.42.11.16.02.32.02.49.02.31 0 .6-.04.88-.13.28-.09.53-.22.75-.4.22-.17.4-.39.54-.64.14-.25.24-.53.29-.83.05-.3.07-.63.07-.98 0-.31-.03-.62-.09-.92-.06-.3-.15-.59-.26-.87-.11-.29-.25-.56-.41-.81-.17-.25-.36-.48-.58-.69-.21-.21-.45-.4-.7-.57-.26-.17-.54-.3-.84-.4-.3-.1-.63-.15-.97-.15-.31 0-.6.04-.88.13-.28.09-.53.22-.75.4-.22.17-.4.39-.54.64-.14.25-.24.53-.29.83-.05.3-.07.63-.07.98 0 .31.03.62.09.92.06.3.15.59.26.87.11.29.25.56.41.81.17.25.36.48.58.69.21.21.45.4.7.57.26.17.54.3.84.4.3.1.63.15.97.15zM22 12c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2s10 4.477 10 10z" clip-rule="evenodd" />
          </svg>
        </a>
      </div>
    </div>

    <!-- Custom Tailwind CSS Configuration for Neumorphism -->
    <style>
      .shadow-neumorphic-light {
        box-shadow: 6px 6px 12px #98b7e0, -6px -6px 12px #d2f7ff;
      }
      .dark .shadow-neumorphic-dark {
        box-shadow: 6px 6px 12px #181c2d, -6px -6px 12px #444c68;
      }
      .shadow-neumorphic-light-inset {
        box-shadow: inset 4px 4px 8px #98b7e0, inset -4px -4px 8px #d2f7ff;
      }
      .dark .shadow-neumorphic-dark-inset {
        box-shadow: inset 4px 4px 8px #181c2d, inset -4px -4px 8px #444c68;
      }
      .shadow-neumorphic-light-sm {
        box-shadow: 3px 3px 6px #a8cce6, -3px -3px 6px #c4ecff;
      }
      .dark .shadow-neumorphic-dark-sm {
        box-shadow: 3px 3px 6px #1c2134, -3px -3px 6px #3a415b;
      }
      .shadow-neumorphic-blue {
        box-shadow: 8px 8px 16px #0a5697, -8px -8px 16px #1072c4;
      }
      .dark .shadow-neumorphic-dark-blue {
        box-shadow: 8px 8px 16px rgba(0,0,0,0.4), -8px -8px 16px rgba(100,100,100,0.2);
      }
      .shadow-neumorphic-blue-inset {
        box-shadow: inset 5px 5px 10px #0a5697, inset -5px -5px 10px #1072c4;
      }
      .dark .shadow-neumorphic-dark-blue-inset {
        box-shadow: inset 5px 5px 10px rgba(0,0,0,0.6), inset -5px -5px 10px rgba(100,100,100,0.3);
      }
    </style>
  </div>
</div>

Product Reviews 组件

专为社交媒体界面设计的响应式产品评论组件，具有具有灰度配色方案的深色模式 UI。包括评分、用户头像、评论文本和“阅读更多”按钮。

打开预览

                <div class="p-4 sm:p-6 lg:p-8 bg-gray-950 text-gray-100 dark:bg-black dark:text-gray-50 min-h-screen">
  <div class="max-w-md mx-auto">
    <h2 class="text-2xl sm:text-3xl font-bold mb-6 text-center">Customer Reviews</h2>

    <div class="space-y-6">
      <!-- Review 1 -->
      <div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-50 text-lg">Jane Doe</p>
            <div class="flex items-center">
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <span class="ml-2 text-sm text-gray-400">4.0</span>
            </div>
          </div>
        </div>
        <p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
          "Absolutely love this product! It's exactly what I needed. The quality is superb and it was very easy to set up. Highly recommend anyone to give it a try. Will definitely be purchasing more items from this brand in the future." 
          <button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
        </p>
        <p class="text-sm text-gray-500">Reviewed on October 26, 2023</p>
      </div>

      <!-- Review 2 -->
      <div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/22.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-50 text-lg">John Smith</p>
            <div class="flex items-center">
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <span class="ml-2 text-sm text-gray-400">5.0</span>
            </div>
          </div>
        </div>
        <p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
          "Fantastic product! Exceeded my expectations in every way. The design is sleek, and the functionality is flawless. I use it daily and it has made a significant positive impact. Worth every penny!"
          <button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
        </p>
        <p class="text-sm text-gray-500">Reviewed on October 20, 2023</p>
      </div>

      <!-- Review 3 -->
      <div class="bg-gray-900 rounded-lg p-6 shadow-lg dark:bg-gray-950">
        <div class="flex items-center mb-4">
          <img class="w-12 h-12 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
          <div>
            <p class="font-semibold text-gray-50 text-lg">Emily White</p>
            <div class="flex items-center">
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-yellow-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <svg class="w-5 h-5 text-gray-400 fill-current" viewBox="0 0 24 24"><path d="M12 .587l3.668 7.426 8.204 1.192-5.96 5.811 1.416 8.163L12 18.286l-7.328 3.851 1.416-8.163-5.96-5.811 8.204-1.192L12 .587z"/></svg>
              <span class="ml-2 text-sm text-gray-400">3.0</span>
            </div>
          </div>
        </div>
        <p class="mb-4 text-gray-300 dark:text-gray-300 leading-relaxed text-sm lg:text-base">
          "It's okay. Does the job, but nothing spectacular. Expected a bit more given the price point. It could use some improvements in terms of user interface and overall performance. Average experience overall."
          <button class="text-blue-400 hover:text-blue-300 text-xs sm:text-sm">Read More</button>
        </p>
        <p class="text-sm text-gray-500">Reviewed on October 15, 2023</p>
      </div>
    </div>
  </div>
</div>

Corporate_Professional_Alert_Messages

一系列干净、可信的警报消息，适用于商业或投资组合环境，采用宝石色调和响应式设计，支持深色模式。包括信息警报、成功警报、警告警报和错误警报。

打开预览

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

  <!-- Information Alert (Sapphire Blue) -->
  <div class="mb-6 p-4 rounded-lg shadow-md border border-blue-600 bg-blue-50 dark:bg-blue-950 dark:border-blue-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-blue-700 dark:text-blue-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M8.257 3.328a1.5 1.5 0 013.486 0l4.316 6.302a1.5 1.5 0 01-1.317 2.37H5.258a1.5 1.5 0 01-1.317-2.37l4.316-6.302zM10 17a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-blue-800 dark:text-blue-200">Information Update</h3>
        <p class="mt-1 text-sm text-blue-700 dark:text-blue-300">
          This is an important update regarding your portfolio analytics. New features have been added to enhance your viewing experience. <a href="#" class="font-medium underline text-blue-800 dark:text-blue-200 hover:text-blue-900 dark:hover:text-blue-100">Learn More</a>.
        </p>
      </div>
      <div class="ml-4 flex-shrink-0">
        <button type="button" class="inline-flex rounded-md p-1.5 text-blue-700 dark:text-blue-300 hover:bg-blue-100 dark:hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-blue-950">
          <span class="sr-only">Dismiss</span>
          <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
            <path d="M6.293 6.293a1 1 0 011.414 0L10 8.586l2.293-2.293a1 1 0 111.414 1.414L11.414 10l2.293 2.293a1 1 0 01-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 01-1.414-1.414L8.586 10 6.293 7.707a1 1 0 010-1.414z" />
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Success Alert (Emerald Green) -->
  <div class="mb-6 p-4 rounded-lg shadow-md border border-green-600 bg-green-50 dark:bg-green-950 dark:border-green-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-green-700 dark:text-green-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-green-800 dark:text-green-200">Portfolio Published!</h3>
        <p class="mt-1 text-sm text-green-700 dark:text-green-300">
          Great news! Your latest portfolio piece 'Project Aurora' has been successfully published and is now live for all to see. Congratulations!
        </p>
        <div class="mt-4">
          <div class="-mx-2 -my-1.5 flex">
            <button type="button" class="rounded-md bg-green-100 dark:bg-green-800 px-2 py-1.5 text-sm font-medium text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600 dark:focus:ring-offset-green-950">
              View Portfolio
            </button>
            <button type="button" class="ml-3 rounded-md bg-green-100 dark:bg-green-800 px-2 py-1.5 text-sm font-medium text-green-800 dark:text-green-200 hover:bg-green-200 dark:hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-green-50 focus:ring-green-600 dark:focus:ring-offset-green-950">
              Share Link
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Warning Alert (Citrine/Amber) -->
  <div class="mb-6 p-4 rounded-lg shadow-md border border-amber-600 bg-amber-50 dark:bg-amber-950 dark:border-amber-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-amber-700 dark:text-amber-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M8.257 3.328a1.5 1.5 0 013.486 0l4.316 6.302a1.5 1.5 0 01-1.317 2.37H5.258a1.5 1.5 0 01-1.317-2.37l4.316-6.302zM10 17a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-amber-800 dark:text-amber-200">Attention Required</h3>
        <p class="mt-1 text-sm text-amber-700 dark:text-amber-300">
          Some of your image assets are exceeding recommended file sizes. This may impact load times for your portfolio.
        </p>
      </div>
    </div>
  </div>

  <!-- Error Alert (Ruby Red) -->
  <div class="p-4 rounded-lg shadow-md border border-red-600 bg-red-50 dark:bg-red-950 dark:border-red-700" role="alert">
    <div class="flex items-start">
      <div class="flex-shrink-0 text-red-700 dark:text-red-300">
        <svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20" aria-hidden="true">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
        </svg>
      </div>
      <div class="ml-3 flex-1">
        <h3 class="text-lg font-semibold text-red-800 dark:text-red-200">Upload Failed</h3>
        <p class="mt-1 text-sm text-red-700 dark:text-red-300">
          There was an error uploading 'hero-banner.png'. The file type is not supported. Please try a JPG or WebP image.
        </p>
        <div class="mt-4">
          <div class="-mx-2 -my-1.5 flex">
            <button type="button" class="rounded-md bg-red-100 dark:bg-red-800 px-2 py-1.5 text-sm font-medium text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600 dark:focus:ring-offset-red-950">
              Retry Upload
            </button>
            <button type="button" class="ml-3 rounded-md bg-red-100 dark:bg-red-800 px-2 py-1.5 text-sm font-medium text-red-800 dark:text-red-200 hover:bg-red-200 dark:hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-red-50 focus:ring-red-600 dark:focus:ring-offset-red-950">
              Contact Support
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>

Toast 通知组件

一个简单、艺术、多彩的电子商务 Toast 通知组件，具有水彩般的柔和纹理和彩虹渐变。完全响应，支持深色模式。

打开预览

                <div class="fixed inset-x-0 bottom-4 z-50 flex items-center justify-center p-4 sm:p-6 lg:p-8">
  <div class="flex w-full max-w-sm flex-col space-y-3">

    <!-- Success Notification -->
    <div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-indigo-200 via-purple-200 to-pink-200 p-4 shadow-lg dark:from-indigo-800 dark:via-purple-800 dark:to-pink-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
      <!-- Watercolor Effect Background -->
      <div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1053/600/400?blur=5'); background-size: cover; background-position: center;"></div>
      
      <div class="relative z-10 flex items-center space-x-3">
        <div class="flex-shrink-0 text-green-700 dark:text-green-300">
          <svg class="h-6 w-6 sm:h-7 sm:w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
          Item Added to Cart!
        </div>
      </div>
      <button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
        <span class="sr-only">Close notification</span>
        <svg class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Info Notification -->
    <div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-teal-200 via-cyan-200 to-blue-200 p-4 shadow-lg dark:from-teal-800 dark:via-cyan-800 dark:to-blue-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
      <!-- Watercolor Effect Background -->
      <div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1060/600/400?blur=5'); background-size: cover; background-position: center;"></div>

      <div class="relative z-10 flex items-center space-x-3">
        <div class="flex-shrink-0 text-blue-700 dark:text-blue-300">
          <svg class="h-6 w-6 sm:h-7 sm:w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
          </svg>
        </div>
        <div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
          Free shipping on orders over $50!
        </div>
      </div>
      <button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
        <span class="sr-only">Close notification</span>
        <svg class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

    <!-- Warning Notification (Placeholder, not primary for e-commerce success/info) -->
    <div class="relative flex items-center justify-between rounded-xl bg-gradient-to-br from-yellow-200 via-orange-200 to-red-200 p-4 shadow-lg dark:from-yellow-800 dark:via-orange-800 dark:to-red-800 overflow-hidden transform transition-all duration-300 ease-out hover:scale-[1.02]">
      <!-- Watercolor Effect Background -->
      <div class="absolute inset-0 opacity-40 dark:opacity-20" style="background-image: url('https://picsum.photos/id/1069/600/400?blur=5'); background-size: cover; background-position: center;"></div>

      <div class="relative z-10 flex items-center space-x-3">
        <div class="flex-shrink-0 text-orange-700 dark:text-orange-300">
          <svg class="h-6 w-6 sm:h-7 sm:w-7" 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>
        </div>
        <div class="font-medium text-gray-800 dark:text-gray-100 text-sm sm:text-base font-serif tracking-wide">
          Quantities are limited!
        </div>
      </div>
      <button type="button" class="relative z-10 flex-shrink-0 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-colors duration-200">
        <span class="sr-only">Close notification</span>
        <svg class="h-5 w-5 sm:h-6 sm:w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
      </button>
    </div>

  </div>
</div>

下拉菜单组件

一个简单的单色下拉菜单组件，专为金融/银行界面设计，具有微妙的微交互和完全响应能力，并支持深色模式。

打开预览

                <div class="relative inline-block text-left font-sans">
  <div>
    <button type="button" class="transition-all duration-300 ease-in-out inline-flex justify-center w-full rounded-md border border-gray-300 dark:border-gray-700 shadow-sm px-4 py-2 bg-white dark:bg-gray-800 text-sm font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 dark:focus:ring-offset-gray-900 dark:focus:ring-purple-600 active:scale-98" id="options-menu" aria-haspopup="true" aria-expanded="true">
      Account Actions
      <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>

  <!-- Dropdown menu, show/hide based on menu state. Using inline style here to simulate dynamic show/hide. In a real app, this would be toggled with JS. -->
  <div class="absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5 dark:ring-white dark:ring-opacity-10 focus:outline-none origin-top-right transition-all duration-300 ease-out transform scale-95 opacity-0 invisible sm:scale-100 sm:opacity-100 sm:visible" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
    <div class="py-1" role="none">
      <a href="#" class="transition-colors duration-200 block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
        <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.794 3.391A60.07 60.07 0 0022.5 12c0-8.284-6.716-15-15-15S0 3.716 0 12c0 3.037.915 5.86 2.593 8.163" />
        </svg>
        View Balance
      </a>
      <a href="#" class="transition-colors duration-200 block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
        <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Transaction History
      </a>
      <a href="#" class="transition-colors duration-200 block px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
        <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Transfer Funds
      </a>
      <form method="POST" action="#" role="none">
        <button type="submit" class="transition-colors duration-200 block w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-purple-100 dark:hover:bg-purple-800 hover:text-purple-900 dark:hover:text-purple-100 group" role="menuitem">
          <svg class="mr-3 h-5 w-5 text-gray-400 dark:text-gray-500 group-hover:text-purple-600 dark:group-hover:text-purple-300 inline-block align-middle" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25 0 007.5 21h6a2.25 2.25 0 002.25-2.25V15m3-9l-3 3m0 0l3 3m-3-3H21" />
          </svg>
          Log Out Account
        </button>
      </form>
    </div>
  </div>
</div>

拟物化加密画廊

专为加密货币和区块链应用程序设计的复杂拟物化库组件，具有互补色、响应性和深色模式支持。它模仿了现实世界的元素，如嵌入式按钮和浮雕框架。

打开预览

                <div class="p-4 sm:p-6 md:p-8 bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans text-gray-800 dark:text-gray-200">

  <!-- Component Title -->
  <h1 class="text-4xl sm:text-5xl font-extrabold mb-8 text-center text-gray-900 dark:text-gray-100 drop-shadow-lg">
    <span class="bg-clip-text text-transparent bg-gradient-to-r from-teal-500 to-blue-600 dark:from-teal-400 dark:to-blue-500">Crypto Art Vault</span>
  </h1>

  <!-- Gallery Controls (Top) -->
  <div class="mb-8 flex flex-col sm:flex-row items-center justify-between rounded-xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md">
    <div class="flex items-center space-x-4 mb-4 sm:mb-0">
      <button class="p-3 rounded-full bg-gradient-to-br from-teal-500 to-blue-600 dark:from-teal-400 dark:to-blue-500 text-white shadow-neu-light-inner dark:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200 flex items-center justify-center w-12 h-12 flex-shrink-0">
        <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="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"></path></svg>
      </button>
      <button class="p-3 rounded-full bg-gradient-to-br from-blue-600 to-teal-500 dark:from-blue-500 dark:to-teal-400 text-white shadow-neu-light-inner dark:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200 flex items-center justify-center w-12 h-12 flex-shrink-0">
        <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="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"></path></svg>
      </button>
      <div class="relative inline-block text-left">
        <button type="button" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-xl text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-inner dark:hover:shadow-neu-dark-inner focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500 dark:focus:ring-teal-400 transition-all duration-200" id="options-menu" aria-haspopup="true" aria-expanded="true">
          Category <svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
        </button>
        <!-- Dropdown menu (hidden by default) - for a real implementation, this would be toggled by JS -->
        <div class="origin-top-left absolute left-0 mt-2 w-56 rounded-md shadow-neu-light-lg dark:shadow-neu-dark-lg bg-gray-100 dark:bg-gray-800 ring-1 ring-black ring-opacity-5 hidden" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
          <div class="py-1" role="none">
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors duration-200" role="menuitem">All NFTs</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors duration-200" role="menuitem">Genesis Collection</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors duration-200" role="menuitem">Digital Sculptures</a>
            <a href="#" class="block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-md transition-colors duration-200" role="menuitem">Pixel Art</a>
          </div>
        </div>
      </div>
    </div>
    <div class="relative w-full sm:w-auto">
      <input type="text" placeholder="Search NFTs..." class="py-3 pr-12 pl-6 w-full sm:w-72 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 placeholder-gray-500 dark:placeholder-gray-400 shadow-neu-light-inner dark:shadow-neu-dark-inner focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-200 dark:ring-offset-gray-800 focus:ring-teal-500 dark:focus:ring-teal-400 transition-all duration-200">
      <div class="absolute inset-y-0 right-0 pr-4 flex items-center pointer-events-none text-gray-500 dark:text-gray-400">
        <svg class="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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
      </div>
    </div>
  </div>

  <!-- Gallery Grid -->
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">

    <!-- NFT Card 1 -->
    <div class="group relative rounded-2xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-lg dark:hover:shadow-neu-dark-lg transition-all duration-300 flex flex-col">
      <div class="relative aspect-video rounded-xl overflow-hidden mb-4 shadow-neu-light-inner dark:shadow-neu-dark-inner">
        <img src="https://picsum.photos/id/1053/400/225" alt="NFT Image" class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-300">
        <div class="absolute top-3 right-3 p-2 rounded-full bg-gray-50 dark:bg-gray-900 shadow-neu-light-md dark:shadow-neu-dark-md text-gray-700 dark:text-gray-300 text-xs font-semibold select-none">LIVE BID</div>
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 truncate">The Cybernetic Golem</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">A unique digital sculpture transcending physical limitations.</p>
      <div class="flex items-center justify-between text-sm mb-4">
        <div class="flex items-center space-x-2">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Creator Avatar" class="w-8 h-8 rounded-full shadow-neu-light-inner dark:shadow-neu-dark-inner">
          <span class="text-gray-700 dark:text-gray-300 font-medium">@NFT_Visionary</span>
        </div>
        <div class="flex items-center space-x-1">
          <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
          <span class="text-gray-600 dark:text-gray-400">12 Likes</span>
        </div>
      </div>
      <div class="relative flex items-center justify-between mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex flex-col">
          <span class="text-xs text-gray-500 dark:text-gray-400">Current Bid</span>
          <span class="text-lg font-bold text-teal-600 dark:text-teal-400">3.2 ETH</span>
        </div>
        <button class="px-5 py-2 rounded-xl bg-gradient-to-br from-blue-500 to-teal-600 dark:from-blue-400 dark:to-teal-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
          Place Bid
        </button>
      </div>
    </div>

    <!-- NFT Card 2 -->
    <div class="group relative rounded-2xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-lg dark:hover:shadow-neu-dark-lg transition-all duration-300 flex flex-col">
      <div class="relative aspect-video rounded-xl overflow-hidden mb-4 shadow-neu-light-inner dark:shadow-neu-dark-inner">
        <img src="https://picsum.photos/id/1063/400/225" alt="NFT Image" class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-300">
        <div class="absolute top-3 right-3 p-2 rounded-full bg-gray-50 dark:bg-gray-900 shadow-neu-light-md dark:shadow-neu-dark-md text-gray-700 dark:text-gray-300 text-xs font-semibold select-none">ENDED</div>
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 truncate">Quantum Landscapes</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">Exploring the impossible geometries of quantum realms.</p>
      <div class="flex items-center justify-between text-sm mb-4">
        <div class="flex items-center space-x-2">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Creator Avatar" class="w-8 h-8 rounded-full shadow-neu-light-inner dark:shadow-neu-dark-inner">
          <span class="text-gray-700 dark:text-gray-300 font-medium">@PixelSynth</span>
        </div>
        <div class="flex items-center space-x-1">
          <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
          <span class="text-gray-600 dark:text-gray-400">20 Likes</span>
        </div>
      </div>
      <div class="relative flex items-center justify-between mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex flex-col">
          <span class="text-xs text-gray-500 dark:text-gray-400">Sold For</span>
          <span class="text-lg font-bold text-gray-900 dark:text-gray-100">5.0 ETH</span>
        </div>
        <button class="px-5 py-2 rounded-xl bg-gradient-to-br from-gray-400 to-gray-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md cursor-not-allowed opacity-70" disabled>
          View Sale
        </button>
      </div>
    </div>

    <!-- NFT Card 3 -->
    <div class="group relative rounded-2xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-lg dark:hover:shadow-neu-dark-lg transition-all duration-300 flex flex-col">
      <div class="relative aspect-video rounded-xl overflow-hidden mb-4 shadow-neu-light-inner dark:shadow-neu-dark-inner">
        <img src="https://picsum.photos/id/111/400/225" alt="NFT Image" class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-300">
        <div class="absolute top-3 right-3 p-2 rounded-full bg-gray-50 dark:bg-gray-900 shadow-neu-light-md dark:shadow-neu-dark-md text-gray-700 dark:text-gray-300 text-xs font-semibold select-none">ON AUCTION</div>
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 truncate">Neon Genesis Glitch</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">A captivating glitch art piece from the 90s digital era.</p>
      <div class="flex items-center justify-between text-sm mb-4">
        <div class="flex items-center space-x-2">
          <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Creator Avatar" class="w-8 h-8 rounded-full shadow-neu-light-inner dark:shadow-neu-dark-inner">
          <span class="text-gray-700 dark:text-gray-300 font-medium">@DataGhost</span>
        </div>
        <div class="flex items-center space-x-1">
          <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
          <span class="text-gray-600 dark:text-gray-400">18 Likes</span>
        </div>
      </div>
      <div class="relative flex items-center justify-between mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex flex-col">
          <span class="text-xs text-gray-500 dark:text-gray-400">Min. Bid</span>
          <span class="text-lg font-bold text-teal-600 dark:text-teal-400">1.8 ETH</span>
        </div>
        <button class="px-5 py-2 rounded-xl bg-gradient-to-br from-blue-500 to-teal-600 dark:from-blue-400 dark:to-teal-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
          Place Bid
        </button>
      </div>
    </div>

    <!-- NFT Card 4 -->
    <div class="group relative rounded-2xl p-4 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-lg dark:hover:shadow-neu-dark-lg transition-all duration-300 flex flex-col">
      <div class="relative aspect-video rounded-xl overflow-hidden mb-4 shadow-neu-light-inner dark:shadow-neu-dark-inner">
        <img src="https://picsum.photos/id/1075/400/225" alt="NFT Image" class="w-full h-full object-cover rounded-xl group-hover:scale-105 transition-transform duration-300">
        <div class="absolute top-3 right-3 p-2 rounded-full bg-gray-50 dark:bg-gray-900 shadow-neu-light-md dark:shadow-neu-dark-md text-gray-700 dark:text-gray-300 text-xs font-semibold select-none">LIVE BID</div>
      </div>
      <h3 class="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-2 truncate">The Decentralized Soul</h3>
      <p class="text-sm text-gray-600 dark:text-gray-400 mb-4 line-clamp-2">An abstract representation of the blockchain's core essence.</p>
      <div class="flex items-center justify-between text-sm mb-4">
        <div class="flex items-center space-x-2">
          <img src="https://randomuser.me/api/portraits/women/66.jpg" alt="Creator Avatar" class="w-8 h-8 rounded-full shadow-neu-light-inner dark:shadow-neu-dark-inner">
          <span class="text-gray-700 dark:text-gray-300 font-medium">@Crypto_Canvas</span>
        </div>
        <div class="flex items-center space-x-1">
          <svg class="w-4 h-4 text-gray-600 dark:text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path></svg>
          <span class="text-gray-600 dark:text-gray-400">15 Likes</span>
        </div>
      </div>
      <div class="relative flex items-center justify-between mt-auto pt-4 border-t border-gray-300 dark:border-gray-700">
        <div class="flex flex-col">
          <span class="text-xs text-gray-500 dark:text-gray-400">Current Bid</span>
          <span class="text-lg font-bold text-teal-600 dark:text-teal-400">2.5 ETH</span>
        </div>
        <button class="px-5 py-2 rounded-xl bg-gradient-to-br from-blue-500 to-teal-600 dark:from-blue-400 dark:to-teal-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
          Place Bid
        </button>
      </div>
    </div>

    <!-- Placeholder Card for more items -->
    <div class="flex flex-col items-center justify-center rounded-2xl p-6 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md border-2 border-dashed border-gray-400 dark:border-gray-600 text-gray-500 dark:text-gray-400 text-center">
      <svg class="w-16 h-16 mb-4" 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 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
      <p class="text-lg font-semibold">Discover More NFTs</p>
      <p class="text-sm mb-4">More unique digital creations await.</p>
      <button class="px-6 py-3 rounded-xl bg-gradient-to-br from-teal-500 to-blue-600 dark:from-teal-400 dark:to-blue-500 text-white font-semibold shadow-neu-light-md dark:shadow-neu-dark-md active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
        Explore All
      </button>
    </div>

  </div>

  <!-- Bottom Navigation/Pagination (Skeuomorphic style) -->
  <div class="mt-12 flex justify-center">
    <nav class="inline-flex items-center space-x-2 rounded-2xl p-3 bg-gradient-to-br from-gray-100 to-gray-200 dark:from-gray-700 dark:to-gray-800 shadow-neu-light-md dark:shadow-neu-dark-md">
      <button class="p-3 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 shadow-neu-light-inner dark:shadow-neu-dark-inner hover:text-teal-600 dark:hover:text-teal-400 active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
      </button>
      <a href="#" class="px-4 py-2 rounded-xl bg-blue-500 dark:bg-blue-600 text-white font-bold shadow-neu-light-md dark:shadow-neu-dark-md shadow-neu-light-inner dark:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">1</a>
      <a href="#" class="px-4 py-2 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-inner dark:hover:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">2</a>
      <span class="px-4 py-2 text-gray-500 dark:text-gray-400">...</span>
      <a href="#" class="px-4 py-2 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-700 dark:text-gray-300 shadow-neu-light-md dark:shadow-neu-dark-md hover:shadow-neu-light-inner dark:hover:shadow-neu-dark-inner active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">10</a>
      <button class="p-3 rounded-xl bg-gray-200 dark:bg-gray-800 text-gray-600 dark:text-gray-400 shadow-neu-light-inner dark:shadow-neu-dark-inner hover:text-teal-600 dark:hover:text-teal-400 active:shadow-neu-light-pressed dark:active:shadow-neu-dark-pressed transition-all duration-200">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 111.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      </button>
    </nav>
  </div>

</div>

<!-- Custom Tailwind CSS (for skeuomorphism) -->
<style>
  /* Light Mode Shadows */
  .shadow-neu-light-md {
    box-shadow: 6px 6px 12px rgba(174, 174, 192, 0.4), -6px -6px 12px rgba(255, 255, 255, 0.9);
  }
  .shadow-neu-light-lg {
    box-shadow: 10px 10px 20px rgba(174, 174, 192, 0.5), -10px -10px 20px rgba(255, 255, 255, 1);
  }
  .shadow-neu-light-inner {
    box-shadow: inset 3px 3px 6px rgba(174, 174, 192, 0.3), inset -3px -3px 6px rgba(255, 255, 255, 0.8);
  }
  .shadow-neu-light-pressed {
    box-shadow: inset 6px 6px 12px rgba(174, 174, 192, 0.4), inset -6px -6px 12px rgba(255, 255, 255, 0.9);
  }

  /* Dark Mode Shadows */
  .dark .shadow-neu-dark-md {
    box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.6), -6px -6px 12px rgba(100, 100, 100, 0.2);
  }
  .dark .shadow-neu-dark-lg {
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.7), -10px -10px 20px rgba(100, 100, 100, 0.3);
  }
  .dark .shadow-neu-dark-inner {
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.5), inset -3px -3px 6px rgba(100, 100, 100, 0.15);
  }
  .dark .shadow-neu-dark-pressed {
    box-shadow: inset 6px 6px 12px rgba(0, 0, 0, 0.6), inset -6px -6px 12px rgba(100, 100, 100, 0.2);
  }
</style>

粘滞导航组件

一个拟物化的粘性导航组件，专为新闻/新闻网站设计，采用黑白配色方案，具有明亮的强调色、响应能力和深色模式支持。它模拟现实世界的按钮和嵌入式元素。

打开预览

                <header class="sticky top-0 z-50 py-4 shadow-skeuomorphic-light dark:shadow-skeuomorphic-dark bg-gray-100 dark:bg-gray-900 transition-colors duration-300">
  <nav class="container mx-auto flex flex-col md:flex-row items-center justify-between px-4 md:px-6 lg:px-8">
    <!-- Logo/Site Title -->
    <div class="flex items-center mb-4 md:mb-0">
      <a href="#" class="text-2xl lg:text-3xl font-extrabold text-gray-800 dark:text-gray-100 uppercase tracking-widest leading-none">
        <span class="text-red-600 dark:text-red-500">NEWS</span>CAST
      </a>
    </div>

    <!-- Navigation Links -->
    <div class="flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-4 lg:space-x-6 items-center flex-grow justify-center">
      <a href="#" class="nav-button">
        <span class="button-text">Latest</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Politics</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Business</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Tech</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Sports</span>
      </a>
      <a href="#" class="nav-button">
        <span class="button-text">Opinion</span>
      </a>
    </div>

    <!-- Search and Theme Toggle -->
    <div class="flex items-center space-x-4 mt-4 md:mt-0">
      <!-- Search Button -->
      <button class="nav-button group relative p-3 w-10 h-10 flex items-center justify-center">
        <svg class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200" 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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
        </svg>
        <span class="sr-only">Search</span>
      </button>

      <!-- Theme Toggle Button -->
      <button id="theme-toggle" class="nav-button group relative p-3 w-10 h-10 flex items-center justify-center">
        <!-- Moon icon for light mode (default) -->
        <svg id="theme-toggle-dark-icon" class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200 hidden dark:block" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
        </svg>
        <!-- Sun icon for dark mode -->
        <svg id="theme-toggle-light-icon" class="w-5 h-5 text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200 dark:hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.121-7.778l.707-.707a1 1 0 00-1.414-1.414l-.707.707a1 1 0 001.414 1.414zM4 10a1 1 0 01-1 1H2a1 1 0 110-2h1a1 1 0 011 1zm3.657 5.657l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM10 18a1 1 0 01-1 1v1a1 1 0 112 0v-1a1 1 0 01-1-1zm-4.95-2.121l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zm-2.121-7.778l-.707-.707a1 1 0 00-1.414 1.414l.707.707a1 1 0 001.414-1.414z"></path>
        </svg>
        <span class="sr-only">Toggle theme</span>
      </button>
    </div>
  </nav>
</header>

<!-- Placeholder Content to Demonstrate Stickiness and give page height for scrolling -->
<div class="h-[1200px] bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-200 p-8 flex items-center justify-center">
  <p class="text-4xl font-light opacity-30">Scroll down to see the sticky header in action.</p>
</div>

<style>
  /* Skeuomorphic styles using custom properties for easy theme switching */
  .shadow-skeuomorphic-light {
    box-shadow: 
      inset 2px 2px 5px rgba(255, 255, 255, 0.7),
      inset -3px -3px 8px rgba(0, 0, 0, 0.2),
      5px 5px 15px rgba(0, 0, 0, 0.1), 
      -5px -5px 15px rgba(255, 255, 255, 0.8);
  }

  .dark .shadow-skeuomorphic-light, html.dark .shadow-skeuomorphic-light {
     box-shadow: none; /* Remove light shadows in dark mode */
  }

  .shadow-skeuomorphic-dark {
    box-shadow: 
      inset 5px 5px 10px rgba(0, 0, 0, 0.4),
      inset -5px -5px 10px rgba(255, 255, 255, 0.05),
      5px 5px 15px rgba(0, 0, 0, 0.4),
      -5px -5px 15px rgba(255, 255, 255, 0.08);
  }

  .light .shadow-skeuomorphic-dark, html.light .shadow-skeuomorphic-dark {
    box-shadow: none; /* Remove dark shadows in light mode */
  }

  /* Nav Button Base */
  .nav-button {
    @apply relative flex items-center justify-center px-4 py-2 text-sm font-medium rounded-full shadow-skeuomorphic-button-light dark:shadow-skeuomorphic-button-dark transition-all duration-200;
    @apply bg-gradient-to-br from-gray-200 to-gray-50 dark:from-gray-800 dark:to-gray-950;
  }

  /* Nav Button Text */
  .nav-button .button-text {
    @apply text-gray-700 dark:text-gray-300 group-hover:text-red-600 dark:group-hover:text-red-500 transition-colors duration-200;
  }

  /* Nav Button Hover/Active State */
  .nav-button:hover {
    @apply text-red-600 dark:text-red-500;
    @apply shadow-skeuomorphic-button-inset-light dark:shadow-skeuomorphic-button-inset-dark;
    @apply bg-gradient-to-tr from-gray-100 to-gray-200 dark:from-gray-800 dark:to-gray-900;
  }

  .shadow-skeuomorphic-button-light {
    box-shadow: 
      3px 3px 6px rgba(0, 0, 0, 0.1),
      -3px -3px 6px rgba(255, 255, 255, 0.6);
  }

  .shadow-skeuomorphic-button-dark {
    box-shadow: 
      3px 3px 6px rgba(0, 0, 0, 0.6),
      -3px -3px 6px rgba(255, 255, 255, 0.08);
  }

  .shadow-skeuomorphic-button-inset-light {
    box-shadow:
      inset 2px 2px 5px rgba(0, 0, 0, 0.15),
      inset -2px -2px 5px rgba(255, 255, 255, 0.7);
  }

  .shadow-skeuomorphic-button-inset-dark {
    box-shadow:
      inset 3px 3px 7px rgba(0, 0, 0, 0.8),
      inset -3px -3px 7px rgba(255, 255, 255, 0.05);
  }

  /* Media queries for responsiveness of buttons within the grid */
  @media (min-width: 768px) {
    .md\:flex-row > .nav-button {
      padding-left: 1rem; /* px-4 */
      padding-right: 1rem; /* px-4 */
    }
  }
  @media (min-width: 1024px) {
    .lg\:space-x-6 > .nav-button {
      margin-left: 1.5rem; /* space-x-6 */
      margin-right: 0; /* Override default margin from flex-row */
    }
    .lg\:space-x-6 > .nav-button + .nav-button {
      margin-left: 1.5rem; /* Re-apply margin between siblings */
    }
  }

</style>

<script>
  // Simple JS for theme toggle (Tailwind doesn't handle this automatically)
  document.addEventListener('DOMContentLoaded', () => {
    const themeToggleBtn = document.getElementById('theme-toggle');
    const htmlElement = document.documentElement;

    // Function to set theme based on localStorage or system preference
    const setTheme = (theme) => {
      if (theme === 'dark' || (!theme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        htmlElement.classList.add('dark');
        localStorage.setItem('theme', 'dark');
      } else {
        htmlElement.classList.remove('dark');
        localStorage.setItem('theme', 'light');
      }
    };

    // Initial theme setting
    setTheme(localStorage.getItem('theme'));

    // Toggle theme on button click
    themeToggleBtn.addEventListener('click', () => {
      if (htmlElement.classList.contains('dark')) {
        setTheme('light');
      } else {
        setTheme('dark');
      }
    });
  });
</script>

装饰艺术报名表

响应式注册表单组件，具有装饰艺术风格的设计美感、高对比度配色方案和深色模式支持，适用于政府或公共服务网站。

打开预览

                <div class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-gray-900 dark:from-gray-950 dark:via-blue-900 dark:to-purple-950 flex items-center justify-center p-4 sm:p-6 lg:p-8 font-serif">
  <div class="w-full max-w-lg bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 shadow-2xl rounded-lg overflow-hidden border-4 border-yellow-600 dark:border-yellow-400 transform transition-all duration-300 ease-in-out hover:scale-[1.01]">
    <div class="p-6 sm:p-8 lg:p-10 bg-yellow-600 dark:bg-yellow-700 text-white text-center border-b-4 border-yellow-700 dark:border-yellow-800 relative select-none">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-wider uppercase drop-shadow-lg leading-tight">
        <span class="block">Public Service</span>
        <span class="block text-xl sm:text-2xl mt-1">Registration</span>
      </h2>
      <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
        <div class="absolute w-24 h-24 sm:w-32 sm:h-32 bg-white dark:bg-gray-900 opacity-10 rounded-full animate-pulse"></div>
        <div class="absolute w-16 h-16 sm:w-24 sm:h-24 bg-white dark:bg-gray-900 opacity-5 rounded-full animate-pulse animation-delay-200"></div>
      </div>
    </div>

    <form class="p-6 sm:p-8 lg:p-10 grid grid-cols-1 gap-y-6 sm:gap-y-8 select-none">
      <div class="relative group">
        <label for="full-name" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Full Name
        </label>
        <input type="text" id="full-name" name="full_name" placeholder="John Doe" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="relative group">
        <label for="email" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Email Address
        </label>
        <input type="email" id="email" name="email" placeholder="[email protected]" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="relative group">
        <label for="password" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Create Password
        </label>
        <input type="password" id="password" name="password" placeholder="********" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="relative group">
        <label for="confirm-password" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Confirm Password
        </label>
        <input type="password" id="confirm-password" name="confirm_password" placeholder="********" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="relative group">
        <label for="dob" class="absolute -top-3 left-3 px-1 text-xs text-indigo-700 dark:text-blue-400 bg-gray-200 dark:bg-gray-800 peer-placeholder-shown:text-base peer-placeholder-shown:text-gray-500 peer-placeholder-shown:top-2 transition-all group-focus-within:-top-3 group-focus-within:text-indigo-700 dark:group-focus-within:text-blue-400 group-focus-within:text-xs">
          Date of Birth
        </label>
        <input type="date" id="dob" name="dob" class="peer block w-full px-4 py-3 rounded-md border-2 border-indigo-400 dark:border-blue-700 bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 placeholder-transparent focus:outline-none focus:border-indigo-600 dark:focus:border-blue-500 transition-colors duration-200">
      </div>

      <div class="flex items-center space-x-3 mt-2">
        <input type="checkbox" id="terms" name="terms" class="h-5 w-5 text-yellow-600 dark:text-yellow-400 bg-gray-100 dark:bg-gray-800 border-gray-300 dark:border-gray-700 rounded focus:ring-yellow-500 dark:focus:ring-yellow-300">
        <label for="terms" class="text-sm text-gray-700 dark:text-gray-300">
          I agree to the <a href="#" class="text-indigo-600 dark:text-blue-400 hover:underline font-semibold">Terms of Service</a>
        </label>
      </div>

      <button type="submit" class="w-full px-6 py-3 mt-4 text-lg font-bold text-white bg-indigo-700 dark:bg-blue-600 rounded-md shadow-lg transform transition-all duration-300 ease-in-out hover:scale-105 hover:bg-indigo-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-indigo-300 dark:focus:ring-blue-800 active:scale-95 border-b-4 border-indigo-900 dark:border-blue-800">
        Register Account
      </button>
    </form>

    <div class="p-6 sm:p-8 lg:p-10 text-center text-sm bg-gray-100 dark:bg-gray-900 border-t-4 border-gray-300 dark:border-gray-700">
      <p class="text-gray-600 dark:text-gray-400">
        Already have an account? <a href="#" class="text-indigo-600 dark:text-blue-400 hover:underline font-semibold">Sign In Here</a>
      </p>
    </div>
  </div>
</div>

1 ... 30 31 32 33 34 ... 335