所有组件

信息图表组件

一个复杂的响应式信息图表组件，用于商业网站，采用拟物化风格和使用 Tailwind CSS 的充满活力的配色方案设计。包括深色模式支持和交互元素。

                <div class="p-8 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans relative overflow-hidden">

  <!-- Background texture overlaid with a subtle grid for depth -->
  <div class="absolute inset-0 bg-repeat opacity-10" style="background-image: url('https://www.transparenttextures.com/patterns/clean-gray-paper.png');"></div>

  <!-- Main container with a rounded, lifted effect -->
  <div class="relative max-w-7xl mx-auto bg-white dark:bg-gray-700 rounded-3xl shadow-2xl overflow-hidden
              transform transition-all duration-300 hover:scale-[1.005] hover:shadow-3xl
              dark:shadow-[0_20px_50px_rgba(0,0,0,0.8)] dark:border dark:border-gray-600">

    <!-- Inner metallic bezel effect -->
    <div class="absolute inset-0 rounded-3xl p-px
                bg-gradient-to-br from-gray-300 to-gray-500 dark:from-gray-600 dark:to-gray-800
                pointer-events-none"></div>

    <!-- Content Area -->
    <div class="relative p-8 md:p-12 lg:p-16 text-gray-800 dark:text-gray-200">

      <!-- Header Section -->
      <div class="mb-12 text-center">
        <h1 class="text-4xl md:text-5xl lg:text-6xl font-extrabold mb-4
                   text-transparent bg-clip-text bg-gradient-to-r from-blue-600 via-purple-600 to-pink-600
                   dark:from-blue-400 dark:via-purple-400 dark:to-pink-400
                   drop-shadow-[0_4px_3px_rgba(0,0,0,0.2)] dark:drop-shadow-[0_4px_3px_rgba(0,0,0,0.6)]">
          Corporate Performance Overview
        </h1>
        <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto
                  drop-shadow-[0_1px_1px_rgba(0,0,0,0.1)]">
          A comprehensive look at our key metrics and strategic achievements in the past year.
        </p>
      </div>

      <!-- Infographics Grid Container -->
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8 md:gap-12">

        <!-- Card 1: Sales Growth -->
        <div class="relative p-6 md:p-8 bg-gradient-to-br from-cyan-400 to-blue-600 dark:from-cyan-700 dark:to-blue-900
                    rounded-2xl shadow-xl border border-blue-700/50 dark:border-blue-500/50
                    transform transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl
                    group overflow-hidden">
          <!-- Inner metallic border -->
          <div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-600 dark:to-blue-800 pointer-events-none"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <div class="p-3 rounded-full bg-blue-700 dark:bg-blue-600 shadow-md group-hover:scale-110 transition-transform">
                <svg class="h-8 w-8 text-white" 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 7h8m0 0v8m0-8l-8 8A5 5 0 013 17V7h4a2 2 0 002-2V3a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 002 2z"></path></svg>
              </div>
              <h3 class="ml-4 text-3xl font-extrabold text-white drop-shadow-lg">Sales Growth</h3>
            </div>
            <p class="text-white text-5xl md:text-6xl font-bold mb-4 drop-shadow-md">+25%</p>
            <p class="text-cyan-100 dark:text-cyan-200 text-lg">Year-over-year revenue increase, driven by new market penetration.</p>
            <div class="mt-6 p-4 bg-white/20 dark:bg-white/10 backdrop-blur-sm rounded-xl border border-white/30 dark:border-white/20 shadow-inner flex justify-between items-center">
              <span class="text-white font-semibold">Q4 Target:</span>
              <span class="text-white text-xl font-bold">$12M</span>
            </div>
          </div>
        </div>

        <!-- Card 2: Customer Satisfaction -->
        <div class="relative p-6 md:p-8 bg-gradient-to-br from-lime-400 to-green-600 dark:from-lime-700 dark:to-green-900
                    rounded-2xl shadow-xl border border-green-700/50 dark:border-green-500/50
                    transform transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl
                    group overflow-hidden">
          <!-- Inner metallic border -->
          <div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-br from-green-300 to-green-500 dark:from-green-600 dark:to-green-800 pointer-events-none"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <div class="p-3 rounded-full bg-green-700 dark:bg-green-600 shadow-md group-hover:scale-110 transition-transform">
                <svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </div>
              <h3 class="ml-4 text-3xl font-extrabold text-white drop-shadow-lg">Customer Satisfaction</h3>
            </div>
            <p class="text-white text-5xl md:text-6xl font-bold mb-4 drop-shadow-md">92%</p>
            <p class="text-lime-100 dark:text-lime-200 text-lg">Improved NPS score, showcasing our commitment to client success.</p>
            <div class="mt-6 p-4 bg-white/20 dark:bg-white/10 backdrop-blur-sm rounded-xl border border-white/30 dark:border-white/20 shadow-inner flex justify-between items-center">
              <span class="text-white font-semibold">Target Score:</span>
              <span class="text-white text-xl font-bold">90%</span>
            </div>
          </div>
        </div>

        <!-- Card 3: Employee Retention -->
        <div class="relative p-6 md:p-8 bg-gradient-to-br from-purple-400 to-indigo-600 dark:from-purple-700 dark:to-indigo-900
                    rounded-2xl shadow-xl border border-indigo-700/50 dark:border-indigo-500/50
                    transform transition-transform duration-300 hover:-translate-y-2 hover:shadow-2xl
                    group overflow-hidden">
          <!-- Inner metallic border -->
          <div class="absolute inset-0 rounded-2xl p-px bg-gradient-to-br from-indigo-300 to-indigo-500 dark:from-indigo-600 dark:to-indigo-800 pointer-events-none"></div>
          <div class="relative z-10">
            <div class="flex items-center mb-4">
              <div class="p-3 rounded-full bg-indigo-700 dark:bg-indigo-600 shadow-md group-hover:scale-110 transition-transform">
                <svg class="h-8 w-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20v-2a4 4 0 00-4-4H7a4 4 0 00-4 4v2m3-2h4m-4 0h4m-12 0h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
              </div>
              <h3 class="ml-4 text-3xl font-extrabold text-white drop-shadow-lg">Employee Retention</h3>
            </div>
            <p class="text-white text-5xl md:text-6xl font-bold mb-4 drop-shadow-md">88%</p>
            <p class="text-purple-100 dark:text-purple-200 text-lg">High talent retention demonstrating a positive work environment.</p>
            <div class="mt-6 p-4 bg-white/20 dark:bg-white/10 backdrop-blur-sm rounded-xl border border-white/30 dark:border-white/20 shadow-inner flex justify-between items-center">
              <span class="text-white font-semibold">Industry Avg:</span>
              <span class="text-white text-xl font-bold">80%</span>
            </div>
          </div>
        </div>

      </div>

      <!-- Key Initiatives Section -->
      <div class="mt-16 bg-gray-50 dark:bg-gray-800 p-8 rounded-2xl shadow-xl
                  border border-gray-200 dark:border-gray-700
                  flex flex-col lg:flex-row items-center justify-between gap-8">
        <div class="lg:w-1/2">
          <h3 class="text-3xl font-extrabold text-gray-800 dark:text-gray-100 mb-4
                     text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-yellow-500
                     dark:from-red-400 dark:to-yellow-400
                     drop-shadow-[0_2px_2px_rgba(0,0,0,0.1)]">
            Our Key Initiatives
          </h3>
          <p class="text-gray-700 dark:text-gray-300 text-lg leading-relaxed">
            Focused efforts on research & development, sustainability, and global expansion are driving our future success.
          </p>
        </div>
        <div class="lg:w-1/2 grid grid-cols-1 md:grid-cols-2 gap-6">
          <div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
                      transform hover:scale-105 transition-transform duration-200">
            <h4 class="text-xl font-bold text-blue-600 dark:text-blue-400 mb-2">Innovation Hub</h4>
            <p class="text-gray-600 dark:text-gray-300">Investing in cutting-edge technology and talent.</p>
          </div>
          <div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
                      transform hover:scale-105 transition-transform duration-200">
            <h4 class="text-xl font-bold text-green-600 dark:text-green-400 mb-2">Sustainable Practices</h4>
            <p class="text-gray-600 dark:text-gray-300">Reducing our environmental footprint globally.</p>
          </div>
          <div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
                      transform hover:scale-105 transition-transform duration-200">
            <h4 class="text-xl font-bold text-purple-600 dark:text-purple-400 mb-2">Global Expansion</h4>
            <p class="text-gray-600 dark:text-gray-300">Opening new markets and partnerships worldwide.</p>
          </div>
          <div class="p-6 bg-white dark:bg-gray-700 rounded-xl shadow-md border border-gray-200 dark:border-gray-600
                      transform hover:scale-105 transition-transform duration-200">
            <h4 class="text-xl font-bold text-red-600 dark:text-red-400 mb-2">Team Empowerment</h4>
            <p class="text-gray-600 dark:text-gray-300">Fostering growth and well-being for all employees.</p>
          </div>
        </div>
      </div>

      <!-- Call to Action / Footer -->
      <div class="mt-16 text-center">
        <a href="#" class="inline-flex items-center px-8 py-4 rounded-full
                          bg-gradient-to-r from-orange-500 to-red-600 text-white text-xl font-bold
                          shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300
                          dark:from-orange-400 dark:to-red-500
                          border border-orange-700 dark:border-orange-300
                          group">
          View Full Report
          <svg class="ml-3 h-6 w-6 text-white transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
        </a>
        <p class="mt-8 text-gray-500 dark:text-gray-400 text-sm">
          © 2023 Your Company Name. All rights reserved.
        </p>
      </div>

    </div>
  </div>

