所有组件

注册表单组件

一个极简主义的注册表单，采用灰度色调和丰富的交互元素，响应式，并支持暗黑模式，使用Tailwind CSS。

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900">
    <form class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-8 max-w-md w-full">
        <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-6 text-center">Register</h2>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="name">Full Name</label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="name" type="text" placeholder="John Doe" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="email">Email Address</label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="email" type="email" placeholder="[email protected]" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="password">Password</label>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="password" type="password" placeholder="********" required>
        </div>
        <div class="mb-4">
            <label class="block text-gray-700 dark:text-gray-300 mb-2" for="avatar">Profile Picture</label>
            <div class="flex items-center justify-center mb-4">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="rounded-full w-16 h-16 border-2 border-gray-300 dark:border-gray-600">
            </div>
            <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 dark:text-gray-300 dark:bg-gray-700 focus:outline-none focus:shadow-outline" id="avatar" type="url" placeholder="https://picsum.photos/200" required>
        </div>
        <div class="flex items-center justify-between mb-4">
            <label class="flex items-center">
                <input class="mr-2 leading-tight" type="checkbox" required>
                <span class="text-sm text-gray-600 dark:text-gray-300">I agree to the terms and conditions</span>
            </label>
        </div>
        <div class="flex items-center justify-center">
            <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">Register</button>
        </div>
    </form>
</div>

电子商务布局组件

一个响应式电子商务布局组件，支持暗黑主题，基于Tailwind CSS构建，遵循材料设计原则。它包括导航栏、带有产品列表的主要内容区域和页脚。色调为柔和。

打开预览

                <div class="min-h-screen bg-pastel-100 dark:bg-pastel-900">
  <!-- Navigation Bar -->
  <nav class="bg-pastel-200 dark:bg-pastel-800 shadow">
    <div class="container mx-auto px-6 py-3">
      <div class="flex items-center justify-between">
        <div class="text-pastel-900 dark:text-pastel-100 font-semibold text-xl">My E-commerce</div>
        <div class="flex items-center space-x-4">
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Home</a>
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Shop</a>
          <a href="#" class="text-pastel-900 dark:text-pastel-100 hover:text-pastel-700 dark:hover:text-pastel-300">Cart</a>
        </div>
      </div>
    </div>
  </nav>

  <!-- Main Content Area -->
  <main class="container mx-auto mt-6 px-6 py-3">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <!-- Product Card (Repeat this block for multiple products) -->
      <div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/300/200" alt="Product Image">
        <div class="p-4">
          <h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Product Name</h3>
          <p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of the product.</p>
          <div class="flex items-center justify-between">
            <span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$19.99</span>
            <button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
      <!-- End Product Card -->

      <!-- Example of another product card -->
       <div class="bg-white dark:bg-pastel-800 rounded-lg shadow-lg overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/300/200" alt="Product Image">
        <div class="p-4">
          <h3 class="text-pastel-900 dark:text-pastel-100 font-semibold text-lg mb-2">Another Product</h3>
          <p class="text-pastel-700 dark:text-pastel-300 text-sm mb-4">This is a brief description of another product.</p>
          <div class="flex items-center justify-between">
            <span class="text-pastel-900 dark:text-pastel-100 font-bold text-xl">$25.00</span>
            <button class="bg-pastel-500 hover:bg-pastel-600 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
          </div>
        </div>
      </div>
    </div>
  </main>

  <!-- Footer -->
  <footer class="bg-pastel-200 dark:bg-pastel-800 mt-6 py-6">
    <div class="container mx-auto text-center text-pastel-900 dark:text-pastel-100">
      <p>&copy; 2023 My E-commerce. All rights reserved.</p>
    </div>
  </footer>
</div>

用户提及组件

一个响应式用户提及组件，支持暗黑主题，专为商业网站设计。采用Tailwind CSS和地球色调的微交互特性。

