搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

粗野主义电子商务页脚导航

用于电子商务的简单粗野派页脚导航组件，具有柔和的颜色和深色模式支持。

                <footer class="bg-pink-100 text-purple-900 p-4 dark:bg-purple-900 dark:text-pink-100">
  <div class="container mx-auto flex flex-col md:flex-row justify-between items-center">
    <div class="mb-4 md:mb-0">
      <h2 class="text-2xl font-bold uppercase tracking-wider">ShopNow</h2>
    </div>
    <nav class="flex space-x-6">
      <a href="#" class="text-lg uppercase hover:underline">Products</a>
      <a href="#" class="text-lg uppercase hover:underline">About</a>
      <a href="#" class="text-lg uppercase hover:underline">Contact</a>
      <a href="#" class="text-lg uppercase hover:underline">Privacy</a>
    </nav>
  </div>
</footer>

Price Display 组件

用于电子商务的复古/复古主题价格显示组件，具有三重配色方案。它是一个复杂的响应式设计，支持深色主题，使用 Tailwind CSS 构建。

打开预览

                <div class="relative min-h-screen bg-gradient-to-br from-purple-100 via-pink-100 to-yellow-100 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 p-8 flex flex-col items-center justify-center font-mono">
  <!-- Vintage TV/Monitor Frame -->
  <div class="relative bg-gray-800 dark:bg-gray-200 rounded-xl shadow-2xl p-6 md:p-12 border-8 border-gray-900 dark:border-gray-100 transform -rotate-3 hover:rotate-0 transition-transform duration-500 ease-in-out">
    <div class="absolute inset-0 rounded-xl border-4 border-gray-700 dark:border-gray-300 pointer-events-none"></div>
    
    <!-- Screen/Display Area -->
    <div class="relative bg-gradient-to-br from-gray-700 to-gray-900 dark:from-gray-300 dark:to-gray-500 p-4 rounded-lg shadow-inner">
      <div class="absolute inset-0 bg-black opacity-25 rounded-lg pointer-events-none"></div>
      
      <!-- Scanlines/CRT Effect -->
      <div class="absolute inset-0 z-10 pointer-events-none overflow-hidden">
        <div class="h-full w-full bg-repeating-linear-gradient-[0deg,#00000022_0px,#00000022_1px,transparent_1px,transparent_2px] animate-scanlines"></div>
      </div>

      <div class="relative z-20 text-center">
        <h2 class="text-2xl md:text-4xl font-bold text-yellow-400 dark:text-purple-600 mb-2 drop-shadow-[0_0_5px_rgba(255,255,0,0.7)] dark:drop-shadow-[0_0_5px_rgba(128,0,128,0.7)] animate-pulseY">
          FLASH SALE!
        </h2>
        <p class="text-white text-lg md:text-2xl mb-4 font-semibold opacity-90">
          Limited Stock - Grab Yours Now!
        </p>

        <!-- Product Image & Price -->
        <div class="flex flex-col md:flex-row items-center justify-center space-y-4 md:space-y-0 md:space-x-8 mb-6">
          <div class="relative">
            <img src="https://picsum.photos/seed/retroproduct/300/300" alt="Retro Widget" class="w-48 h-48 md:w-64 md:h-64 object-cover rounded-lg shadow-lg border-4 border-purple-500 dark:border-yellow-400 transform hover:scale-105 transition-transform duration-300">
            <div class="absolute -top-2 -right-2 bg-red-600 text-white text-xs font-bold px-3 py-1 rounded-full rotate-12 shadow-md">NEW!</div>
          </div>
          
          <div class="flex flex-col items-center">
            <p class="text-xl md:text-3xl line-through text-gray-400 dark:text-gray-600 mb-1 animate-fadeIn">
              <span class="font-bold">$99.99</span>
            </p>
            <p class="text-4xl md:text-6xl font-extrabold text-green-400 dark:text-lime-400 mb-4 animate-bounceX drop-shadow-[0_0_8px_rgba(0,255,0,0.8)] dark:drop-shadow-[0_0_8px_rgba(128,255,0,0.8)]">
              $49.99
            </p>
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-300 uppercase tracking-wider border-2 border-blue-400 dark:border-blue-800 animate-wiggle">
              Buy Now!
            </button>
          </div>
        </div>

        <!-- Call to Action / Urgency Meter -->
        <div class="bg-gray-600 dark:bg-gray-400 rounded-full h-4 mb-2 overflow-hidden shadow-inner">
          <div class="bg-gradient-to-r from-red-500 to-yellow-500 h-full w-3/4 rounded-full animate-fillBar"></div>
        </div>
        <p class="text-sm text-white opacity-80 animate-pulseSlight">
          Only <span class="font-bold text-yellow-300 dark:text-red-300">25%</span> of stock remaining!
        </p>
      </div>
    </div>

    <!-- Retro Knobs/Buttons -->
    <div class="absolute -bottom-8 left-1/2 transform -translate-x-1/2 flex space-x-4">
      <div class="w-8 h-8 md:w-12 md:h-12 bg-gray-600 dark:bg-gray-400 rounded-full shadow-xl border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-500 transition-colors"></div>
      <div class="w-8 h-8 md:w-12 md:h-12 bg-gray-600 dark:bg-gray-400 rounded-full shadow-xl border-2 border-gray-700 dark:border-gray-300 cursor-pointer hover:bg-gray-700 dark:hover:bg-gray-500 transition-colors"></div>
    </div>

    <!-- Antenna -->
    <div class="absolute -top-12 right-1/4 w-1 h-12 bg-gray-700 dark:bg-gray-300 rounded-t-full transform rotate-6 animate-wobble"></div>
    <div class="absolute -top-12 left-1/4 w-1 h-12 bg-gray-700 dark:bg-gray-300 rounded-t-full transform -rotate-6 animate-wobble"></div>
  </div>

  <!-- Tailwind JIT compatibility for custom gradients and keyframes -->
  <style>
    @keyframes bounceX {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(5px); }
    }
    @keyframes pulseY {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }
    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    @keyframes fillBar {
      0% { width: 0%; }
      100% { width: 75%; /* Adjust based on stock */ }
    }
    @keyframes wiggle {
      0%, 100% { transform: rotate(-3deg); }
      50% { transform: rotate(3deg); }
    }
    @keyframes wobble {
      0%, 100% { transform: rotate(6deg); }
      50% { transform: rotate(-6deg); }
    }
    @keyframes scanlines {
      0% { background-position: 0% 0%; }
      100% { background-position: 0% 100%; }
    }
    @keyframes pulseSlight {
      0%, 100% { opacity: 0.8; }
      50% { opacity: 1; }
    }

    .animate-bounceX { animation: bounceX 3s infinite ease-in-out; }
    .animate-pulseY { animation: pulseY 2s infinite ease-in-out; }
    .animate-fadeIn { animation: fadeIn 1.5s forwards; }
    .animate-fillBar { animation: fillBar 2s forwards ease-out; }
    .animate-wiggle { animation: wiggle 2s infinite ease-in-out; }
    .animate-wobble { animation: wobble 4s infinite ease-in-out; }
    .animate-scanlines { animation: scanlines 10s linear infinite; }
    .animate-pulseSlight { animation: pulseSlight 3s infinite ease-in-out; }

    .bg-repeating-linear-gradient-\[0deg\,\#00000022_0px\,\#00000022_1px\,transparent_1px\,transparent_2px\] {
      background-image: repeating-linear-gradient(0deg, #00000022 0px, #00000022 1px, transparent 1px, transparent 2px);
    }
  </style>
</div>

社区论坛组件

一个简单的用于电子商务的 Neumorphic 社区论坛组件，使用三元配色方案，具有响应式设计和深色主题支持。

打开预览

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 flex items-center justify-center p-4">
  <div class="bg-gray-200 dark:bg-gray-800 p-8 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark max-w-md w-full">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-6 text-center">Community Forum</h2>
    
    <div class="mb-4 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <p class="font-medium text-gray-700 dark:text-gray-300">John Doe</p>
      </div>
      <p class="text-gray-600 dark:text-gray-400">"Looking for recommendations on the best ergonomic mouse for gaming!"</p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
        <span>2 hours ago</span>
        <button class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">Reply</button>
      </div>
    </div>

    <div class="mb-4 bg-gray-100 dark:bg-gray-700 p-3 rounded-lg shadow-neumorphic-inset-light dark:shadow-neumorphic-inset-dark">
      <div class="flex items-center mb-2">
        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="w-8 h-8 rounded-full mr-3 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <p class="font-medium text-gray-700 dark:text-gray-300">Jane Smith</p>
      </div>
      <p class="text-gray-600 dark:text-gray-400">"Just received my order, the quality is amazing! Highly recommend this store."</p>
      <div class="flex justify-between items-center text-sm text-gray-500 dark:text-gray-400 mt-3">
        <span>1 day ago</span>
        <button class="text-blue-500 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300">Reply</button>
      </div>
    </div>

    <div class="mt-6">
      <button class="w-full bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-500 text-white py-2 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark transition duration-300">
        View More Posts
      </button>
    </div>
  </div>
</div>

<style>
  /* Neumorphism shadows - light mode */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #b0b0b0, -6px -6px 12px #ffffff;
  }
  .shadow-neumorphic-inset-light {
    box-shadow: inset 5px 5px 10px #b0b0b0, inset -5px -5px 10px #ffffff;
  }

  /* Neumorphism shadows - dark mode */
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #333333, -6px -6px 12px #555555;
  }
  .dark .shadow-neumorphic-inset-dark {
    box-shadow: inset 5px 5px 10px #333333, inset -5px -5px 10px #555555;
  }

  /* Triadic color scheme roughly used with blue for accent */
  /* Main background/base: gray (adjusting with neumorphism) */
  /* Accent 1: blue (for buttons/links) */
  /* Accent 2 & 3 would naturally emerge from interactions/hover states or subtle text colors */