</div>

<!-- To enable dark mode, add a class "dark" to your html tag:
<html class="dark">
  ... the component ...
</html>
-->

类似的暗模式点赞/反应按钮

一个复杂的响应式点赞/反应按钮组件，用于投资组合，具有深色模式 UI 和类似的配色方案，使用纯 HTML 和 Tailwind CSS 实现。它通过 Tailwind 的 dark：前缀支持深色模式。

打开预览

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

  <h1 class="text-4xl font-bold text-white mb-8">Portfolio Showcase</h1>

  <div class="bg-gray-800 rounded-lg shadow-xl p-6 max-w-2xl w-full dark:bg-gray-800">
    
    <div class="flex items-center mb-6">
      <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-12 h-12 rounded-full border-2 border-purple-500 mr-4">
      <div>
        <p class="text-white text-lg font-semibold">John Doe</p>
        <p class="text-gray-400 text-sm">Web Developer - <span class="text-purple-400">@john.doe</span></p>
      </div>
    </div>

    <img src="https://picsum.photos/seed/portfolio-project/800/400" alt="Project Image" class="w-full h-64 object-cover rounded-md mb-6 border border-purple-600">
    
    <p class="text-gray-300 text-base mb-6">
      This is an example portfolio project showcasing a beautiful and responsive web design.
      It utilizes modern CSS practices and aims for an excellent user experience. The color scheme 
      is analogous, creating a harmonious and aesthetically pleasing look.
    </p>

    <div class="flex items-center justify-between text-gray-400 text-sm mb-6">
      <span>2 hours ago</span>
      <span>UX/UI Design, Front-end Development</span>
    </div>

    <div class="flex items-center space-x-6">
      
      <!-- Like Button -->
      <button class="flex items-center text-gray-400 hover:text-blue-400 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M9.71 18.29a.5.5 0 00.58 0c2.81-2.4 5.2-4.52 7.03-6.17a3.5 3.5 0 00.91-3.69c-.48-1.07-1.46-1.89-2.58-2.19-1.12-.3-2.31-.1-3.32.55-.57.36-1.12.79-1.63 1.25a.5.5 0 01-.7 0c-.51-.46-1.06-.89-1.63-1.25-1.01-.65-2.2-.85-3.32-.55-1.12.3-2.1.92-2.58 2.19a3.5 3.5 0 00.91 3.69c1.83 1.65 4.22 3.77 7.03 6.17z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-semibold">Like</span>
        <span class="ml-1 text-sm">(1.2K)</span>
      </button>

      <!-- Comment Button -->
      <button class="flex items-center text-gray-400 hover:text-green-400 transition duration-300 ease-in-out transform hover:scale-105">
        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M18 10c0 3.86-3.14 7-7 7a6.99 6.99 0 01-5.73-3.03l-2.28.85a.5.5 0 01-.62-.5V9.45a7 7 0 017.5-7.42A7 7 0 0118 10zm-5.73 3.03l2.28-.85a.5.5 0 01.62.5V10.55a6.5 6.5 0 00-7.39-7.1A6.5 6.5 0 004 10a6.5 6.5 0 006.5 6.5c2.47 0 4.67-1.39 5.77-3.47z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-semibold">Comment</span>
        <span class="ml-1 text-sm">(245)</span>
      </button>

      <!-- Share Button with more complex hover -->
      <button class="flex items-center text-gray-400 hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-105 group">
        <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd" d="M7.707 11.293a1 1 0 010-1.414L10.586 7 7.707 4.121a1 1 0 011.414-1.414L12 5.586l2.879-2.879a1 1 0 111.414 1.414L13.414 7l2.879 2.879a1 1 0 01-1.414 1.414L12 8.414l-2.879 2.879a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
          <path fill-rule="evenodd" d="M12 17a1 1 0 100-2H7a1 1 0 100 2h5z" clip-rule="evenodd"></path>
        </svg>
        <span class="font-semibold">Share</span>
        <span class="ml-1 text-sm">(50)</span>
        <div class="absolute left-1/2 -ml-16 mt-12 p-3 bg-gray-700 text-white text-xs rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 shadow-lg">
          Share via:
          <div class="flex mt-2 space-x-2">
            <button class="px-3 py-1 rounded-full bg-blue-600 hover:bg-blue-700 transition duration-200">Facebook</button>
            <button class="px-3 py-1 rounded-full bg-blue-400 hover:bg-blue-500 transition duration-200">Twitter</button>
          </div>
        </div>
      </button>
    </div>

    <!-- Reaction Buttons (more complex) -->
    <div class="mt-8 pt-6 border-t border-gray-700 flex flex-wrap items-center justify-around">
      
      <button class="flex flex-col items-center text-gray-400 hover:text-yellow-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">👍</span>
        <span class="text-sm mt-1">Like</span>
        <span class="text-xs">(800)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-red-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">❤️</span>
        <span class="text-sm mt-1">Love</span>
        <span class="text-xs">(300)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-purple-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">😆</span>
        <span class="text-sm mt-1">Haha</span>
        <span class="text-xs">(150)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-blue-500 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">😮</span>
        <span class="text-sm mt-1">Wow</span>
        <span class="text-xs">(90)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-orange-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">😢</span>
        <span class="text-sm mt-1">Sad</span>
        <span class="text-xs">(40)</span>
      </button>

      <button class="flex flex-col items-center text-gray-400 hover:text-teal-400 transition duration-300 ease-in-out transform hover:scale-110 p-2 rounded-lg">
        <span class="text-3xl">😡</span>
        <span class="text-sm mt-1">Angry</span>
        <span class="text-xs">(20)</span>
      </button>

    </div>

  </div>
