搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

Neumorphic 成功消息组件

一个简单的 Neumorphic Success Message 组件，具有仪表板的互补配色方案，具有响应式设计和深色模式支持。

                <div class="flex items-center justify-center min-h-screen bg-gray-200 dark:bg-gray-900">
  <div class="neumorphic-card bg-white dark:bg-gray-800 p-6 rounded-xl shadow-lg dark:shadow-none">
    <div class="flex items-center space-x-4">
      <div class="flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-green-500 text-white dark:bg-green-600">
        <svg class="h-6 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="M5 13l4 4L19 7"></path></svg>
      </div>
      <div class="flex-1">
        <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-white">Success!</h3>
        <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Your operation was completed successfully.</p>
      </div>
    </div>
  </div>
</div>

<style>
  .neumorphic-card {
    border-radius: 1rem;
    background: #e0e0e0;
    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
    transition: all 0.3s ease;
  }

  .dark .neumorphic-card {
    background: #2d3748; /* dark gray */
    box-shadow: 8px 8px 16px #1a202c, -8px -8px 16px #4a5568;
  }

  .neumorphic-card:hover {
    box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff;
  }
  
  .dark .neumorphic-card:hover {
    box-shadow: 4px 4px 8px #1a202c, -4px -4px 8px #4a5568;
  }
</style>

RetroCarouselSlider

一个简单、响应迅速且以复古为主题的轮播滑块组件，适用于商业网站，支持深色模式且无 JavaScript。

打开预览

                <div class="relative w-full max-w-4xl mx-auto overflow-hidden rounded-lg shadow-lg">
  <!-- Carousel Wrapper -->
  <div class="relative h-96">
    <!-- Slide 1 -->
    <div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-100" data-carousel-item>
      <img src="https://picsum.photos/seed/retro1/1200/400" alt="Slide 1" class="object-cover w-full h-full">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
        <h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Innovation That Endures</h2>
      </div>
    </div>

    <!-- Slide 2 -->
    <div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0" data-carousel-item>
      <img src="https://picsum.photos/seed/retro2/1200/400" alt="Slide 2" class="object-cover w-full h-full">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
        <h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Timeless Solutions for Tomorrow</h2>
      </div>
    </div>

    <!-- Slide 3 -->
    <div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0" data-carousel-item>
      <img src="https://picsum.photos/seed/retro3/1200/400" alt="Slide 3" class="object-cover w-full h-full">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
        <h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Building on a Legacy of Quality</h2>
      </div>
    </div>
  </div>

  <!-- Carousel Navigation (Optional - for visual representation, actual prev/next usually needs JS) -->
  <div class="absolute bottom-0 left-0 right-0 p-4 flex justify-center space-x-2">
    <button class="w-3 h-3 bg-gray-300 rounded-full dark:bg-gray-700"></button>
    <button class="w-3 h-3 bg-gray-500 rounded-full dark:bg-gray-400"></button>
    <button class="w-3 h-3 bg-gray-300 rounded-full dark:bg-gray-700"></button>
  </div>
</div>