打开预览

                <div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-md">
  <div class="flex items-center space-x-4">
    <img class="w-10 h-10 rounded-full ring-2 ring-amber-600" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
    <div class="flex-1">
      <p class="text-gray-800 dark:text-gray-200 font-semibold">John Doe</p>
      <p class="text-gray-600 dark:text-gray-400 text-sm">Mentioned you in a comment:</p>
      <p class="text-gray-700 dark:text-gray-300 mt-1">"Hey, check out this new feature!"</p>
    </div>
    <button class="text-amber-600 hover:text-amber-800 dark:text-amber-400 dark:hover:text-amber-600 transition-colors duration-200 ease-in-out">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H3v2H2v2h10l2-2 1-1 1.573-1.573A6 6 0 0118 8zM4.293 15.707L10 9.999V7a1 1 0 012 0v.001h1a1 1 0 011 1v3l3.707 3.707A1 1 0 0117 17H5a1 1 0 01-.707-1.707z" clip-rule="evenodd" />
      </svg>
    </button>
  </div>
  <div class="flex justify-end mt-4 space-x-2">
    <button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-200 dark:bg-gray-700 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">Reply</button>
    <button class="px-4 py-2 text-sm font-medium text-white bg-amber-600 rounded-md hover:bg-amber-700 transition-colors duration-200 ease-in-out">View Post</button>
  </div>
</div>

反馈组件

一个为黑暗模式设计的复杂反馈组件，适用于商业/企业网站，采用互补色方案。

打开预览

                <div class="bg-gray-900 p-6 rounded-lg shadow-md dark:bg-gray-800">
    <h2 class="text-2xl font-bold text-white mb-4">Feedback Component</h2>
    <form class="space-y-4">
        <div>
            <label for="name" class="block text-gray-300 dark:text-gray-200">Name</label>
            <input type="text" id="name" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Name" required />
        </div>
        <div>
            <label for="email" class="block text-gray-300 dark:text-gray-200">Email</label>
            <input type="email" id="email" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Email" required />
        </div>
        <div>
            <label for="feedback" class="block text-gray-300 dark:text-gray-200">Feedback</label>
            <textarea id="feedback" rows="4" class="mt-1 p-2 w-full rounded-md border border-gray-700 bg-gray-800 text-gray-200 dark:bg-gray-900 dark:border-gray-600" placeholder="Your Feedback" required></textarea>
        </div>
        <div class="flex items-center mb-4">
            <input type="checkbox" id="subscribe" class="h-4 w-4 text-teal-500 border-gray-700 rounded dark:bg-gray-900 dark:border-gray-600" />
            <label for="subscribe" class="ml-2 text-gray-300 dark:text-gray-200">Subscribe to our newsletter</label>
        </div>
        <button type="submit" class="w-full bg-teal-600 hover:bg-teal-500 rounded-md text-white font-semibold py-2 transition duration-200 ease-in-out">Submit</button>
    </form>
    <div class="mt-6">
        <h3 class="text-lg font-semibold text-gray-400 dark:text-gray-300">Recent Feedback</h3>
        <div class="mt-2 bg-gray-800 p-4 rounded-md shadow-md dark:bg-gray-700">
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" />
                <div>
                    <p class="text-gray-200 dark:text-gray-100 font-bold">John Doe</p>
                    <p class="text-gray-300 dark:text-gray-400">Great service! Highly recommend.</p>
                </div>
            </div>
            <div class="flex items-center mb-2">
                <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="h-10 w-10 rounded-full mr-3" />
                <div>
                    <p class="text-gray-200 dark:text-gray-100 font-bold">Jane Smith</p>
                    <p class="text-gray-300 dark:text-gray-400">Loved the experience, will come back!</p>
                </div>
            </div>
        </div>
    </div>
</div>

粗野主义大菜单

一个具有粗犷主义设计的响应式大菜单组件，采用地球色调，支持博客或内容驱动的网站的黑暗模式。

打开预览

                <div class="bg-brown-900 dark:bg-gray-800 p-6">
    <div class="max-w-7xl mx-auto">
        <div class="flex flex-col md:flex-row justify-between items-center">
            <div class="text-white text-2xl font-bold">Blog</div>
            <nav class="mt-4 md:mt-0">
                <ul class="flex flex-col md:flex-row space-x-0 md:space-x-8">
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Home</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">About</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Categories</a>
                    </li>
                    <li class="hover:bg-brown-700 dark:hover:bg-gray-600 p-2 rounded">
                        <a href="#" class="text-white">Contact</a>
                    </li>
                </ul>
            </nav>
        </div>
        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=1" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 1</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=2" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 2</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
            <div class="bg-brown-800 dark:bg-gray-700 p-4 rounded">
                <img src="https://picsum.photos/300/200?random=3" alt="Post Thumbnail" class="w-full h-auto rounded mb-4">
                <h2 class="text-lg font-semibold text-white">Post Title 3</h2>
                <p class="text-gray-300">An engaging description about this post goes here. It captures the essence of the content.</p>
            </div>
        </div>
    </div>