</div>

媒体组件 Component Component

响应式媒体组件组件，具有粗野主义设计、鲜艳的色彩和复杂的仪表板布局，具有深色主题支持，无 JavaScript。将 picsum.photos 用于图像，将 randomuser.me 用于头像。

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100 p-8 font-mono">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- Media Card 1 -->
        <div class="bg-purple-400 dark:bg-purple-700 p-6 shadow-2xl border-4 border-black dark:border-white transform skew-x-3 hover:skew-x-0 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=1" alt="Media 1" class="w-full h-48 object-cover mb-4 border-2 border-black dark:border-white">
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">Data Stream Alpha</h3>
            <p class="text-black dark:text-white text-sm mb-4">Real-time analytics and visualization of sensor data from industrial machinery.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-yellow-300 dark:bg-yellow-500 px-3 py-1 border-2 border-black dark:border-white">Live</span>
                <a href="#" class="text-black dark:text-white bg-red-500 dark:bg-red-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-red-600 dark:hover:bg-red-800 transition-colors duration-200">View Dashboard</a>
            </div>
        </div>

        <!-- Media Card 2 -->
        <div class="bg-green-400 dark:bg-green-700 p-6 shadow-2xl border-4 border-black dark:border-white transform -skew-y-3 hover:skew-y-0 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=2" alt="Media 2" class="w-full h-48 object-cover mb-4 border-2 border-black dark:border-white">
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">System Health Monitor</h3>
            <p class="text-black dark:text-white text-sm mb-4">Overview of server health, network latency, and application performance metrics.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-blue-300 dark:bg-blue-500 px-3 py-1 border-2 border-black dark:border-white">Warning</span>
                <a href="#" class="text-black dark:text-white bg-purple-500 dark:bg-purple-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-purple-600 dark:hover:bg-purple-800 transition-colors duration-200">Inspect Logs</a>
            </div>
        </div>

        <!-- Media Card 3 -->
        <div class="bg-red-400 dark:bg-red-700 p-6 shadow-2xl border-4 border-black dark:border-white transform rotate-3 hover:rotate-0 transition-transform duration-300">
            <img src="https://picsum.photos/400/250?random=3" alt="Media 3" class="w-full h-48 object-cover mb-4 border-2 border-black dark:border-white">
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">User Activity Log</h3>
            <p class="text-black dark:text-white text-sm mb-4">Detailed records of user interactions and system events across the platform.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-red-300 dark:bg-red-500 px-3 py-1 border-2 border-black dark:border-white">Critical</span>
                <a href="#" class="text-black dark:text-white bg-green-500 dark:bg-green-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-green-600 dark:hover:bg-green-800 transition-colors duration-200">Review Incidents</a>
            </div>
        </div>

        <!-- Media Card 4 with Avatar -->
        <div class="bg-blue-400 dark:bg-blue-700 p-6 shadow-2xl border-4 border-black dark:border-white transform -skew-x-6 hover:skew-x-0 transition-transform duration-300">
            <div class="flex items-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Avatar" class="w-16 h-16 rounded-full object-cover border-2 border-black dark:border-white mr-4">
                <div>
                    <h3 class="text-2xl font-bold text-black dark:text-white uppercase">Team Collaboration</h3>
                    <p class="text-black dark:text-white text-sm">Updates from the development team.</p>
                </div>
            </div>
            <p class="text-black dark:text-white text-sm mb-4">Latest sprint review and upcoming feature discussions. Track progress.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-orange-300 dark:bg-orange-500 px-3 py-1 border-2 border-black dark:border-white">Update</span>
                <a href="#" class="text-black dark:text-white bg-yellow-500 dark:bg-yellow-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-yellow-600 dark:hover:bg-yellow-800 transition-colors duration-200">Join Meeting</a>
            </div>
        </div>

        <!-- Media Card 5 - Chart Placeholder -->
        <div class="bg-orange-400 dark:bg-orange-700 p-6 shadow-2xl border-4 border-black dark:border-white transform skew-y-6 hover:skew-y-0 transition-transform duration-300">
            <div class="w-full h-48 bg-gray-300 dark:bg-gray-600 flex items-center justify-center mb-4 border-2 border-black dark:border-white">
                <p class="text-black dark:text-white text-lg font-bold">Chart Placeholder</p>
            </div>
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">Traffic Overview</h3>
            <p class="text-black dark:text-white text-sm mb-4">Visual representation of website traffic and user engagement.</p>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-purple-300 dark:bg-purple-500 px-3 py-1 border-2 border-black dark:border-white">Metrics</span>
                <a href="#" class="text-black dark:text-white bg-blue-500 dark:bg-blue-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-blue-600 dark:hover:bg-blue-800 transition-colors duration-200">Full Report</a>
            </div>
        </div>

        <!-- Media Card 6 - Text Only -->
        <div class="bg-teal-400 dark:bg-teal-700 p-6 shadow-2xl border-4 border-black dark:border-white transform -rotate-6 hover:rotate-0 transition-transform duration-300">
            <h3 class="text-2xl font-bold mb-2 text-black dark:text-white uppercase">Security Alerts</h3>
            <p class="text-black dark:text-white text-sm mb-4">Immediate notifications on potential security breaches and vulnerabilities.</p>
            <ul class="list-disc list-inside mb-4 text-black dark:text-white text-sm">
                <li>Intrusion detected in server 1</li>
                <li>Unauthorized access attempt blocked</li>
                <li>Malware scan initiated</li>
            </ul>
            <div class="flex justify-between items-center">
                <span class="text-xs text-black dark:text-white bg-red-300 dark:bg-red-500 px-3 py-1 border-2 border-black dark:border-white">Urgent</span>
                <a href="#" class="text-black dark:text-white bg-orange-500 dark:bg-orange-700 px-4 py-2 border-2 border-black dark:border-white hover:bg-orange-600 dark:hover:bg-orange-800 transition-colors duration-200">Resolve</a>
            </div>
        </div>
    </div>