<style>
  /* A very basic animation for demonstration, typically this would be handled by JS for a real carousel */
  /* This CSS just cycles opacity for

复古电商导航

响应式导航组件，具有复古/复古设计、大地色调和深色模式支持电子商务。

打开预览

                <nav class="bg-amber-100 dark:bg-amber-950 p-4 font-serif">
  <div class="container mx-auto flex justify-between items-center">
    <a href="#" class="text-amber-800 dark:text-amber-200 text-2xl font-bold">RetroStore</a>
    <div class="hidden md:flex space-x-6">
      <a href="#" class="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300">Shop</a>
      <a href="#" class="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300">Categories</a>
      <a href="#" class="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300">Contact</a>
      <a href="#" class="text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 transition duration-300">Cart</a>
    </div>
    <div class="md:hidden flex items-center">
      <button class="text-amber-700 dark:text-amber-300 focus:outline-none">
        <svg class="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="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>
    </div>
  </div>
</nav>

RetroRegistrationForm 注册表

复古/复古注册表单组件，具有大地色调、响应式设计和深色主题支持，适用于博客或内容网站。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-stone-100 dark:bg-stone-900 p-6">
  <div class="bg-amber-100 dark:bg-amber-900 p-8 rounded-lg shadow-lg max-w-md w-full border-4 border-amber-800 dark:border-amber-700 transform rotate-2 animate-tilt-2">
    <h2 class="text-3xl font-bold text-amber-900 dark:text-amber-100 mb-6 text-center font-mono tracking-wider">Join Our Community</h2>
    <form>
      <div class="mb-4">
        <label for="username" class="block text-amber-800 dark:text-amber-200 text-sm font-bold mb-2 font-mono">Username:</label>
        <input type="text" id="username" name="username" class="shadow appearance-none border-2 border-amber-600 dark:border-amber-400 rounded w-full py-2 px-3 text-amber-900 dark:text-amber-100 leading-tight focus:outline-none focus:shadow-outline bg-amber-50 dark:bg-amber-800 placeholder-amber-400 dark:placeholder-amber-600 font-mono" placeholder="Choose a username">
      </div>
      <div class="mb-4">
        <label for="email" class="block text-amber-800 dark:text-amber-200 text-sm font-bold mb-2 font-mono">Email:</label>
        <input type="email" id="email" name="email" class="shadow appearance-none border-2 border-amber-600 dark:border-amber-400 rounded w-full py-2 px-3 text-amber-900 dark:text-amber-100 leading-tight focus:outline-none focus:shadow-outline bg-amber-50 dark:bg-amber-800 placeholder-amber-400 dark:placeholder-amber-600 font-mono" placeholder="Enter your email">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-amber-800 dark:text-amber-200 text-sm font-bold mb-2 font-mono">Password:</label>
        <input type="password" id="password" name="password" class="shadow appearance-none border-2 border-amber-600 dark:border-amber-400 rounded w-full py-2 px-3 text-amber-900 dark:text-amber-100 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-amber-50 dark:bg-amber-800 placeholder-amber-400 dark:placeholder-amber-600 font-mono" placeholder="Create a password">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-amber-700 hover:bg-amber-900 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline border-2 border-amber-900 dark:border-amber-500 font-mono transform -rotate-3 hover:rotate-0 transition-transform duration-200">Register Now</button>
        <a class="inline-block align-baseline font-bold text-sm text-amber-700 dark:text-amber-300 hover:text-amber-900 dark:hover:text-amber-100 font-mono" href="#">
          Already have an account?
        </a>
      </div>
    </form>
  </div>
</div>

<style>
  @keyframes tilt-2 {
    0% { transform: rotate(2deg); }
    50% { transform: rotate(-1deg); }
    100% { transform: rotate(2deg); }
  }

  .animate-tilt-2 {
    animation: tilt-2 4s infinite ease-in-out;
  }
</style>

信息图表组件

具有极简/平面设计的信息图表组件，大地色调配色方案，商业/企业用途的中等复杂性，响应式暗模式支持。

打开预览

                <div class="bg-gray-100 dark:bg-gray-900 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-7xl mx-auto">
    <h2 class="text-3xl font-extrabold text-gray-900 dark:text-white text-center mb-10">Our Company at a Glance</h2>
    
    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
      <!-- Statistic 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 text-center transform transition duration-500 hover:scale-105">
        <div class="text-4xl font-bold text-green-700 dark:text-green-400 mb-2">150+</div>
        <p class="text-gray-600 dark:text-gray-300">Projects Completed</p>
      </div>

      <!-- Statistic 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 text-center transform transition duration-500 hover:scale-105">
        <div class="text-4xl font-bold text-amber-700 dark:text-amber-400 mb-2">10 Years</div>
        <p class="text-gray-600 dark:text-gray-300">In Business</p>
      </div>

      <!-- Statistic 3 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 text-center transform transition duration-500 hover:scale-105">
        <div class="text-4xl font-bold text-stone-700 dark:text-stone-400 mb-2">99%</div>
        <p class="text-gray-600 dark:text-gray-300">Client Satisfaction</p>
      </div>
    </div>

    <div class="mt-12 grid grid-cols-1 md:grid-cols-2 gap-8">
      <!-- Feature 1 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center text-center transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/seed/infographic1/100/100" alt="Innovation Icon" class="w-20 h-20 mb-4 rounded-full object-cover">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Innovative Solutions</h3>
        <p class="text-gray-600 dark:text-gray-300">We constantly strive to provide cutting-edge solutions for your business needs.</p>
      </div>

      <!-- Feature 2 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 flex flex-col items-center text-center transform transition duration-500 hover:scale-105">
        <img src="https://picsum.photos/seed/infographic2/100/100" alt="Support Icon" class="w-20 h-20 mb-4 rounded-full object-cover">
        <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Dedicated Support</h3>
        <p class="text-gray-600 dark:text-gray-300">Our team is committed to offering unparalleled support every step of the way.</p>
      </div>
    </div>

    <div class="mt-12 bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 text-center">
      <h3 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">Meet Our Lead Team Member</h3>
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team Member Avatar" class="w-32 h-32 rounded-full mx-auto mb-4 object-cover border-4 border-green-500 dark:border-green-400">
      <p class="text-xl font-semibold text-gray-900 dark:text-white">John Doe</p>
      <p class="text-gray-600 dark:text-gray-300">Chief Executive Officer</p>
      <p class="mt-4 text-gray-700 dark:text-gray-400 max-w-2xl mx-auto">"Our vision is to empower businesses with efficient and effective solutions that drive growth and success in the digital age."</p>
    </div>

  </div>
</div>

粘滞导航组件

一个响应式粘性导航组件，具有极简设计、三色配色方案和深色主题支持，适用于社交媒体应用程序。

打开预览

                <nav class="sticky top-0 bg-white dark:bg-gray-800 p-4 shadow-md z-50">
  <div class="container mx-auto flex justify-between items-center">
    <!-- Logo/Brand Name -->
    <a href="#" class="text-blue-500 dark:text-blue-300 text-2xl font-bold">SocialLink</a>

    <!-- Navigation Links -->
    <div class="flex space-x-6">
      <a href="#" class="text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500 transition duration-300">Feed</a>
      <a href="#" class="text-violet-500 dark:text-violet-300 hover:text-violet-700 dark:hover:text-violet-500 transition duration-300">Profile</a>
      <a href="#" class="text-blue-500 dark:text-blue-300 hover:text-blue-700 dark:hover:text-blue-500 transition duration-300">Messages</a>
      <a href="#" class="text-green-500 dark:text-green-300 hover:text-green-700 dark:hover:text-green-500 transition duration-300">Notifications</a>
    </div>

    <!-- Search Bar (Optional) -->
    <div class="hidden md:block">
      <input type="text" placeholder="Search..." class="bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-full py-2 px-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
    </div>

    <!-- User Avatar (Optional) -->
    <div class="flex items-center space-x-2">
      <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border-2 border-blue-500 dark:border-blue-300">
      <span class="text-gray-700 dark:text-gray-300 hidden sm:block">John Doe</span>
    </div>
  </div>
</nav>

Audio Player 组件

用于社交媒体的复杂 Glassmorphism 音频播放器组件，具有三重配色方案、响应式设计和深色主题支持。

打开预览

                <div class="min-h-screen bg-gradient-to-br from-purple-900 via-indigo-900 to-blue-900 dark:from-gray-900 dark:via-gray-800 dark:to-black p-8 flex items-center justify-center">
  <div class="relative w-full max-w-xl bg-white bg-opacity-10 dark:bg-gray-800 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl shadow-xl border border-white border-opacity-20 dark:border-gray-700 p-8 space-y-8 overflow-hidden">
    <div class="absolute inset-0 top-0 left-0 bg-gradient-to-br from-teal-400 to-cyan-600 rounded-full w-48 h-48 opacity-30 blur-2xl animate-blob"></div>
    <div class="absolute inset-0 bottom-0 right-0 bg-gradient-to-br from-fuchsia-500 to-purple-600 rounded-full w-48 h-48 opacity-30 blur-2xl animate-blob animation-delay-2000"></div>
    <div class="absolute inset-0 top-1/2 left-1/2 bg-gradient-to-br from-lime-400 to-green-500 rounded-full w-48 h-48 opacity-30 blur-2xl animate-blob animation-delay-4000"></div>

    <!-- Header -->
    <div class="text-center text-white relative z-10">
      <h2 class="text-3xl font-extrabold mb-2 drop-shadow-lg">Now Playing</h2>
      <p class="text-lg opacity-80">Smooth listening, anytime, anywhere.</p>
    </div>

    <!-- Album Art and Song Info -->
    <div class="flex flex-col items-center space-y-6 relative z-10">
      <div class="w-48 h-48 rounded-2xl overflow-hidden shadow-2xl border-4 border-white border-opacity-30 transform hover:scale-105 transition duration-300">
        <img src="https://picsum.photos/400/400?random=1" alt="Album Art" class="w-full h-full object-cover">
      </div>
      <div class="text-center text-white">
        <h3 class="text-2xl font-bold mb-1 drop-shadow-lg">Dreamscape Echoes</h3>
        <p class="text-md opacity-80">Vocalist Name & Band Name</p>
      </div>
    </div>

    <!-- Progress Bar -->
    <div class="relative z-10">
      <div class="h-2 bg-white bg-opacity-30 rounded-full">
        <div class="h-full bg-gradient-to-r from-teal-400 to-cyan-600 rounded-full w-2/5"></div>
      </div>
      <div class="flex justify-between text-white text-sm mt-2 opacity-80">
        <span>1:45</span>
        <span>3:20</span>
      </div>
    </div>

    <!-- Controls -->
    <div class="flex justify-center space-x-8 text-white text-3xl relative z-10">
      <button class="relative group p-3 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition duration-300 transform hover:scale-110 backdrop-filter backdrop-blur-lg shadow-lg border border-white border-opacity-30">
        <i class="fas fa-backward"></i>
        <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Previous</span>
      </button>
      <button class="relative group p-4 rounded-full bg-gradient-to-br from-teal-400 to-cyan-600 hover:from-teal-500 hover:to-cyan-700 transition duration-300 transform hover:scale-110 shadow-lg border border-white border-opacity-30 text-4xl">
        <i class="fas fa-play"></i>
        <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Play</span>
      </button>
      <button class="relative group p-3 rounded-full bg-white bg-opacity-20 hover:bg-opacity-30 transition duration-300 transform hover:scale-110 backdrop-filter backdrop-blur-lg shadow-lg border border-white border-opacity-30">
        <i class="fas fa-forward"></i>
        <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Next</span>
      </button>
    </div>

    <!-- Volume and Shuffle/Repeat -->
    <div class="flex justify-between items-center text-white relative z-10">
      <div class="flex items-center space-x-3 w-1/3">
        <i class="fas fa-volume-up text-xl opacity-80"></i>
        <div class="w-full h-1.5 bg-white bg-opacity-30 rounded-full">
          <div class="h-full bg-gradient-to-r from-fuchsia-500 to-purple-600 rounded-full w-3/4"></div>
        </div>
      </div>
      <div class="flex space-x-6 text-2xl">
        <button class="relative group opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-110">
          <i class="fas fa-random"></i>
          <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Shuffle</span>
        </button>
        <button class="relative group opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-110">
          <i class="fas fa-redo-alt"></i>
          <span class="absolute bottom-full mb-2 left-1/2 -translate-x-1/2 px-3 py-1 bg-gray-800 text-white text-xs rounded-full opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">Repeat</span>
        </button>
      </div>
    </div>

    <!-- Social Share/Engagement -->
    <div class="flex justify-around text-white relative z-10">
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-share-alt text-2xl"></i>
        <span class="text-xs">Share</span>
      </button>
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-comment-dots text-2xl"></i>
        <span class="text-xs">Comment</span>
      </button>
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-heart text-2xl"></i>
        <span class="text-xs">Like</span>
      </button>
      <button class="flex flex-col items-center space-y-1 opacity-80 hover:opacity-100 transition duration-300 transform hover:scale-105">
        <i class="fas fa-plus text-2xl"></i>
        <span class="text-xs">Add to Playlist</span>
      </button>
    </div>
    
    <!-- Equalizer Visualizer (dummy) -->
    <div class="relative z-10 flex justify-center items-end h-16 space-x-1 mt-4">
      <div class="w-1.5 bg-gradient-to-b from-teal-400 to-cyan-600 rounded-full animate-pulse h-1/2"></div>
      <div class="w-1.5 bg-gradient-to-b from-fuchsia-500 to-purple-600 rounded-full animate-pulse animation-delay-300 h-3/4"></div>
      <div class="w-1.5 bg-gradient-to-b from-lime-400 to-green-500 rounded-full animate-pulse animation-delay-600 h-1/3"></div>
      <div class="w-1.5 bg-gradient-to-b from-teal-400 to-cyan-600 rounded-full animate-pulse animation-delay-900 h-2/3"></div>
      <div class="w-1.5 bg-gradient-to-b from-fuchsia-500 to-purple-600 rounded-full animate-pulse animation-delay-1200 h-1/2"></div>
      <div class="w-1.5 bg-gradient-to-b from-lime-400 to-green-500 rounded-full animate-pulse animation-delay-1500 h-full"></div>
      <div class="w-1.5 bg-gradient-to-b from-teal-400 to-cyan-600 rounded-full animate-pulse animation-delay-1800 h-1/4"></div>
      <div class="w-1.5 bg-gradient-to-b from-fuchsia-500 to-purple-600 rounded-full animate-pulse animation-delay-2100 h-2/3"></div>
    </div>


  </div>
</div>

<style>
  @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css");

  /* Custom animations for background blobs */
  @keyframes blob {
    0%, 100% {
      transform: translate(0, 0) scale(1);
    }
    33% {
      transform: translate(30px, -50px) scale(1.1);
    }
    66% {
      transform: translate(-20px, 40px) scale(0.9);
    }
  }

  .animate-blob {
    animation: blob 7s infinite cubic-bezier(0.6, 0.01, 0.4, 1);
  }

  .animation-delay-2000 {
    animation-delay: 2s;
  }

  .animation-delay-4000 {
    animation-delay: 4s;
  }

  /* Custom animation for equalizer */
  @keyframes pulse {
    0%, 100% {
      transform: scaleY(0.5);
    }
    50% {
      transform: scaleY(1);
    }
  }

  .animate-pulse { 
    animation: pulse 1.5s infinite ease-in-out;
  }

  .animation-delay-300 { animation-delay: 0.3s; }
  .animation-delay-600 { animation-delay: 0.6s; }
  .animation-delay-900 { animation-delay: 0.9s; }
  .animation-delay-1200 { animation-delay: 1.2s; }
  .animation-delay-1500 { animation-delay: 1.5s; }
  .animation-delay-1800 { animation-delay: 1.8s; }
  .animation-delay-2100 { animation-delay: 2.1s; }