</div>

拟物交互组件

适用于商业/企业网站的拟态交互组件。

打开预览

                <div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-10">
  
  <!-- Complex Component Section -->
  <section class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">

      <!-- Interactive Card 1 -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 1</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
        <button class="py-2 px-6 rounded-full bg-blue-500 text-white text-lg font-semibold shadow-lg hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600 transition duration-300">Learn More</button>
      </div>

      <!-- Interactive Card 2 -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 2</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
        <button class="py-2 px-6 rounded-full bg-green-500 text-white text-lg font-semibold shadow-lg hover:bg-green-600 dark:bg-green-700 dark:hover:bg-green-600 transition duration-300">Learn More</button>
      </div>

      <!-- Interactive Card 3 -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark transition-transform transform hover:scale-105">
        <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Service Title 3</h3>
        <p class="text-gray-700 dark:text-gray-300 mb-6">Detailed description of the service or feature, highlighting its benefits and value proposition.</p>
        <button class="py-2 px-6 rounded-full bg-red-500 text-white text-lg font-semibold shadow-lg hover:bg-red-600 dark:bg-red-700 dark:hover:bg-red-600 transition duration-300">Learn More</button>
      </div>
      
      <!-- Interactive Form Example -->
      <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark col-span-1 md:col-span-2 lg:col-span-3">
          <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Contact Us</h3>
          <form>
              <div class="mb-4">
                  <label for="name" class="block text-gray-700 dark:text-gray-300 mb-2">Name</label>
                  <input type="text" id="name" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-700 text-gray-800 dark:text-gray-200">
              </div>
              <div class="mb-4">
                  <label for="email" class="block text-gray-700 dark:text-gray-300 mb-2">Email</label>
                  <input type="email" id="email" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-green-500 dark:focus:ring-green-700 text-gray-800 dark:text-gray-200">
              </div>
              <div class="mb-4">
                  <label for="message" class="block text-gray-700 dark:text-gray-300 mb-2">Message</label>
                  <textarea id="message" rows="4" class="w-full px-3 py-2 rounded-lg bg-gray-100 dark:bg-gray-700 shadow-inner dark:shadow-inner-dark focus:outline-none focus:ring-2 focus:ring-red-500 dark:focus:ring-red-700 text-gray-800 dark:text-gray-200"></textarea>
              </div>
              <button type="submit" class="py-2 px-6 rounded-full bg-gray-500 text-white text-lg font-semibold shadow-lg hover:bg-gray-600 dark:bg-gray-600 dark:hover:bg-gray-500 transition duration-300">Send Message</button>
          </form>
      </div>

       <!-- Interactive Element with Image -->
        <div class="bg-gray-200 dark:bg-gray-800 rounded-xl p-8 shadow-2xl dark:shadow-2xl-dark col-span-1 md:col-span-2 lg:col-span-3 flex flex-col md:flex-row items-center">
            <img src="https://picsum.photos/seed/interactive/300/200" alt="Interactive Image" class="rounded-lg mb-6 md:mb-0 md:mr-8 shadow-xl">
            <div>
                <h3 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Interactive Feature with Image</h3>
                <p class="text-gray-700 dark:text-gray-300 mb-6">This section includes an image to make the interactive element more engaging visually.</p>
                <button class="py-2 px-6 rounded-full bg-yellow-500 text-white text-lg font-semibold shadow-lg hover:bg-yellow-600 dark:bg-yellow-700 dark:hover:bg-yellow-600 transition duration-300">Explore Feature</button>
            </div>
        </div>

    </div>
  </section>

  <!-- Custom Shadows for Neumorphism -->
  <style>
    .shadow-2xl-dark {
      box-shadow: 9px 9px 16px #1c1c1c, -9px -9px 16px #262626;
    }
    .shadow-inner-dark {
      box-shadow: inset 5px 5px 10px #1c1c1c, inset -5px -5px 10px #262626;
    }
  </style>

</div>

拟物购物车

一个使用三色配色方案的拟态购物车组件。复杂度适中，专为商业/企业网站设计。该组件是响应式的，并包含使用 Tailwind 的 dark: 前缀的暗模式支持。包含带数量和价格的商品占位符、一个小计和一个结账按钮。使用 picsum.photos 获取产品图像。