</style>

Feedback Components 组件

一个简单的野兽派反馈组件，具有灰度颜色、深色模式支持和响应式设计。

打开预览

                <div class="max-w-md mx-auto my-8 bg-white dark:bg-gray-900 shadow-lg border-2 border-black dark:border-gray-700 p-6">
  <h2 class="text-2xl font-bold text-black dark:text-white mb-4 border-b-2 border-black dark:border-gray-700 pb-2">Feedback</h2>
  <div class="mb-4">
    <div class="flex items-center mb-2">
      <img src="https://www.randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-gray-700 mr-4">
      <p class="font-bold text-black dark:text-white">John Doe</p>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-gray-700 p-4">
      <p class="text-black dark:text-gray-300">"This article was incredibly insightful and well-written. I appreciate the clear explanations."</p>
    </div>
  </div>
  <div class="mb-4">
    <div class="flex items-center mb-2">
      <img src="https://www.randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full border-2 border-black dark:border-gray-700 mr-4">
      <p class="font-bold text-black dark:text-white">Jane Smith</p>
    </div>
    <div class="bg-gray-100 dark:bg-gray-800 border-2 border-black dark:border-gray-700 p-4">
      <p class="text-black dark:text-gray-300">"I found a minor typo on page 3, but overall, a fantastic read!"</p>
    </div>
  </div>
  <div class="text-right">
    <button class="bg-black dark:bg-gray-700 text-white dark:text-gray-300 px-6 py-2 border-2 border-black dark:border-gray-700 font-bold hover:bg-gray-800 dark:hover:bg-gray-600">
      Give Feedback
    </button>
  </div>