</style>

<script>
  // You can add JavaScript here for interactive elements if needed, but it's not required by the prompt.
  // For example, to toggle play/pause or change volume.
</script>

电子商务仪表板组件

一个简单的电子商务仪表板组件，具有野兽派和充满活力的设计，具有响应式布局和深色主题支持。

打开预览

                <div class="min-h-screen bg-neutral-100 dark:bg-zinc-900 p-8">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- Card 1: Sales Overview -->
    <div class="bg-fuchsia-500 dark:bg-fuchsia-800 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Sales</h2>
      <p class="text-5xl font-black text-black dark:text-white mb-2">$12,345</p>
      <p class="text-lg text-black dark:text-white">+8% from last month</p>
    </div>

    <!-- Card 2: New Orders -->
    <div class="bg-lime-400 dark:bg-lime-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-100">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Orders</h2>
      <p class="text-5xl font-black text-black dark:text-white mb-2">2,100</p>
      <p class="text-lg text-black dark:text-white">+15% from last month</p>
    </div>

    <!-- Card 3: Top Product -->
    <div class="bg-yellow-300 dark:bg-yellow-600 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-200">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Top Product</h2>
      <div class="flex items-center space-x-4">
        <img src="https://picsum.photos/seed/product1/80/80" alt="Product Image" class="w-20 h-20 object-cover border-2 border-black dark:border-white">
        <div>
          <p class="text-xl font-bold text-black dark:text-white">Radical Widget X</p>
          <p class="text-lg text-black dark:text-white">$79.99</p>
        </div>
      </div>
    </div>

    <!-- Card 4: Customer Satisfaction -->
    <div class="bg-blue-400 dark:bg-blue-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-300">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Satisfaction</h2>
      <p class="text-5xl font-black text-black dark:text-white">92%</p>
      <p class="text-lg text-black dark:text-white">Up from 88%</p>
    </div>

    <!-- Card 5: New Customers -->
    <div class="bg-red-400 dark:bg-red-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-400">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">New Customers</h2>
      <p class="text-5xl font-black text-black dark:text-white">350</p>
      <p class="text-lg text-black dark:text-white">Monthly acquisition</p>
    </div>

    <!-- Card 6: Recent Activity (simplified) -->
    <div class="bg-purple-400 dark:bg-purple-700 p-6 shadow-[-8px_8px_0px_rgba(0,0,0,0.7)] dark:shadow-[-8px_8px_0px_rgba(255,255,255,0.7)] border-4 border-black dark:border-white animate-fade-in animation-delay-500">
      <h2 class="text-3xl font-extrabold text-black dark:text-white mb-4 uppercase">Activity</h2>
      <ul class="space-y-3">
        <li class="flex items-center text-black dark:text-white">
          <img src="https://randomuser.me/api/portraits/thumb/men/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-black dark:border-white">
          <p class="text-lg">New order from John D.</p>
        </li>
        <li class="flex items-center text-black dark:text-white">
          <img src="https://randomuser.me/api/portraits/thumb/women/75.jpg" alt="User Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-black dark:border-white">
          <p class="text-lg">Product restock alert</p>
        </li>
      </ul>
    </div>

  </div>