打开预览

                <div class="container mx-auto p-4 dark:bg-gray-800 dark:text-white">
    <div class="neumorphic-card p-6 rounded-xl shadow-xl dark:shadow-2xl">
        <h2 class="text-2xl font-semibold mb-6 text-center dark:text-white">Shopping Cart</h2>

        <div class="space-y-4">
            <!-- Cart Item 1 -->
            <div class="neumorphic-item p-4 rounded-lg shadow-md flex items-center dark:shadow-lg">
                <img src="https://picsum.photos/seed/item1/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md mr-4 shadow-inner dark:shadow-sm">
                <div class="flex-grow">
                    <h3 class="text-lg font-medium dark:text-white">Product Name 1</h3>
                    <p class="text-gray-600 dark:text-gray-400">Quantity: 2</p>
                    <p class="text-lg font-semibold text-blue-600 dark:text-blue-400">$49.98</p>
                </div>
                <button class="ml-4 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
            </div>

            <!-- Cart Item 2 -->
            <div class="neumorphic-item p-4 rounded-lg shadow-md flex items-center dark:shadow-lg">
                <img src="https://picsum.photos/seed/item2/100/100" alt="Product Image" class="w-16 h-16 object-cover rounded-md mr-4 shadow-inner dark:shadow-sm">
                <div class="flex-grow">
                    <h3 class="text-lg font-medium dark:text-white">Product Name 2</h3>
                    <p class="text-gray-600 dark:text-gray-400">Quantity: 1</p>
                    <p class="text-lg font-semibold text-green-600 dark:text-green-400">$24.50</p>
                </div>
                <button class="ml-4 text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-600">Remove</button>
            </div>
        </div>

        <div class="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
            <div class="flex justify-between items-center">
                <span class="text-xl font-semibold dark:text-white">Subtotal:</span>
                <span class="text-xl font-bold text-purple-600 dark:text-purple-400">$74.48</span>
            </div>
        </div>

        <div class="mt-6">
            <button class="w-full py-3 rounded-lg bg-blue-600 text-white text-lg font-semibold shadow-lg hover:bg-blue-700 dark:bg-blue-700 dark:hover:bg-blue-800 transition duration-200 ease-in-out dark:shadow-xl">Proceed to Checkout</button>
        </div>
    </div>
</div>

<style>
.neumorphic-card {
    background: #e0e0e0;
    box-shadow: 9px 9px 16px #a3a3a3, -9px -9px 16px #ffffff;
}

.dark .neumorphic-card {
    background: #374151;
    box-shadow: 9px 9px 16px #252c38, -9px -9px 16px #49566a;
}

.neumorphic-item {
     background: #e0e0e0;
     box-shadow: inset 5px 5px 10px #a3a3a3, inset -5px -5px 10px #ffffff;
}

.dark .neumorphic-item {
    background: #374151;
    box-shadow: inset 5px 5px 10px #252c38, inset -5px -5px 10px #49566a;
}
</style>

卡片组件

用于作品集的响应式黑暗模式卡片组件，具有柔和的色彩方案。

打开预览

                <!-- ./ src/components/Card.astro -->

<div class="max-w-sm mx-auto rounded-md overflow-hidden shadow-lg bg-white dark:bg-gray-800 m-4">
  <img class="w-full" src="https://picsum.photos/400/250" alt="Placeholder image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2 text-gray-800 dark:text-white">Card Title</div>
    <p class="text-gray-700 dark:text-gray-300 text-base">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
  </div>
  <div class="px-6 pt-4 pb-2">
    <span class="inline-block bg-pastel-pink rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-800 mr-2 mb-2">#tag1</span>
    <span class="inline-block bg-pastel-green rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-800 mr-2 mb-2">#tag2</span>
    <span class="inline-block bg-pastel-blue rounded-full px-3 py-1 text-sm font-semibold text-gray-700 dark:text-gray-800 mb-2">#tag3</span>
  </div>
    <div class="flex items-center px-6 py-4">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar of user">
        <div class="text-sm">
            <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
            <p class="text-gray-600 dark:text-gray-400">Aug 18, 2023</p>
        </div>
    </div>
</div>