</div>

选项卡组件

用于社交媒体的野兽派风格选项卡组件，具有互补色和复杂的响应式设计，包括深色主题支持。

打开预览

                <div class="font-mono bg-amber-200 text-purple-900 min-h-screen p-8 dark:bg-purple-900 dark:text-amber-200">
  <div class="max-w-4xl mx-auto border-4 border-purple-900 dark:border-amber-200">
    <!-- Brutalist Header/Title -->
    <h1 class="text-5xl font-extrabold p-4 bg-purple-900 text-amber-200 text-center uppercase tracking-widest border-b-4 border-amber-200 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900">
      Social Feed
    </h1>

    <!-- Tabs Navigation -->
    <div class="flex border-b-4 border-purple-900 dark:border-amber-200">
      <button class="flex-1 p-4 text-center text-2xl font-bold uppercase border-r-4 border-purple-900 bg-amber-300 hover:bg-amber-400 dark:border-amber-200 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
        <span class="block transform -skew-x-12">Latest</span>
      </button>
      <button class="flex-1 p-4 text-center text-2xl font-bold uppercase border-r-4 border-purple-900 bg-amber-300 hover:bg-amber-400 dark:border-amber-200 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
        <span class="block transform -skew-x-12">Popular</span>
      </button>
      <button class="flex-1 p-4 text-center text-2xl font-bold uppercase bg-amber-300 hover:bg-amber-400 dark:bg-purple-800 dark:hover:bg-purple-700 transition-all duration-200 ease-in-out">
        <span class="block transform -skew-x-12">Friends</span>
      </button>
    </div>

    <!-- Tab Content Area -->
    <div class="p-4 space-y-8">
      <!-- Example Post 1 -->
      <div class="border-4 border-purple-900 p-6 bg-amber-100 dark:border-amber-200 dark:bg-purple-700 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-300 to-purple-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 dark:from-purple-600 dark:to-amber-300"></div>
        
        <div class="relative z-10 flex items-start space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-purple-900 dark:border-amber-200 object-cover">
          <div>
            <p class="text-3xl font-extrabold uppercase">@PixelPunk</p>
            <p class="text-lg">2 hours ago</p>
          </div>
        </div>
        <p class="text-2xl leading-relaxed mb-4 border-t-2 border-b-2 border-purple-900 py-2 dark:border-amber-200">
          Just dropped my new brutalist-inspired digital art piece! Check it out and tell me what you think. #BrutalArt #DigitalDesign #NewWork
        </p>
        <img src="https://picsum.photos/id/1040/800/400" alt="Post Image" class="w-full h-auto object-cover border-4 border-purple-900 dark:border-amber-200 mb-4">
        <div class="flex justify-between items-center text-lg">
          <span class="font-bold">1.2K Likes</span>
          <a href="#" class="px-6 py-2 bg-purple-900 text-amber-200 border-2 border-amber-200 uppercase font-bold text-center hover:bg-amber-200 hover:text-purple-900 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900 dark:hover:bg-purple-900 dark:hover:text-amber-200 transition-all duration-200 ease-in-out transform skew-x-12">
            Comment
          </a>
        </div>
      </div>

      <!-- Example Post 2 -->
      <div class="border-4 border-purple-900 p-6 bg-amber-100 dark:border-amber-200 dark:bg-purple-700 relative group">
        <div class="absolute inset-0 bg-gradient-to-br from-amber-300 to-purple-400 opacity-20 group-hover:opacity-40 transition-opacity duration-300 dark:from-purple-600 dark:to-amber-300"></div>
        
        <div class="relative z-10 flex items-start space-x-4 mb-4">
          <img src="https://randomuser.me/api/portraits/men/50.jpg" alt="Avatar" class="w-16 h-16 rounded-full border-4 border-purple-900 dark:border-amber-200 object-cover">
          <div>
            <p class="text-3xl font-extrabold uppercase">@CodeCrusher</p>
            <p class="text-lg">4 hours ago</p>
          </div>
        </div>
        <p class="text-2xl leading-relaxed mb-4 border-t-2 border-b-2 border-purple-900 py-2 dark:border-amber-200">
          Just finished coding a new brutalist UI for my dev portfolio. Loving the raw, unrefined aesthetic! #WebDev #BrutalistUI #CodingLife
        </p>
        <img src="https://picsum.photos/id/1043/800/400" alt="Post Image" class="w-full h-auto object-cover border-4 border-purple-900 dark:border-amber-200 mb-4">
        <div class="flex justify-between items-center text-lg">
          <span class="font-bold">987 Likes</span>
          <a href="#" class="px-6 py-2 bg-purple-900 text-amber-200 border-2 border-amber-200 uppercase font-bold text-center hover:bg-amber-200 hover:text-purple-900 dark:bg-amber-200 dark:text-purple-900 dark:border-purple-900 dark:hover:bg-purple-900 dark:hover:text-amber-200 transition-all duration-200 ease-in-out transform skew-x-12">
            Comment
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