</div>

<style>
  @keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
  }
  .animation-delay-100 { animation-delay: 0.1s; }
  .animation-delay-200 { animation-delay: 0.2s; }
  .animation-delay-300 { animation-delay: 0.3s; }
  .animation-delay-400 { animation-delay: 0.4s; }
  .animation-delay-500 { animation-delay: 0.5s; }
</style>

登录/注册组件

一个简单的响应式登录/注册组件，具有 Material Design 美学、类似的配色方案和深色模式支持，使用 Tailwind CSS 构建用于投资组合。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
  <div class="bg-white dark:bg-gray-800 p-8 rounded-lg shadow-md max-w-sm w-full">
    <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-gray-100 mb-6">Welcome Back!</h2>

    <ul class="flex justify-center mb-6">
      <li class="mr-4">
        <a href="#" class="text-blue-500 dark:text-blue-400 border-b-2 border-blue-500 dark:border-blue-400 pb-1">Login</a>
      </li>
      <li>
        <a href="#" class="text-gray-500 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 pb-1">Sign Up</a>
      </li>
    </ul>

    <form>
      <div class="mb-4">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Email</label>
        <input type="email" id="email" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600" placeholder="[email protected]">
      </div>
      <div class="mb-6">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2">Password</label>
        <input type="password" id="password" class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-200 mb-3 leading-tight focus:outline-none focus:shadow-outline bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600" placeholder="********">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline dark:bg-blue-600 dark:hover:bg-blue-800">
          Sign In
        </button>
        <a class="inline-block align-baseline font-bold text-sm text-blue-500 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-600" href="#">
          Forgot Password?
        </a>
      </div>
    </form>

    <div class="mt-6 text-center">
      <p class="text-gray-600 dark:text-gray-400 text-sm">Or sign in with:</p>
      <div class="flex justify-center space-x-4 mt-2">
        <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline dark:bg-red-600 dark:hover:bg-red-800">
          Google
        </button>
        <button class="bg-blue-800 hover:bg-blue-900 text-white font-bold py-2 px-4 rounded-full focus:outline-none focus:shadow-outline dark:bg-blue-700 dark:hover:bg-blue-900">
          Facebook
        </button>
      </div>
    </div>
  </div>
