所有组件

社区论坛组件

一个社区论坛组件，采用新拟态设计，灰度色彩方案，以及简单复杂性，适用于社交媒体，使用Tailwind CSS。响应式设计支持深色主题。

                <div class="container mx-auto p-4 antialiased text-gray-800 dark:text-gray-200">
  <div class="relative flex flex-col min-w-0 mb-6 break-words bg-gray-200 dark:bg-gray-800 shadow-neumorphic-light dark:shadow-neumorphic-dark rounded-lg">
    <div class="px-6 py-5">
      <div class="text-center">
        <h3 class="mb-1 text-xl font-bold">Community Forum</h3>
        <p class="text-sm text-gray-600 dark:text-gray-400">Discuss and share with the community</p>
      </div>
    </div>
    <div class="flex-auto p-6">
      <div class="relative w-full">
        <input type="text" placeholder="Search topics..." class="px-3 py-3 placeholder-gray-600 dark:placeholder-gray-400 text-gray-800 dark:text-gray-200 relative bg-gray-300 dark:bg-gray-700 rounded text-sm shadow-neumorphic-input-light dark:shadow-neumorphic-input-dark outline-none border-none focus:outline-none focus:shadow-outline w-full pr-10">
        <span class="z-10 h-full leading-snug font-normal absolute text-center text-gray-600 dark:text-gray-400 bg-transparent rounded text-base items-center justify-center w-8 right-0 pr-3 py-3">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <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" />
          </svg>
        </span>
      </div>
      <div class="mt-6">
        <div class="flex items-center justify-between mb-4">
          <h4 class="text-md font-semibold">Recent Discussions</h4>
          <a href="#" class="text-sm text-gray-600 dark:text-gray-400 hover:underline">View All</a>
        </div>
        <ul class="list-none">
          <li class="px-4 py-3 mb-3 bg-gray-300 dark:bg-gray-700 shadow-neumorphic-item-light dark:shadow-neumorphic-item-dark rounded-lg">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="..." class="w-8 h-8 rounded-full mr-3">
              <div>
                <p class="text-sm font-semibold">Discussion Topic 1</p>
                <span class="text-xs text-gray-600 dark:text-gray-400">Started by John Doe</span>
              </div>
            </div>
          </li>
          <li class="px-4 py-3 mb-3 bg-gray-300 dark:bg-gray-700 shadow-neumorphic-item-light dark:shadow-neumorphic-item-dark rounded-lg">
            <div class="flex items-center">
              <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="..." class="w-8 h-8 rounded-full mr-3">
              <div>
                <p class="text-sm font-semibold">Discussion Topic 2</p>
                <span class="text-xs text-gray-600 dark:text-gray-400">Started by Jane Smith</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

<style>
.shadow-neumorphic-light {
  box-shadow: 7px 7px 14px #bebebe, -7px -7px 14px #ffffff;
}
.shadow-neumorphic-dark {
  box-shadow: 7px 7px 14px #717171, -7px -7px 14px #8f8f8f;
}
.shadow-neumorphic-input-light {
    box-shadow: inset 5px 5px 10px #bebebe, inset -5px -5px 10px #ffffff;
}
.shadow-neumorphic-input-dark {
    box-shadow: inset 5px 5px 10px #717171, inset -5px -5px 10px #8f8f8f;
}
.shadow-neumorphic-item-light {
    box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}
.shadow-neumorphic-item-dark {
    box-shadow: 5px 5px 10px #717171, -5px -5px 10px #8f8f8f;
}
</style>

凹面加载器

一个简单的新拟态加载器组件，适用于支持深色模式的电子商务网站。

打开预览

                <div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-800">
  <div class="w-64 h-64">
    <div class="relative w-full h-full rounded-lg bg-gray-200 dark:bg-gray-700 shadow-neumorphic-light dark:shadow-neumorphic-dark">
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="w-16 h-16 border-4 border-blue-500 border-solid rounded-full animate-spin border-t-transparent"></div>
      </div>
      <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
        <div class="w-10 h-10 border-4 border-purple-500 border-solid rounded-full animate-spin border-t-transparent"></div>
      </div>
    </div>
  </div>