社交媒体时间线组件

一个简单、响应式的社交媒体时间线组件，按照 Material Design 原则设计。它使用大地色调并包括深色模式支持。每个时间轴项都显示用户头像、名称、文章标题和占位符图像，这通常是社交媒体源的典型内容。

打开预览

                <div class="min-h-screen bg-stone-100 dark:bg-stone-900 p-8">
  <div class="container mx-auto max-w-2xl">
    <h1 class="text-4xl font-bold text-stone-800 dark:text-stone-200 mb-8 text-center">Social Feed Timeline</h1>

    <!-- Timeline Item 1 -->
    <div class="relative mb-8 last:mb-0">
      <div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>

      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
          <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
        </div>
        <div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">John Doe posted an update</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-4">Exploring the beautiful trails today! #nature #hiking</p>
          <img src="https://picsum.photos/600/400?random=1" alt="Post Image" class="rounded-md w-full h-auto object-cover">
          <div class="text-sm text-stone-500 dark:text-stone-500 mt-4">2 hours ago</div>
        </div>
      </div>
    </div>

    <!-- Timeline Item 2 -->
    <div class="relative mb-8 last:mb-0">
      <div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
          <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
        </div>
        <div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">Jane Smith shared a new recipe</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-4">Delighted with this new homemade bread recipe! So satisfying. #baking #foodie</p>
          <img src="https://picsum.photos/600/400?random=2" alt="Post Image" class="rounded-md w-full h-auto object-cover">
          <div class="text-sm text-stone-500 dark:text-stone-500 mt-4">5 hours ago</div>
        </div>
      </div>
    </div>

    <!-- Timeline Item 3 -->
    <div class="relative mb-8 last:mb-0">
      <div class="hidden md:block absolute left-1/2 -ml-px w-0.5 h-full bg-stone-300 dark:bg-stone-700"></div>
      <div class="relative flex items-center justify-between md:justify-center md:even:flex-row-reverse">
        <div class="w-10 h-10 rounded-full bg-stone-500 dark:bg-stone-600 flex items-center justify-center relative z-10 md:absolute md:left-1/2 md:-ml-5">
          <img src="https://randomuser.me/api/portraits/men/22.jpg" alt="Avatar" class="rounded-full w-9 h-9 border-2 border-white dark:border-stone-900">
        </div>
        <div class="w-full md:w-5/12 bg-white dark:bg-stone-800 rounded-lg shadow-md p-6 md:p-8 ml-4 md:ml-0 md:mr-auto md:even:ml-auto md:even:mr-0">
          <h3 class="text-xl font-semibold text-stone-800 dark:text-stone-200 mb-2">Mike Johnson attended an event</h3>
          <p class="text-stone-600 dark:text-stone-400 mb-4">Great time at the local tech meetup! Learned a lot. #tech #community</p>
          <img src="https://picsum.photos/600/400?random=3" alt="Post Image" class="rounded-md w-full h-auto object-cover">
          <div class="text-sm text-stone-500 dark:text-stone-500 mt-4">1 day ago</div>
        </div>
      </div>
    </div>

  </div>