</div>

极简粉彩电商 Tooltip

用于电子商务的极简主义柔和工具提示组件，具有响应式设计和深色模式支持。

打开预览

                <div class="relative flex items-center justify-center bg-gray-100 dark:bg-gray-900 min-h-screen p-6">

  <!-- Tooltip Container -->
  <div class="group relative flex">
    <button class="px-4 py-2 bg-pink-200 text-pink-800 rounded-md shadow-sm
                   hover:bg-pink-300 focus:outline-none focus:ring-2 focus:ring-pink-400 focus:ring-opacity-75
                   dark:bg-pink-700 dark:text-pink-100 dark:hover:bg-pink-600">
      Hover for Product Info
    </button>

    <!-- Tooltip Content -->
    <div class="absolute bottom-full mb-2 hidden group-hover:block
                w-64 p-3 rounded-lg shadow-lg bg-white text-gray-800
                text-sm text-center
                dark:bg-gray-700 dark:text-gray-100
                transform -translate-x-1/2 left-1/2
                opacity-0 group-hover:opacity-100 transition-opacity duration-300">
      <p class="font-semibold text-lg mb-2">Product Name</p>
      <p class="text-md mb-3">A brief description of the product and its key features for e-commerce.</p>
      <p class="text-pink-500 font-bold">Price: $49.99</p>

      <!-- Tooltip Arrow -->
      <div class="absolute top-full left-1/2 -ml-2 w-0 h-0 border-8 border-transparent
                  border-t-white dark:border-t-gray-700"></div>
    </div>
  </div>

</div>

1 ... 128 129 130 131 132 ... 335