</div>

SkipToContentLink

跳至具有深色模式 UI、三色配色方案和电子商务的简单复杂性的内容链接组件。

打开预览

                <template>
  <a href="#main-content" class="sr-only focus:not-sr-only focus:absolute focus:top-0 focus:left-0 focus:z-50 focus:bg-purple-900 focus:text-lime-300 focus:p-3 focus:border-b-4 focus:border-cyan-400 dark:focus:bg-purple-900 dark:focus:text-lime-300 dark:focus:border-cyan-400">Skip to main content</a>
</template>

会话超时警报

一个受 3D 启发的会话超时警报组件，其中

打开预览

目录组件

响应式 Table of Contents 组件，具有拟物化设计、三元配色方案和深色主题支持，适用于社交媒体界面。没有 JavaScript，只有 HTML 和 Tailwind CSS。

打开预览

                
<div class="p-8 bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-950 min-h-screen font-sans">

  <!-- Skeuomorphic Container for Table of Contents -->
  <div class="max-w-3xl mx-auto bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-700 dark:to-gray-900 rounded-3xl shadow-[inset_0_4px_8px_rgba(0,0,0,0.1),inset_0_-4px_8px_rgba(255,255,255,0.7),0_10px_20px_rgba(0,0,0,0.2)] dark:shadow-[inset_0_4px_8px_rgba(255,255,255,0.1),inset_0_-4px_8px_rgba(0,0,0,0.5),0_10px_20px_rgba(0,0,0,0.4)] p-8 md:p-12 border-t border-l border-gray-400 dark:border-gray-600">

    <h1 class="text-4xl md:text-5xl font-extrabold text-gray-800 dark:text-gray-100 mb-8 text-center drop-shadow-md">
      <span class="bg-clip-text text-transparent bg-gradient-to-r from-red-600 via-blue-600 to-green-600 dark:from-red-400 dark:via-blue-400 dark:to-green-400">Table of Contents</span>
    </h1>

    <!-- Search Bar with Skeuomorphic Input -->
    <div class="mb-8 relative">
      <input type="text" placeholder="Search topics..." class="w-full py-3 pl-12 pr-6 rounded-full bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-gray-200 text-lg shadow-[inset_0_2px_4px_rgba(0,0,0,0.1),0_1px_0_rgba(255,255,255,0.8)] dark:shadow-[inset_0_2px_4px_rgba(255,255,255,0.1),0_1px_0_rgba(0,0,0,0.5)] focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-red-600 transition duration-300">
      <svg class="absolute left-4 top-1/2 -translate-y-1/2 text-gray-400 dark:text-gray-500 w-6 h-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="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
    </div>

    <!-- Table of Contents List -->
    <ul class="space-y-4 md:space-y-6">

      <!-- Section 1 -->
      <li class="relative group">
        <a href="#section1" class="block w-full py-4 px-6 rounded-2xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 text-xl font-semibold shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_-2px_4px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),inset_0_-3px_6px_rgba(0,0,0,0.15)] dark:hover:shadow-[0_6px_12px_rgba(0,0,0,0.4),inset_0_-3px_6px_rgba(255,255,255,0.15)] transition-all duration-300 transform hover:-translate-y-1 border-t border-l border-gray-100 dark:border-gray-700
        flex items-center justify-between">
          <span>1. Introduction to Social Media</span>
          <svg class="w-6 h-6 text-red-500 dark:text-red-400 transform group-hover:rotate-90 transition-transform duration-300" 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>
        </a>
        <!-- Nested Sub-sections -->
        <ul class="ml-8 mt-3 space-y-2 border-l-4 border-red-500 dark:border-red-600 pl-4 py-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-screen transition-all duration-500 ease-in-out overflow-hidden">
          <li><a href="#section1.1" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-red-500 dark:before:text-red-400">1.1 What is Social Media?</a></li>
          <li><a href="#section1.2" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-blue-500 dark:before:text-blue-400">1.2 History and Evolution</a></li>
        </ul>
      </li>

      <!-- Section 2 -->
      <li class="relative group">
        <a href="#section2" class="block w-full py-4 px-6 rounded-2xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 text-xl font-semibold shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_-2px_4px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),inset_0_-3px_6px_rgba(0,0,0,0.15)] dark:hover:shadow-[0_6px_12px_rgba(0,0,0,0.4),inset_0_-3px_6px_rgba(255,255,255,0.15)] transition-all duration-300 transform hover:-translate-y-1 border-t border-l border-gray-100 dark:border-gray-700
        flex items-center justify-between">
          <span>2. Key Social Media Platforms</span>
          <svg class="w-6 h-6 text-blue-500 dark:text-blue-400 transform group-hover:rotate-90 transition-transform duration-300" 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>
        </a>
        <!-- Nested Sub-sections -->
        <ul class="ml-8 mt-3 space-y-2 border-l-4 border-blue-500 dark:border-blue-600 pl-4 py-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-screen transition-all duration-500 ease-in-out overflow-hidden">
          <li><a href="#section2.1" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-red-500 dark:before:text-red-400">2.1 Facebook & Instagram</a></li>
          <li><a href="#section2.2" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-blue-500 dark:before:text-blue-400">2.2 Twitter & LinkedIn</a></li>
          <li><a href="#section2.3" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-green-500 dark:before:text-green-400">2.3 TikTok & Snapchat</a></li>
        </ul>
      </li>

      <!-- Section 3 -->
      <li class="relative group">
        <a href="#section3" class="block w-full py-4 px-6 rounded-2xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 text-xl font-semibold shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_-2px_4px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),inset_0_-3px_6px_rgba(0,0,0,0.15)] dark:hover:shadow-[0_6px_12px_rgba(0,0,0,0.4),inset_0_-3px_6px_rgba(255,255,255,0.15)] transition-all duration-300 transform hover:-translate-y-1 border-t border-l border-gray-100 dark:border-gray-700
        flex items-center justify-between">
          <span>3. Social Media Strategy</span>
          <svg class="w-6 h-6 text-green-500 dark:text-green-400 transform group-hover:rotate-90 transition-transform duration-300" 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>
        </a>
        <!-- Nested Sub-sections -->
        <ul class="ml-8 mt-3 space-y-2 border-l-4 border-green-500 dark:border-green-600 pl-4 py-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-screen transition-all duration-500 ease-in-out overflow-hidden">
          <li><a href="#section3.1" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-red-500 dark:before:text-red-400">3.1 Content Creation</a></li>
          <li><a href="#section3.2" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-blue-500 dark:before:text-blue-400">3.2 Audience Engagement</a></li>
          <li><a href="#section3.3" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-green-500 dark:hover:text-green-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-green-500 dark:before:text-green-400">3.3 Analytics & KPIs</a></li>
        </ul>
      </li>

      <!-- Section 4 -->
      <li class="relative group">
        <a href="#section4" class="block w-full py-4 px-6 rounded-2xl bg-gradient-to-br from-gray-200 to-gray-300 dark:from-gray-800 dark:to-gray-900 text-gray-800 dark:text-gray-200 text-xl font-semibold shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_-2px_4px_rgba(0,0,0,0.1)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:shadow-[0_6px_12px_rgba(0,0,0,0.2),inset_0_-3px_6px_rgba(0,0,0,0.15)] dark:hover:shadow-[0_6px_12px_rgba(0,0,0,0.4),inset_0_-3px_6px_rgba(255,255,255,0.15)] transition-all duration-300 transform hover:-translate-y-1 border-t border-l border-gray-100 dark:border-gray-700
        flex items-center justify-between">
          <span>4. Future of Social Media</span>
          <svg class="w-6 h-6 text-red-500 dark:text-red-400 transform group-hover:rotate-90 transition-transform duration-300" 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>
        </a>
        <!-- Nested Sub-sections -->
        <ul class="ml-8 mt-3 space-y-2 border-l-4 border-red-500 dark:border-red-600 pl-4 py-2 opacity-0 max-h-0 group-hover:opacity-100 group-hover:max-h-screen transition-all duration-500 ease-in-out overflow-hidden">
          <li><a href="#section4.1" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-red-500 dark:before:text-red-400">4.1 Emerging Trends</a></li>
          <li><a href="#section4.2" class="block py-2 text-gray-700 dark:text-gray-300 hover:text-blue-500 dark:hover:text-blue-400 transition-colors duration-200 text-lg relative before:content-['-'] before:absolute before:-left-4 before:text-blue-500 dark:before:text-blue-400">4.2 Metaverse & Web3</a></li>
        </ul>
      </li>

    </ul>

    <!-- Decorative elements mimicking physical buttons -->
    <div class="mt-12 flex justify-center space-x-6">
      <button class="py-3 px-8 rounded-full bg-gradient-to-br from-red-500 to-red-700 dark:from-red-700 dark:to-red-900 text-white font-bold text-lg shadow-[0_4px_8px_rgba(0,0,0,0.2),inset_0_-2px_4px_rgba(0,0,0,0.2)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.4),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:to-red-800 dark:hover:to-red-950 transition-all duration-300 transform hover:scale-105 active:scale-95 border-t border-l border-red-400 dark:border-red-600">
        <span class="drop-shadow-md">Previous Chapter</span>
      </button>
      <button class="py-3 px-8 rounded-full bg-gradient-to-br from-green-500 to-green-700 dark:from-green-700 dark:to-green-900 text-white font-bold text-lg shadow-[0_4px_8px_rgba(0,0,0,0.2),inset_0_-2px_4px_rgba(0,0,0,0.2)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.4),inset_0_-2px_4px_rgba(255,255,255,0.1)] hover:to-green-800 dark:hover:to-green-950 transition-all duration-300 transform hover:scale-105 active:scale-95 border-t border-l border-green-400 dark:border-green-600">
        <span class="drop-shadow-md">Next Chapter</span>
      </button>
    </div>

    <!-- Social Share Buttons mimicking embossed elements -->
    <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700 text-center">
      <p class="text-gray-700 dark:text-gray-300 text-lg mb-4">Share this Table of Contents:</p>
      <div class="flex justify-center space-x-4">
        <button class="w-14 h-14 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-900 shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_2px_4px_rgba(255,255,255,0.7),inset_0_-2px_4px_rgba(0,0,0,0.15)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_2px_4px_rgba(0,0,0,0.5),inset_0_-2px_4px_rgba(255,255,255,0.1)] flex items-center justify-center text-blue-600 dark:text-blue-400 hover:scale-110 active:scale-90 transition-transform duration-200">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M14 12c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-10C8.48 2 4 6.48 4 12s4.48 10 10 10 10-4.48 10-10S19.52 2 14 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
        </button>
        <button class="w-14 h-14 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-900 shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_2px_4px_rgba(255,255,255,0.7),inset_0_-2px_4px_rgba(0,0,0,0.15)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_2px_4px_rgba(0,0,0,0.5),inset_0_-2px_4px_rgba(255,255,255,0.1)] flex items-center justify-center text-red-600 dark:text-red-400 hover:scale-110 active:scale-90 transition-transform duration-200">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 6c-2.76 1.18-5.74 2-9 2-3.26 0-6.24-.82-9-2L2 8c2.76 1.18 5.74 2 9 2s6.24-.82 9-2zm0 4c-2.76 1.18-5.74 2-9 2-3.26 0-6.24-.82-9-2L2 12c2.76 1.18 5.74 2 9 2s6.24-.82 9-2zm0 4c-2.76 1.18-5.74 2-9 2-3.26 0-6.24-.82-9-2L2 16c2.76 1.18 5.74 2 9 2s6.24-.82 9-2z"/></svg>
        </button>
        <button class="w-14 h-14 rounded-full bg-gradient-to-br from-gray-200 to-gray-400 dark:from-gray-800 dark:to-gray-900 shadow-[0_4px_8px_rgba(0,0,0,0.1),inset_0_2px_4px_rgba(255,255,255,0.7),inset_0_-2px_4px_rgba(0,0,0,0.15)] dark:shadow-[0_4px_8px_rgba(0,0,0,0.3),inset_0_2px_4px_rgba(0,0,0,0.5),inset_0_-2px_4px_rgba(255,255,255,0.1)] flex items-center justify-center text-green-600 dark:text-green-400 hover:scale-110 active:scale-90 transition-transform duration-200">
          <svg class="w-8 h-8" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15.5l-4-4 1.41-1.41L11 14.67l6.59-6.59L19 9.5l-8 8z"/></svg>
        </button>
      </div>
    </div>

  </div>