</div>

愿望清单组件

用于社交媒体的 Neumorphism 风格的 Wishlist 组件，具有互补的配色方案。它包括使用 Tailwind CSS 的响应式设计，并支持深色模式。仅使用 HTML 和 Tailwind 类，不使用 JavaScript。图片来自 picsum.photos 和 randomuser.me 的头像。

打开预览

                <div class="min-h-screen bg-gray-200 dark:bg-gray-900 p-8 flex flex-col items-center justify-center">

  <!-- Wishlist Container -->
  <div class="w-full max-w-4xl bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8 md:p-12 transition-all duration-300">

    <h1 class="text-3xl md:text-4xl font-bold text-gray-800 dark:text-gray-100 mb-8 text-center">My Social Wishlist</h1>

    <!-- Wishlist Item 1 -->
    <div class="flex flex-col md:flex-row items-center bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-6 mb-6 transition-all duration-300">
      <img src="https://picsum.photos/seed/wish1/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover shadow-neumorphic-light dark:shadow-neumorphic-dark flex-shrink-0 mb-4 md:mb-0 md:mr-6">
      <div class="flex-grow text-center md:text-left">
        <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Wireless Noise-Cancelling Headphones</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-3 text-sm md:text-base">Experience immersive audio with these premium headphones, perfect for travel and focus.</p>
        <div class="flex items-center justify-center md:justify-start space-x-2">
          <span class="text-lg font-bold text-indigo-600 dark:text-teal-400">$299.99</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$349.99</span>
        </div>
        <div class="flex flex-wrap justify-center md:justify-start gap-2 mt-4">
          <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Add to Cart
          </button>
          <button class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Share
          </button>
          <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Remove
          </button>
        </div>
      </div>
    </div>

    <!-- Wishlist Item 2 -->
    <div class="flex flex-col md:flex-row items-center bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-6 mb-6 transition-all duration-300">
      <img src="https://picsum.photos/seed/wish2/150/150" alt="Product Image" class="w-24 h-24 md:w-32 md:h-32 rounded-lg object-cover shadow-neumorphic-light dark:shadow-neumorphic-dark flex-shrink-0 mb-4 md:mb-0 md:mr-6">
      <div class="flex-grow text-center md:text-left">
        <h2 class="text-xl md:text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-2">Smartwatch with Health Monitoring</h2>
        <p class="text-gray-600 dark:text-gray-300 mb-3 text-sm md:text-base">Track your fitness, monitor health metrics, and stay connected on the go.</p>
        <div class="flex items-center justify-center md:justify-start space-x-2">
          <span class="text-lg font-bold text-indigo-600 dark:text-teal-400">$199.00</span>
          <span class="text-sm text-gray-500 dark:text-gray-400 line-through">$229.00</span>
        </div>
        <div class="flex flex-wrap justify-center md:justify-start gap-2 mt-4">
          <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Add to Cart
          </button>
          <button class="bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-800 dark:text-gray-100 font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Share
          </button>
          <button class="bg-red-500 hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-800 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-sm">
            Remove
          </button>
        </div>
      </div>
    </div>

    <!-- Social Sharing Section -->
    <div class="mt-8 pt-8 border-t border-gray-300 dark:border-gray-700 text-center">
      <h3 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Share Your Wishlist</h3>
      <div class="flex justify-center flex-wrap gap-4">
        <button class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-800 text-white font-semibold py-3 px-6 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-lg">
          <i class="fab fa-facebook-f mr-2"></i> Facebook
        </button>
        <button class="bg-blue-400 hover:bg-blue-500 dark:bg-blue-600 dark:hover:bg-blue-700 text-white font-semibold py-3 px-6 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-lg">
          <i class="fab fa-twitter mr-2"></i> Twitter
        </button>
        <button class="bg-purple-600 hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-800 text-white font-semibold py-3 px-6 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark text-lg">
          <i class="fab fa-instagram mr-2"></i> Instagram
        </button>
      </div>
    </div>

  </div>

  <!-- You might also like section (Example of complex elements) -->
  <div class="w-full max-w-4xl mt-12 bg-gray-200 dark:bg-gray-800 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark p-8 md:p-12 transition-all duration-300">
    <h3 class="text-2xl md:text-3xl font-bold text-gray-800 dark:text-gray-100 mb-6 text-center">You Might Also Like</h3>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

      <!-- Recommended Item 1 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-4 text-center transition-all duration-300">
        <img src="https://picsum.photos/seed/rec1/120/120" alt="Recommended Product" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Ergonomic Office Chair</h4>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">$450.00</p>
        <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark text-sm transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark">
          View Item
        </button>
      </div>

      <!-- Recommended Item 2 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-4 text-center transition-all duration-300">
        <img src="https://picsum.photos/seed/rec2/120/120" alt="Recommended Product" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Premium Coffee Machine</h4>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">$150.00</p>
        <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark text-sm transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark">
          View Item
        </button>
      </div>

      <!-- Recommended Item 3 -->
      <div class="bg-gray-100 dark:bg-gray-700 rounded-lg shadow-neumorphic-inner-light dark:shadow-neumorphic-inner-dark p-4 text-center transition-all duration-300">
        <img src="https://picsum.photos/seed/rec3/120/120" alt="Recommended Product" class="w-24 h-24 rounded-full object-cover mx-auto mb-4 shadow-neumorphic-light dark:shadow-neumorphic-dark">
        <h4 class="text-lg font-semibold text-gray-800 dark:text-gray-100 mb-1">Smart Home Hub</h4>
        <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">$120.00</p>
        <button class="bg-indigo-500 hover:bg-indigo-600 dark:bg-teal-600 dark:hover:bg-teal-700 text-white font-semibold py-2 px-4 rounded-full shadow-neumorphic-btn-light dark:shadow-neumorphic-btn-dark text-sm transition-all duration-300 transform hover:scale-105 active:shadow-neumorphic-btn-pressed-light active:dark:shadow-neumorphic-btn-pressed-dark">
          View Item
        </button>
      </div>

    </div>
  </div>

  <!-- Friends