</div>

<style>
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.shadow-neumorphic-light {
  box-shadow: 7px 7px 14px #b0b0b0, -7px -7px 14px #ffffff;
}

.dark .shadow-neumorphic-dark {
  box-shadow: 7px 7px 14px #4a4a4a, -7px -7px 14px #363636;
}
</style>

通知组件

一个复杂的通知组件，采用复古/复古美学和鲜艳颜色，适用于电子商务，支持深色模式。

打开预览

                <div class="relative z-10">
  <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-5 max-w-md mx-auto">
    <h2 class="text-2xl font-bold text-blue-600 dark:text-blue-400 mb-4">Notifications</h2>
    <div class="space-y-4">
      <div class="flex items-center bg-yellow-200 dark:bg-yellow-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-yellow-600 dark:border-yellow-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">New Order Placed!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Order #12345 has been successfully placed.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">Just now</span>
        </div>
      </div>
      <div class="flex items-center bg-green-200 dark:bg-green-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-green-600 dark:border-green-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Item Shipped!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Your order #12345 is on its way!</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">2 hours ago</span>
        </div>
      </div>
      <div class="flex items-center bg-red-200 dark:bg-red-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-red-600 dark:border-red-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Payment Failed!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">There was an issue with your payment for order #12345.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">5 hours ago</span>
        </div>
      </div>
      <div class="flex items-center bg-purple-200 dark:bg-purple-800 p-4 rounded-lg shadow">
        <img src="https://picsum.photos/40" alt="Avatar" class="rounded-full mr-3 border-2 border-purple-600 dark:border-purple-400" />
        <div class="flex-1">
          <h3 class="text-lg font-semibold text-black dark:text-white">Review Reminder!</h3>
          <p class="text-sm text-gray-700 dark:text-gray-300">Don’t forget to review your recent purchase.</p>
          <span class="text-xs text-gray-500 dark:text-gray-400">1 day ago</span>
        </div>
      </div>
    </div>
  </div>
</div>

社交组件

一个响应式社交媒体组件，采用复古/复古美学，具有丰富的界面和多个互动元素，以及深色主题。

打开预览

                <div class="bg-amber-400 dark:bg-gray-800 rounded-lg shadow-lg p-6 max-w-lg mx-auto">
    <h1 class="text-4xl font-bold text-center text-brown-600 dark:text-yellow-400">Retro Social Media</h1>
    <div class="mt-6 bg-white dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <div class="flex items-center space-x-4">
            <img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
            <div>
                <h2 class="text-lg font-semibold text-black dark:text-white">John Doe</h2>
                <p class="text-gray-700 dark:text-gray-300">@johndoe</p>
            </div>
        </div>
        <p class="mt-4 text-sm text-gray-600 dark:text-gray-400">Just enjoyed a retro gaming night! Who's up for some Mario Kart? 🎮</p>
        <img class="mt-4 rounded-lg" src="https://picsum.photos/400/200?random=1" alt="Retro Gaming">
        <div class="mt-4 flex justify-between">
            <button class="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 dark:bg-purple-700 dark:hover:bg-purple-600">Like ❤️</button>
            <button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-600">Comment 💬</button>
            <button class="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 dark:bg-green-700 dark:hover:bg-green-600">Share 🔗</button>
        </div>
    </div>

    <div class="mt-6 bg-white dark:bg-gray-900 rounded-lg p-4 shadow-md">
        <h3 class="text-lg font-semibold text-black dark:text-white">Recent Posts</h3>
        <div class="mt-4 space-y-4">
            <div class="flex items-center space-x-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
                <div>
                    <h4 class="text-md font-semibold text-black dark:text-white">Jane Smith</h4>
                    <p class="text-gray-600 dark:text-gray-300">Loved the concert last night! 🎤</p>
                </div>
            </div>
            <div class="flex items-center space-x-4">
                <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/5.jpg" alt="User Avatar">
                <div>
                    <h4 class="text-md font-semibold text-black dark:text-white">Mike Lee</h4>
                    <p class="text-gray-600 dark:text-gray-300">Throwback to my first Car Rally! 🚗</p>
                </div>
            </div>
        </div>
    </div>