</div>

购物车组件

具有 3D 设计、大地色调和复杂交互元素的购物车组件。它是为博客/内容网站设计的，具有响应式设计和深色主题支持，使用 Tailwind CSS。

打开预览

                <div class="container mx-auto p-4 font-sans antialiased text-gray-800 dark:text-gray-200">
    <div class="relative min-h-screen bg-gradient-to-br from-indigo-100 to-purple-200 dark:from-gray-900 dark:to-gray-800 rounded-3xl shadow-2xl p-6 lg:p-10 transform skew-y-1 scale-95 origin-top-left">
        <div class="absolute inset-0 bg-white dark:bg-gray-700 opacity-60 rounded-3xl transform -skew-y-1 scale-95 origin-bottom-right shadow-xl"></div>
        <div class="absolute inset-0 bg-yellow-100 dark:bg-yellow-900 rounded-3xl transform skew-y-1 scale-95 origin-top-left shadow-xl"></div>
        <div class="relative z-10 p-4 lg:p-8 bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 animate-fade-in-down">

            <!-- Header -->
            <div class="mb-8 border-b border-gray-200 dark:border-gray-700 pb-4">
                <h1 class="text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-2 transform perspective-1000 rotateY-5 scale-105">
                    <span class="bg-clip-text text-transparent bg-gradient-to-r from-green-600 to-indigo-600 dark:from-green-400 dark:to-indigo-400">Your Shopping Cart</span>
                </h1>
                <p class="text-lg lg:text-xl text-gray-600 dark:text-gray-400 italic">Review your selections</p>
            </div>

            <!-- Cart Items Grid -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 animate-fade-in-up">

                <!-- Cart Item 1 -->
                <div class="bg-white dark:bg-gray-700 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-200 dark:border-gray-600 relative perspective-800">
                    <div class="absolute inset-0 bg-gradient-to-br from-orange-200 to-yellow-200 dark:from-orange-800 dark:to-yellow-800 opacity-20 transform skew-y-2 origin-top-right"></div>
                    <div class="p-6 relative z-10">
                        <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md border border-gray-300 dark:border-gray-600 transform translateZ-20 bg-gray-200 dark:bg-gray-600" src="https://picsum.photos/seed/item1/400/250" alt="Product Image">
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Adventure Backpack</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Durable and spacious, perfect for hiking.</p>
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-xl lg:text-2xl font-bold text-green-700 dark:text-green-400 shadow-text-sm">$79.99</span>
                            <div class="flex items-center">
                                <button class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition transform scale-105 active:scale-95 shadow-md mr-2">-</button>
                                <span class="text-lg font-medium text-gray-800 dark:text-gray-200">1</span>
                                <button class="bg-green-500 dark:bg-green-700 text-white p-2 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition transform scale-105 active:scale-95 shadow-md ml-2">+</button>
                            </div>
                        </div>
                        <button class="w-full bg-red-600 dark:bg-red-800 text-white py-2 px-4 rounded-lg hover:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative perspective-600 z-20">
                            <span class="relative z-10">Remove</span>
                            <div class="absolute inset-0 bg-red-500 dark:bg-red-700 opacity-30 blur-sm"></div>
                        </button>
                    </div>
                </div>

                <!-- Cart Item 2 -->
                <div class="bg-white dark:bg-gray-700 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-200 dark:border-gray-600 relative perspective-800">
                    <div class="absolute inset-0 bg-gradient-to-br from-cyan-200 to-blue-200 dark:from-cyan-800 dark:to-blue-800 opacity-20 transform skew-y-2 origin-top-right"></div>
                    <div class="p-6 relative z-10">
                        <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md border border-gray-300 dark:border-gray-600 transform translateZ-20 bg-gray-200 dark:bg-gray-600" src="https://picsum.photos/seed/item2/400/250" alt="Product Image">
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Wireless Noise-Cancelling Headphones</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Immersive sound experience with comfort.</p>
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-xl lg:text-2xl font-bold text-green-700 dark:text-green-400 shadow-text-sm">$129.99</span>
                            <div class="flex items-center">
                                <button class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition transform scale-105 active:scale-95 shadow-md mr-2">-</button>
                                <span class="text-lg font-medium text-gray-800 dark:text-gray-200">1</span>
                                <button class="bg-green-500 dark:bg-green-700 text-white p-2 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition transform scale-105 active:scale-95 shadow-md ml-2">+</button>
                            </div>
                        </div>
                        <button class="w-full bg-red-600 dark:bg-red-800 text-white py-2 px-4 rounded-lg hover:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative perspective-600 z-20">
                            <span class="relative z-10">Remove</span>
                            <div class="absolute inset-0 bg-red-500 dark:bg-red-700 opacity-30 blur-sm"></div>
                        </button>
                    </div>
                </div>

                <!-- Cart Item 3 -->
                <div class="bg-white dark:bg-gray-700 shadow-lg rounded-xl overflow-hidden transform transition-all duration-300 hover:scale-102 hover:shadow-2xl border border-gray-200 dark:border-gray-600 relative perspective-800">
                    <div class="absolute inset-0 bg-gradient-to-br from-pink-200 to-red-200 dark:from-pink-800 dark:to-red-800 opacity-20 transform skew-y-2 origin-top-right"></div>
                    <div class="p-6 relative z-10">
                        <img class="w-full h-40 object-cover rounded-md mb-4 shadow-md border border-gray-300 dark:border-gray-600 transform translateZ-20 bg-gray-200 dark:bg-gray-600" src="https://picsum.photos/seed/item3/400/250" alt="Product Image">
                        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Vintage Leather Journal</h3>
                        <p class="text-gray-600 dark:text-gray-400 text-sm mb-3">Handcrafted for timeless writing.</p>
                        <div class="flex items-center justify-between mb-4">
                            <span class="text-xl lg:text-2xl font-bold text-green-700 dark:text-green-400 shadow-text-sm">$24.99</span>
                            <div class="flex items-center">
                                <button class="bg-red-500 dark:bg-red-700 text-white p-2 rounded-full hover:bg-red-600 dark:hover:bg-red-800 transition transform scale-105 active:scale-95 shadow-md mr-2">-</button>
                                <span class="text-lg font-medium text-gray-800 dark:text-gray-200">2</span>
                                <button class="bg-green-500 dark:bg-green-700 text-white p-2 rounded-full hover:bg-green-600 dark:hover:bg-green-800 transition transform scale-105 active:scale-95 shadow-md ml-2">+</button>
                            </div>
                        </div>
                        <button class="w-full bg-red-600 dark:bg-red-800 text-white py-2 px-4 rounded-lg hover:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-lg relative perspective-600 z-20">
                            <span class="relative z-10">Remove</span>
                            <div class="absolute inset-0 bg-red-500 dark:bg-red-700 opacity-30 blur-sm"></div>
                        </button>
                    </div>
                </div>
            </div>

            <!-- Cart Summary -->
            <div class="mt-8 border-t border-gray-200 dark:border-gray-700 pt-6 animate-fade-in-up">
                <div class="flex flex-col md:flex-row justify-between items-center mb-6">
                    <div class="text-2xl font-semibold text-gray-900 dark:text-white mb-4 md:mb-0 transform perspective-1000 rotateY-5 scale-105">
                        Total: <span class="text-green-700 dark:text-green-400">$259.97</span>
                    </div>
                    <button class="bg-green-600 dark:bg-green-800 text-white py-3 px-8 rounded-full text-lg font-bold hover:bg-green-700 dark:hover:bg-green-900 transition duration-300 ease-in-out transform hover:scale-105 active:scale-95 shadow-xl relative perspective-600 z-20">
                        <span class="relative z-10">Proceed to Checkout</span>
                        <div class="absolute inset-0 bg-green-500 dark:bg-green-700 opacity-30 blur-sm"></div>
                    </button>
                </div>

                <!-- Shipping and Payment Info Placeholder -->
                <div class="bg-gray-100 dark:bg-gray-700 p-6 rounded-lg shadow-inner border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300 italic text-center transform translateZ-10 relative perspective-500">
                    <p class="mb-2">Shipping options and payment methods will appear here.</p>
                    <p>Continue shopping or apply discount codes.</p>
                    <div class="absolute inset-0 transform -skew-y-3 skew-x-3 bg-gradient-to-tr from-gray-300 to-gray-400 dark:from-gray-600 dark:to-gray-500 opacity-20 blur-sm"></div>
                    <div class="absolute inset-0 transform skew-y-2 skew-x-2 bg-gradient-to-bl from-gray-200 to-gray-300 dark:from-gray-700 dark:to-gray-600 opacity-10"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    /* Basic 3D transform utilities */
    .perspective-1000 {
        perspective: 1000px;
    }
    .rotateY-5 {
        transform: rotateY(5deg);
    }
    .translateZ-20 {
        transform: translateZ(20px);
    }
    .shadow-text-sm {
        text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    }

    /* Keyframe Animations */
    @keyframes fade-in-down {
        from {
            opacity: 0;
            transform: translateY(-20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fade-in-up {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .animate-fade-in-down {
        animation: fade-in-down 0.6s ease-out forwards;
    }

    .animate-fade-in-up {
        animation: fade-in-up 0.6s ease-out forwards;
    }

    /* Custom shadow for 3D effect on buttons */
    .shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05),
                    0 2px 4px -1px rgba(0, 0, 0, 0.03)
                    /* inset 0 0 0 1px rgba(255, 255, 255, 0.1) for subtle inner highlight */;
    }
    .dark .shadow-lg {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.15),
                    0 2px 4px -1px rgba(0, 0, 0, 0.1);
    }

    .perspective-800 {
        perspective: 800px;
    }

    .transform-style-preserve-3d {
        transform-style: preserve-3d;
    }

    /* This is a common way to emulate 3d effects by creating a subtle layer behind */
    .relative .absolute {
        backface-visibility: hidden;
    }

     /* Additional subtle 3D effects for inner elements */
    .inner-element-3d {
        transform: translateZ(10px) rotateX(2deg);
        transition: transform 0.3s ease-out;
    }
    .hover\:inner-element-3d\:hover:translateZ-15 {
        transform: translateZ(15px) rotateX(0deg);
    }
</style>

Neumorphism Buttons 组件

一个复杂的 Neumorphism 风格的按钮组件，具有鲜艳的色彩、响应式设计和深色模式支持，适用于商业/公司网站。

打开预览

                <div class="flex flex-wrap items-center justify-center min-h-screen p-10 bg-gray-200 dark:bg-gray-800">
  <!-- Primary Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-purple-700 dark:text-purple-300 bg-gradient-to-br from-purple-300 to-purple-500 dark:from-purple-800 dark:to-purple-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Primary Action
  </button>

  <!-- Secondary Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-pink-700 dark:text-pink-300 bg-gradient-to-br from-pink-300 to-pink-500 dark:from-pink-800 dark:to-pink-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Secondary Action
  </button>

  <!-- Success Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-green-700 dark:text-green-300 bg-gradient-to-br from-green-300 to-green-500 dark:from-green-800 dark:to-green-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Action Success
  </button>

  <!-- Warning Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-yellow-700 dark:text-yellow-300 bg-gradient-to-br from-yellow-300 to-yellow-500 dark:from-yellow-800 dark:to-yellow-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Action Warning
  </button>

  <!-- Danger Button -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-red-700 dark:text-red-300 bg-gradient-to-br from-red-300 to-red-500 dark:from-red-800 dark:to-red-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    Action Danger
  </button>

  <!-- Icon Button -->
  <button class="m-4 p-5 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-2xl text-blue-700 dark:text-blue-300 bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-800 dark:to-blue-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
  </button>

  <!-- Disabled Button Example (add `pointer-events-none opacity-50` for real disabling) -->
  <button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-gray-500 dark:text-gray-400 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 cursor-not-allowed">
    Disabled
  </button>

</div>

<style>
  .shadow-neumorphic-light {
    box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
  }

  .dark .shadow-neumorphic-dark {
    box-shadow: 8px 8px 16px #4d4d4d, -8px -8px 16px #333333;
  }

  .shadow-neumorphic-pressed-light {
    box-shadow: inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff;
  }

  .dark .shadow-neumorphic-pressed-dark {
    box-shadow: inset 6px 6px 12px #4d4d4d, inset -6px -6px 12px #333333;
  }
</style>

功能组件

一张简单、响应式 3D 风格的电子商务产品卡，具有相似的配色方案，支持深色模式。

打开预览

                <div class="relative flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-900">
  <div class="relative h-96 w-72 transform rounded-lg bg-gradient-to-br from-purple-400 to-indigo-500 p-6 shadow-2xl transition-all duration-300 hover:scale-105 dark:from-purple-700 dark:to-indigo-800">
    <div class="absolute inset-0 -z-10 transform rounded-lg bg-gradient-to-br from-purple-300 to-indigo-400 opacity-50 blur-xl dark:from-purple-600 dark:to-indigo-700"></div>
    <div class="flex flex-col items-center justify-between h-full">
      <h2 class="mb-2 text-center text-2xl font-bold text-white">3D Product</h2>
      <div class="relative mb-4 h-32 w-32">
        <img src="https://picsum.photos/id/176/200/200" alt="Product Image" class="h-full w-full rounded-full object-cover shadow-lg transform transition-transform duration-300 hover:scale-110">
        <div class="absolute inset-0 rounded-full ring-4 ring-white ring-opacity-50 dark:ring-gray-800"></div>
      </div>
      <p class="mb-4 text-center text-sm text-white text-opacity-80">A high-quality product with a unique 3D design for an immersive experience.</p>
      <div class="flex items-center justify-between w-full">
        <span class="text-xl font-bold text-white">$99.99</span>
        <button class="rounded-full bg-white px-4 py-2 text-purple-600 shadow-md transition-all duration-300 hover:bg-purple-100 hover:text-purple-700 dark:bg-gray-800 dark:text-white dark:hover:bg-gray-700">
          Add to Cart
        </button>
      </div>
    </div>
  </div>
</div>

1 ... 132 133 134 135 136 ... 335