分页组件

一个简单而优雅的深色模式分页组件，具有柔和的色彩，适用于社交媒体应用程序。它具有响应式设计，并使用 Tailwind CSS 进行样式设置，包括深色模式支持。

打开预览

                <nav class="flex items-center justify-between px-4 py-3 sm:px-6 bg-gray-900 rounded-md"> <div class="flex-1 flex justify-between sm:hidden"> <a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-700 text-sm font-medium rounded-md text-gray-300 bg-gray-800 hover:bg-gray-700"> Previous </a> <a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-700 text-sm font-medium rounded-md text-gray-300 bg-gray-800 hover:bg-gray-700"> Next </a> </div> <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between"> <div> <p class="text-sm text-gray-400"> Showing <span class="font-medium">1</span> to <span class="font-medium">10</span> of <span class="font-medium">97</span> results </p> </div> <div> <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination"> <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-700 bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700"> <span class="sr-only">Previous</span> <svg class="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="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" /> </svg> </a> <a href="#" aria-current="page" class="z-10 bg-indigo-500 border-indigo-500 text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 1 </a> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 2 </a> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"> 3 </a> <span class="relative inline-flex items-center px-4 py-2 border border-gray-700 bg-gray-800 text-sm font-medium text-gray-400"> ... </span> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 hidden md:inline-flex relative items-center px-4 py-2 border text-sm font-medium"> 8 </a> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 9 </a> <a href="#" class="bg-gray-800 border-gray-700 text-gray-300 hover:bg-gray-700 relative inline-flex items-center px-4 py-2 border text-sm font-medium"> 10 </a> <a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-700 bg-gray-800 text-sm font-medium text-gray-300 hover:bg-gray-700"> <span class="sr-only">Next</span> <svg class="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="M7.293 14.707a1 1 0 010-1.414L10.586 10l-3.293-3.293a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd" /> </svg> </a> </nav> </div> </div> </nav>

RetroBusinessLayout

适用于商业网站的复古/复古主题布局组件，具有灰度配色方案和简单的设计。它是响应式的，包括深色模式支持。