<style>
  .bg-pastel-pink {
    background-color: #f9cdda;
  }
  .bg-pastel-green {
    background-color: #b2f2bb;
  }
  .bg-pastel-blue {
    background-color: #a7ccff;
  }
</style>

会话超时提醒组件

一个响应式、兼容黑暗主题的会话超时警报组件，采用玻璃形态风格，地球色调，使用 Tailwind CSS 的复杂布局。具有磨砂玻璃效果、模糊效果和多个适合作品集的交互元素。

打开预览

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

  <!-- Glassmorphism 배경 효과 -->
  <div class="absolute inset-0 w-full h-full bg-gradient-to-br from-amber-500/20 to-green-600/20 backdrop-filter backdrop-blur-xl z-0"></div>

  <div class="relative bg-white dark:bg-gray-800 bg-opacity-30 dark:bg-opacity-30 rounded-lg shadow-lg p-6 max-w-sm mx-auto z-10 border border-gray-200 dark:border-gray-700">
    
    <!-- 헤더 -->
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-100">세션 타임아웃</h3>
      <svg class="w-5 h-5 text-gray-600 dark:text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
    </div>

    <!-- 내용 -->
    <div class="text-sm text-gray-700 dark:text-gray-200 mb-6">
      <p>보안상의 이유로 회원님의 세션이 곧 만료됩니다. 계속 활동하려면 "세션 연장" 버튼을 클릭해 주세요.</p>
      <p class="mt-2 font-semibold">남은 시간: <span class="text-amber-700 dark:text-amber-400">05:00</span></p>
    </div>

    <!-- 프로그레스 바 (예시) -->
    <div class="w-full bg-gray-300 dark:bg-gray-600 rounded-full h-2 mb-6">
      <div class="bg-green-600 dark:bg-green-500 h-2 rounded-full" style="width: 80%;"></div>
    </div>

    <!-- 버튼 -->
    <div class="flex justify-end space-x-3">
      <button class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-200 border border-transparent rounded-md hover:underline focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 dark:focus:ring-offset-gray-900">취소</button>
      <button class="px-4 py-2 text-sm font-medium text-white bg-amber-600 border border-transparent rounded-md shadow-sm hover:bg-amber-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-amber-500 dark:focus:ring-offset-gray-900 dark:bg-amber-700 dark:hover:bg-amber-800">세션 연장</button>
    </div>

  </div>
</div>

玻璃化卡片组件

玻璃形态卡片组件，具有鲜艳的色彩。响应式设计，支持暗主题。使用 picsum.photos 来获取图像，使用 randomuser.me 来获取头像。

打开预览

                <div class="p-10 dark:bg-gray-900 bg-gray-100">
  <div class="container mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
      <!-- Card 1 -->
      <div class="relative bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-xl overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/unsplash/600/400" alt="Card Image">
        <div class="p-6">
          <div class="absolute top-0 right-0 -mt-4 mr-4 px-4 py-2 bg-purple-500 text-white rounded-full text-xs font-semibold uppercase">New</div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Blog Post Title</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
          <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">John Doe</p>
              <p class="text-gray-600 dark:text-gray-400">Aug 18, 2023</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 2 -->
      <div class="relative bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-xl overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/nature/600/400" alt="Card Image">
        <div class="p-6">
           <div class="absolute top-0 right-0 -mt-4 mr-4 px-4 py-2 bg-pink-500 text-white rounded-full text-xs font-semibold uppercase">Trending</div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Another Blog Post</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
             <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Jane Smith</p>
              <p class="text-gray-600 dark:text-gray-400">Aug 17, 2023</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Card 3 -->
      <div class="relative bg-white dark:bg-gray-800 bg-opacity-60 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg rounded-lg shadow-xl overflow-hidden">
        <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/tech/600/400" alt="Card Image">
        <div class="p-6">
             <div class="absolute top-0 right-0 -mt-4 mr-4 px-4 py-2 bg-yellow-500 text-white rounded-full text-xs font-semibold uppercase">Featured</div>
          <h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-2">Yet Another Post</h3>
          <p class="text-gray-700 dark:text-gray-300 text-sm mb-4">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
             <div class="flex items-center">
            <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Avatar">
            <div class="text-sm">
              <p class="text-gray-900 dark:text-white leading-none">Peter Jones</p>
              <p class="text-gray-600 dark:text-gray-400">Aug 16, 2023</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

类别