</div>

购物车组件

一个简单的响应式购物车组件，采用新拟态设计，为深色主题提供互补的配色方案。

打开预览

                <div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg">  <h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Shopping Cart</h2>  <ul class="space-y-4">    <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600">      <img src="https://picsum.photos/50/50" alt="Product Image" class="mr-4 rounded">      <div class="flex-1">        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Name</h3>        <p class="text-gray-600 dark:text-gray-400">$19.99</p>      </div>      <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button>    </li>    <li class="flex items-center border p-4 rounded-lg bg-white shadow-inner dark:bg-gray-600">      <img src="https://picsum.photos/50/50?random=1" alt="Product Image" class="mr-4 rounded">      <div class="flex-1">        <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Another Product</h3>        <p class="text-gray-600 dark:text-gray-400">$29.99</p>      </div>      <button class="bg-blue-500 text-white rounded-full px-3 py-1 shadow transition duration-300 hover:bg-blue-600">Remove</button>    </li>  </ul>  <div class="mt-6">    <h4 class="text-lg font-bold text-gray-800 dark:text-gray-200">Total: <span class="text-blue-500">$49.98</span></h4>  </div>  <button class="mt-4 bg-green-500 text-white rounded-full px-4 py-2 shadow transition duration-300 hover:bg-green-600">Checkout</button>  <footer class="mt-6 text-center text-gray-600 dark:text-gray-400">    <p>Created for Portfolio</p>  </footer> </div>

头部组件

一个简单的标题组件，采用新拟态风格和鲜艳的颜色，完美适合博客/内容网页。它具有响应式设计的深色模式支持。

打开预览

                <header class="p-4 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex justify-between items-center">
    <div class="flex items-center">
        <img src="https://picsum.photos/50" alt="Logo" class="rounded-full shadow-md" />
        <h1 class="text-2xl font-bold text-gray-800 dark:text-white ml-2">My Blog</h1>
    </div>
    <nav class="flex space-x-4">
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Home</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">About</a>
        <a href="#" class="text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 transition duration-200">Contact</a>
    </nav>
</header>

地图组件

具有深色模式支持的响应式地图组件，使用Tailwind CSS。

打开预览

                <div class="bg-gray-900 text-gray-200 p-8 min-h-screen flex flex-col items-center justify-center">
  <h2 class="text-2xl font-bold mb-6 text-teal-300">My Location</h2>
  <div class="w-full max-w-md rounded-lg shadow-lg overflow-hidden">
    <div class="relative" style="padding-bottom: 56.25%;"><!-- 16:9 Aspect Ratio -->
      <iframe 
        src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1dYOUR_LATITUDE_LONGITUDE!2dYOUR_LONGITUDE!3dYOUR_LATITUDE!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x0!2zM8KwMDAnMDAuMCJTIDc4wrAwMCcwMC4wIlc!5e0!3m2!1sen!2sus!4vYOUR_GENERATED_ID"
        width="100%" 
        height="100%" 
        style="border:0;" 
        allowfullscreen="" 
        loading="lazy" 
        class="absolute top-0 left-0"
      ></iframe>
    </div>
  </div>
  <p class="mt-4 text-sm text-gray-400">Replace "YOUR_LATITUDE_LONGITUDE" and "YOUR_LONGITUDE" and "YOUR_LATITUDE" and "YOUR_GENERATED_ID" with your actual map details.</p>
</div>

拟物分页组件

一个为博客界面设计的响应式互动分页组件，采用新拟态风格，支持深色模式。