打开预览

                <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col items-center justify-center font-mono text-gray-800 dark:text-gray-200 p-4">

  <!-- Header -->
  <header class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mb-8 flex justify-between items-center transform transition duration-300 hover:scale-105">
    <h1 class="text-3xl font-bold uppercase tracking-wider">Acme Corp</h1>
    <nav>
      <ul class="flex space-x-6">
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">About</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Services</a></li>
        <li><a href="#" class="text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition duration-300">Contact</a></li>
      </ul>
    </nav>
  </header>

  <!-- Main Content -->
  <main class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 transform transition duration-300 hover:scale-105">
    <section class="text-center mb-10">
      <h2 class="text-4xl font-bold mb-4 uppercase">Welcome to the Future Past</h2>
      <p class="text-lg leading-relaxed">Crafting innovative solutions with a nod to the timeless aesthetics of yesteryear. We bring your business visions to life with robust technology and classic design principles.</p>
    </section>

    <section class="grid md:grid-cols-2 gap-8">
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner transform transition duration-300 hover:translate-y-[-5px]">
        <h3 class="text-2xl font-semibold mb-3">Our Mission</h3>
        <p class="text-gray-700 dark:text-gray-300">To fuse nostalgic design sensibilities with modern technological advancements, delivering unparalleled digital experiences that stand the test of time.</p>
      </div>
      <div class="bg-gray-50 dark:bg-gray-700 p-6 rounded-lg shadow-inner transform transition duration-300 hover:translate-y-[-5px]">
        <h3 class="text-2xl font-semibold mb-3">What We Offer</h3>
        <ul class="list-disc list-inside text-gray-700 dark:text-gray-300">
          <li>Web Development (Retro & Modern)</li>
          <li>Digital Marketing Strategies</li>
          <li>Brand Identity & Design</li>
          <li>IT Consulting & Solutions</li>
        </ul>
      </div>
    </section>
  </main>

  <!-- Footer -->
  <footer class="w-full max-w-4xl bg-white dark:bg-gray-800 shadow-md rounded-lg p-6 mt-8 text-center text-gray-600 dark:text-gray-300 transform transition duration-300 hover:scale-105">
    <p>&copy; 2023 Acme Corp. All rights reserved. Embracing the past, building the future.</p>
  </footer>

</div>

密码重置组件 - Retro/Vibrant Dashboard

复古风格的密码重置组件，色彩鲜艳，适用于仪表板。它具有响应式设计和使用 Tailwind CSS 的深色主题支持。该设计唤起了 80 年代/90 年代的美学。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-6">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl p-8 max-w-md w-full border-4 border-purple-500 dark:border-teal-400 transform -rotate-3 hover:rotate-0 transition-transform duration-300">
    <div class="text-center mb-8">
      <h2 class="text-4xl font-bold text-gray-800 dark:text-white font-mono mb-2">RESET <span class="text-purple-600 dark:text-teal-400">PASSWORD</span></h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm">Enter your email to receive a password reset link.</p>
    </div>
    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-700 dark:text-gray-200 text-sm font-bold mb-2 uppercase tracking-wider">Email Address</label>
        <input type="email" id="email" class="shadow appearance-none border-4 border-yellow-400 dark:border-rose-500 rounded-lg w-full py-3 px-4 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-teal-600 bg-gray-200 dark:bg-gray-700 placeholder-gray-500 dark:placeholder-gray-400 transition-all duration-300" placeholder="[email protected]">
      </div>
      <div class="flex items-center justify-between">
        <button type="submit" class="bg-gradient-to-r from-purple-600 to-pink-500 hover:from-purple-700 hover:to-pink-600 text-white font-extrabold py-3 px-6 rounded-full focus:outline-none focus:shadow-outline transform skew-x-12 hover:skew-x-0 transition-all duration-300 text-lg uppercase tracking-widest">
          Send Link
        </button>
        <a href="#" class="inline-block align-baseline font-bold text-sm text-purple-600 dark:text-teal-400 hover:text-purple-800 dark:hover:text-teal-200 transition-colors duration-300">
          Remembered your password?
        </a>
      </div>
    </form>
    <div class="mt-8 text-center text-gray-500 dark:text-gray-400 text-xs">
      <p>&copy;2023 RETRO CORP. All rights reserved. <span class="text-pink-500 dark:text-yellow-300">Stay Awesome!</span></p>
    </div>
  </div>
</div>

按钮组件

一个复古主题按钮组件，具有三重配色方案、简单的复杂性和响应式设计，支持深色模式，适用于博客或内容网站。

打开预览

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

  <!-- Retro Button 1 -->
  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-red-700 dark:hover:bg-red-900">
    Click Me (Red)
  </button>

  <!-- Retro Button 2 -->
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-blue-700 dark:hover:bg-blue-900">
    Click Me (Blue)
  </button>

  <!-- Retro Button 3 -->
  <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded-full m-2
                 transform transition duration-300 hover:scale-105
                 dark:bg-yellow-700 dark:hover:bg-yellow-900">
    Click Me (Yellow)
  </button>

  <!-- Responsive Example: Buttons stack on small screens and are side-by-side on larger screens -->
  <div class="flex flex-col sm:flex-row mt-8">
    <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded m-2
                   dark:bg-green-700 dark:hover:bg-green-900">
      Responsive Button 1
    </button>
    <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded m-2
                   dark:bg-purple-700 dark:hover:bg-purple-900">
      Responsive Button 2
    </button>
  </div>

  <!-- Dark Mode Toggle Placeholder (for visual representation, no JS) -->
  <div class="mt-8 text-gray-700 dark:text-gray-300">
    Toggle your browser/OS dark mode to see changes.
  </div>

</div>

类别