打开预览

                <div class="flex items-center justify-center py-8">  <nav aria-label="Pagination" class="hidden md:flex space-x-2">    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Previous</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">1</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">2</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">3</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Next</span>    </button>  </nav>  <nav aria-label="Pagination" class="flex md:hidden space-x-2">    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Previous</span>    </button>    <button class="rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 hover:bg-gray-300 dark:hover:bg-gray-700 transition-all duration-300">      <span class="text-gray-800 dark:text-gray-200">Next</span>    </button>  </nav>  <div class="flex rounded-full bg-gray-200 dark:bg-gray-800 shadow-lg p-2 mt-5 items-center space-x-2">    <span class="text-gray-800 dark:text-gray-200">Page</span>    <input type="number" class="w-12 text-center bg-transparent border-b border-gray-400 dark:border-gray-600 text-gray-800 dark:text-gray-200 focus:outline-none focus:border-blue-500" value="1">    <span class="text-gray-800 dark:text-gray-200">of 3</span>  </div></div>

数据可视化组件

一个复古风格的数据可视化仪表板组件，具有深色主题，色调自然，布局简单。

打开预览

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-4xl mx-auto">
    <h1 class="text-3xl font-bold text-amber-300 mb-4">Data Visualization Dashboard</h1>
    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4">
            <h2 class="text-xl text-green-200">User Statistics</h2>
            <p class="text-gray-300 dark:text-gray-400">Total Users: 250</p>
            <img src="https://picsum.photos/200/100?random=1" alt="Data Visualization" class="w-full rounded-lg mt-2">
        </div>
        <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4">
            <h2 class="text-xl text-green-200">Sales Overview</h2>
            <p class="text-gray-300 dark:text-gray-400">Total Sales: $10,000</p>
            <img src="https://picsum.photos/200/100?random=2" alt="Sales Overview" class="w-full rounded-lg mt-2">
        </div>
    </div>
    <div class="bg-gray-700 dark:bg-gray-800 rounded-lg p-4 mt-4">
        <h2 class="text-xl text-green-200">Recent Activity</h2>
        <ul class="text-gray-300 dark:text-gray-400">
            <li class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User1 logged in</span>
            </li>
            <li class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User2 made a purchase</span>
            </li>
            <li class="flex items-center">
                <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-8 h-8 rounded-full mr-2">
                <span>User3 logged out</span>
            </li>
        </ul>
    </div>
</div>

标签云组件

一个具有鲜艳色彩的3D标签云组件，用于数据可视化仪表板。

打开预览

                <div class="flex flex-wrap gap-2 p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
  <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-blue-700 transform transition duration-300 hover:scale-110 hover:rotate-3" style="perspective: 1000px; transform: rotateY(15deg) rotateX(5deg);">Marketing Analysis</span>
  <span class="bg-red-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-red-700 transform transition duration-300 hover:scale-110 hover:-rotate-6" style="perspective: 1000px; transform: rotateY(-10deg) rotateX(-3deg);">Sales Performance</span>
  <span class="bg-green-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-green-700 transform transition duration-300 hover:scale-110 hover:rotate-4" style="perspective: 1000px; transform: rotateY(5deg) rotateX(10deg);">Customer Feedback</span>
  <span class="bg-yellow-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-yellow-700 transform transition duration-300 hover:scale-110 hover:-rotate-4" style="perspective: 1000px; transform: rotateY(-5deg) rotateX(8deg);">Product Development</span>
  <span class="bg-purple-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-purple-700 transform transition duration-300 hover:scale-110 hover:rotate-2" style="perspective: 1000px; transform: rotateY(10deg) rotateX(-6deg);">Financial Reporting</span>
  <span class="bg-pink-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-pink-700 transform transition duration-300 hover:scale-110 hover:-rotate-2" style="perspective: 1000px; transform: rotateY(-8deg) rotateX(4deg);">Operational Efficiency</span>
  <span class="bg-indigo-500 text-white px-3 py-1 rounded-full text-sm font-semibold shadow-md dark:bg-indigo-700 transform transition duration-300 hover:scale-110 hover:rotate-5" style="perspective: 1000px; transform: rotateY(12deg) rotateX(-2deg);">Market Trends</span>
</div>

类别