搜索组件

类别

组件内容显示组件

内容显示组件

在网站上呈现和组织内容的组件

Playful_Farming_Content_Card

一款简单、有趣且对比度高的内容显示卡，适用于农业和养殖网站，具有圆润元素和深色模式支持。

                <div class="p-4 sm:p-6 bg-green-50 dark:bg-gray-800 font-sans">
  <div class="max-w-sm mx-auto bg-white dark:bg-gray-900 rounded-3xl shadow-xl overflow-hidden transform transition-all duration-300 hover:scale-105">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/400/300?random=1" alt="Farm landscape">
    <div class="p-6 text-center">
      <h3 class="text-2xl sm:text-3xl font-extrabold text-green-700 dark:text-green-400 mb-3 leading-tight">Harvesting Joy!</h3>
      <p class="text-gray-600 dark:text-gray-300 text-base leading-relaxed mb-6">
        Discover the bounty of nature with our fresh, organic produce. From farm to table, we bring you the best!
      </p>
      <a href="#" class="inline-flex items-center px-6 py-3 rounded-full bg-yellow-400 text-green-800 dark:bg-yellow-500 dark:text-green-900 font-bold text-lg shadow-md hover:bg-yellow-500 dark:hover:bg-yellow-600 transform transition-transform duration-200 hover:-translate-y-1">
        Learn More
        <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10.293 15.707a1 1 0 010-1.414L14.586 10l-4.293-4.293a1 1 0 111.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path><path fill-rule="evenodd" d="M4.293 15.707a1 1 0 010-1.414L8.586 10 4.293 5.707a1 1 0 011.414-1.414l5 5a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
      </a>
    </div>
  </div>
</div>

Material Design Triadic 仪表板卡片

一个简单、响应式的仪表板内容显示组件，具有 Material Design 美学，使用三色配色方案和深色模式支持。适用于显示关键指标或信息。

打开预览

                <div class="p-4 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen flex items-center justify-center font-sans">
  <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 auto-rows-fr">

    <!-- Metric Card 1 (Red/Pinkish) -->
    <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
      <div class="relative p-6 pt-16">
        <div class="absolute top-0 left-0 right-0 h-16 bg-red-500 dark:bg-red-700 rounded-t-lg"></div>
        <div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-red-200 dark:border-red-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-600 dark:text-red-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L19.5 7.5M9.75 17V10" />
            <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 16.5A.5.5 0 1013.5 15.5A.5.5 0 0013.5 16.5M17.5 12.5A.5.5 0 1017.5 11.5A.5.5 0 0017.5 12.5" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">Total Sales</h3>
        <p class="text-4xl font-extrabold text-red-600 dark:text-red-400 text-center mb-4">$12,345</p>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">+5% from last month</p>
      </div>
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
        <a href="#" class="text-red-600 dark:text-red-400 font-medium hover:underline text-sm">View Details</a>
      </div>
      <div class="absolute inset-0 bg-red-100 dark:bg-red-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    </div>

    <!-- Metric Card 2 (Blue/Cyan) -->
    <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
      <div class="relative p-6 pt-16">
        <div class="absolute top-0 left-0 right-0 h-16 bg-blue-500 dark:bg-blue-700 rounded-t-lg"></div>
        <div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-blue-200 dark:border-blue-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-blue-600 dark:text-blue-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M5.121 17.892A13.914 13.914 0 0112 16c2.582 0 5.121.75 7.029 2.019M12 15a4 4 0 100-8 4 4 0 000 8z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">New Users</h3>
        <p class="text-4xl font-extrabold text-blue-600 dark:text-blue-400 text-center mb-4">789</p>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">+15% week over week</p>
      </div>
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
        <a href="#" class="text-blue-600 dark:text-blue-400 font-medium hover:underline text-sm">User Analytics</a>
      </div>
      <div class="absolute inset-0 bg-blue-100 dark:bg-blue-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    </div>

    <!-- Metric Card 3 (Green/Lime) -->
    <div class="col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden relative group">
      <div class="relative p-6 pt-16">
        <div class="absolute top-0 left-0 right-0 h-16 bg-green-500 dark:bg-green-700 rounded-t-lg"></div>
        <div class="relative z-10 -mt-10 mb-4 mx-auto w-20 h-20 rounded-full bg-white dark:bg-gray-700 flex items-center justify-center shadow-md border-4 border-green-200 dark:border-green-800">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-600 dark:text-green-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M7 12l3-3m0 0l3 3m-3-3v8m0-13a9 9 0 110 18A9 9 0 0112 3z" />
          </svg>
        </div>
        <h3 class="text-2xl font-bold mb-2 text-gray-900 dark:text-white text-center">Bounce Rate</h3>
        <p class="text-4xl font-extrabold text-green-600 dark:text-green-400 text-center mb-4">3.7<span class="text-xl">%</span></p>
        <p class="text-sm text-gray-600 dark:text-gray-400 text-center">-0.5% from previous period</p>
      </div>
      <div class="p-4 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700 text-center">
        <a href="#" class="text-green-600 dark:text-green-400 font-medium hover:underline text-sm">View Report</a>
      </div>
      <div class="absolute inset-0 bg-green-100 dark:bg-green-900 opacity-0 group-hover:opacity-20 transition-opacity duration-300"></div>
    </div>

  </div>
</div>

内容显示组件组件

具有微交互、灰度颜色和中等复杂性的内容显示组件，专为支持响应式深色主题的投资组合而设计。

打开预览

                
<div class="p-8 bg-white dark:bg-gray-900 min-h-screen flex items-center justify-center">
  <div class="max-w-4xl w-full grid grid-cols-1 md:grid-cols-2 gap-8">

    <!-- Article Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:hover:bg-gray-700">
      <img class="w-full h-48 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://picsum.photos/seed/picsum1/600/400" alt="Article Thumbnail">
      <div class="p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">Project Alpha: A Deep Dive</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Explore the intricacies of Project Alpha, a landmark achievement in innovative design and engineering.</p>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500 dark:text-gray-400">Read Time: 7 min</span>
          <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-all duration-300 flex items-center">
            Learn More
            <svg class="ml-1 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
    </div>

    <!-- Article Card 2 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 dark:bg-gray-800 dark:hover:bg-gray-700">
      <img class="w-full h-48 object-cover transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://picsum.photos/seed/picsum2/600/400" alt="Article Thumbnail">
      <div class="p-6">
        <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-100 mb-2 group-hover:text-gray-900 dark:group-hover:text-white transition-colors duration-300">The Future of UI/UX: Trends and Predictions</h3>
        <p class="text-gray-600 dark:text-gray-400 text-sm mb-4">Dive into the exciting world of UI/UX and discover what lies ahead for cutting-edge design.</p>
        <div class="flex justify-between items-center">
          <span class="text-xs text-gray-500 dark:text-gray-400">Read Time: 10 min</span>
          <a href="#" class="text-gray-700 dark:text-gray-200 hover:text-black dark:hover:text-white transition-all duration-300 flex items-center">
            Learn More
            <svg class="ml-1 w-4 h-4 transform translate-x-0 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
          </a>
        </div>
      </div>
      <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
    </div>

    <!-- Testimonial Card 1 -->
    <div class="group relative overflow-hidden rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 p-6 dark:bg-gray-800 dark:hover:bg-gray-700 md:col-span-2 flex items-start space-x-4">
        <img class="w-16 h-16 rounded-full object-cover shadow-md transform scale-100 group-hover:scale-105 transition-transform duration-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
        <div>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed mb-4">"This component embodies the perfect blend of subtle animations and clean aesthetics. It

内容显示组件组件

一个简单的响应式内容显示组件，具有 glassmorphism 效果、深色主题支持和互补配色方案，适用于博客或内容使用。

打开预览

                <div class="min-h-screen bg-gradient-to-br from-purple-200 via-pink-200 to-red-200 dark:from-gray-900 dark:via-purple-900 dark:to-pink-900 flex items-center justify-center p-4">
  <div class="backdrop-filter backdrop-blur-lg bg-opacity-20 bg-white dark:bg-gray-800 dark:bg-opacity-20 rounded-xl p-6 shadow-xl border border-gray-200 dark:border-gray-700 max-w-2xl w-full">
    <h1 class="text-3xl font-bold text-gray-800 dark:text-white mb-4">Glassmorphism Content Card</h1>
    
    <div class="mb-4">
      <img src="https://picsum.photos/600/300" alt="Blog Post Image" class="rounded-lg shadow-md mb-4">
      <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200 mb-2">Lorem Ipsum Dolor Sit Amet</h2>
      <p class="text-gray-600 dark:text-gray-300 leading-relaxed">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      </p>
    </div>
    
    <div class="flex items-center justify-between border-t border-gray-300 dark:border-gray-600 pt-4 mt-4">
      <div class="flex items-center">
        <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar" class="w-10 h-10 rounded-full mr-3 border-2 border-purple-500 dark:border-pink-500">
        <div>
          <p class="font-semibold text-gray-700 dark:text-white">John Doe</p>
          <p class="text-sm text-gray-500 dark:text-gray-400">August 15, 2023</p>
        </div>
      </div>
      <a href="#" class="text-purple-600 dark:text-pink-400 hover:underline font-medium">Read More &rarr;</a>
    </div>
  </div>
</div>

内容显示组件组件

一个简单而生动的内容显示组件，具有微交互、响应式设计和深色主题支持，适用于博客和内容消费。将 picsum.photos 用于图像，将 randomuser.me 用于头像。

打开预览

                <div class="min-h-screen bg-gradient-to-br from-purple-400 via-pink-500 to-red-500 dark:from-gray-900 dark:via-gray-800 dark:to-black p-4 flex items-center justify-center">
  <div class="max-w-md w-full bg-white dark:bg-gray-700 rounded-xl shadow-2xl overflow-hidden transform transition-all duration-300 hover:scale-105 hover:shadow-purple-500/50 dark:hover:shadow-red-500/50">
    <div class="relative">
      <img class="w-full h-48 object-cover transition-opacity duration-300 hover:opacity-80" src="https://picsum.photos/600/400?random=1" alt="Article Thumbnail">
      <div class="absolute bottom-0 left-0 bg-black bg-opacity-50 dark:bg-opacity-70 text-white px-3 py-1 rounded-tr-lg text-sm font-semibold">
        Article
      </div>
    </div>
    <div class="p-5">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2 transition-colors duration-300 hover:text-purple-700 dark:hover:text-red-400">
        The Future of Web Development
      </h3>
      <p class="text-gray-700 dark:text-gray-300 text-sm mb-4 leading-relaxed">
        Explore the exciting new trends and technologies shaping the web, from AI-powered tools to immersive user experiences.
      </p>
      <div class="flex items-center justify-between">
        <div class="flex items-center space-x-3">
          <img class="w-10 h-10 rounded-full object-cover border-2 border-purple-500 dark:border-red-500" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Author Avatar">
          <div>
            <p class="text-gray-800 dark:text-white font-semibold text-sm">John Doe</p>
            <p class="text-gray-500 dark:text-gray-400 text-xs">2 hours ago</p>
          </div>
        </div>
        <a href="#" class="text-purple-600 dark:text-red-400 hover:text-purple-800 dark:hover:text-red-600 transition-colors duration-300 font-medium text-sm flex items-center group">
          Read More
          <svg class="ml-1 w-4 h-4 transform transition-transform duration-300 group-hover:translate-x-1" 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 5l7 7m0 0l-7 7m7-7H3"></path></svg>
        </a>
      </div>
    </div>
  </div>
</div>

Pastel3DBlogContentCard

用于博客或内容部分的响应式内容显示组件，使用 Tailwind CSS 设计。它具有简单的布局，具有 3D 风格的美感，使用阴影和悬停效果。配色方案是浅色模式的柔和粉彩，具有兼容的深色模式主题。该组件包括图像、标题、元数据（作者/日期）、摘录和“阅读更多”按钮。占位符图像使用 picsum.photos 和 randomuser.me。

打开预览

                <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pastel 3D Blog Content Card</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        // You can define specific pastel colors here if needed,
                        // but for this example, we primarily use Tailwind's default palette
                        // that offers pastel-like shades (e.g., sky-50, sky-100, sky-200).
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-sky-50 dark:bg-slate-900 font-sans">

    <div class="min-h-screen flex flex-col justify-center items-center p-4 sm:p-8">
        <div class="text-center mb-8">
            <h1 class="text-3xl sm:text-4xl font-bold text-slate-800 dark:text-white">Content Display Component</h1>
            <p class="text-slate-600 dark:text-slate-400">3D Design, Pastel Colors, Simple Complexity</p>
        </div>

        <article class="bg-white dark:bg-slate-800 rounded-xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-transform duration-300 ease-out max-w-2xl w-full group">
            <!-- Image Section -->
            <div class="relative aspect-video overflow-hidden">
                <img src="https://picsum.photos/seed/contentcard3d/800/450" alt="Abstract tech background" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
                <div class="absolute inset-0 bg-gradient-to-t from-black/40 via-black/10 to-transparent"></div>
            </div>

            <!-- Content Section -->
            <div class="p-6 sm:p-8">
                <!-- Title -->
                <h2 class="text-2xl sm:text-3xl font-bold text-sky-600 dark:text-sky-300 mb-3 group-hover:text-sky-500 dark:group-hover:text-sky-200 transition-colors duration-300">
                    Exploring the Depths of 3D Web Design
                </h2>

                <!-- Meta Information -->
                <div class=

复古社交媒体明信片

具有 80 年代/90 年代复古美学的响应式社交媒体明信片组件，使用带有紫红色口音的类似配色方案（天空、蓝绿色、紫色）。具有深色模式支持和交互式悬停效果。内容包括用户头像、用户名、时间戳、文本帖子、图像和作按钮（点赞、评论、分享）。使用 Tailwind CSS 构建。

打开预览

                <div class="min-h-screen bg-stone-200 dark:bg-slate-900 py-8 flex items-center justify-center">
  <div class="max-w-xl w-full mx-auto p-1 bg-gradient-to-br from-fuchsia-500 via-purple-500 to-cyan-500 rounded-xl shadow-2xl">
    <div class="bg-stone-100 dark:bg-slate-800 rounded-lg p-6">
      <!-- Header -->
      <div class="flex items-center space-x-4 mb-6 pb-4 border-b-2 border-dashed border-sky-300 dark:border-sky-700">
        <img class="w-16 h-16 rounded-full border-4 border-fuchsia-500 dark:border-fuchsia-400 object-cover shadow-md" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
        <div>
          <p class="text-xl font-bold text-purple-600 dark:text-purple-400 hover:underline cursor-pointer">RetroGal92</p>
          <p class="text-sm text-slate-500 dark:text-slate-400">Posted 2 hours ago</p>
        </div>
        <div class="ml-auto">
           <svg class="w-6 h-6 text-slate-500 dark:text-slate-400 hover:text-sky-600 dark:hover:text-sky-300 cursor-pointer transition-colors duration-150" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
        </div>
      </div>

      <!-- Content -->
      <div class="mb-6">
        <p class="text-slate-700 dark:text-slate-200 text-lg leading-relaxed mb-4">
          Just vibin' with these retro tunes! <span class="text-2xl">🎧</span> Anyone else remember mixtapes and oversized headphones? Good times! <span class="text-yellow-400">✨</span>
          <a href="#" class="text-teal-600 dark:text-teal-400 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 font-semibold transition-colors duration-150">#RetroLife</a>
          <a href="#" class="text-teal-600 dark:text-teal-400 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 font-semibold transition-colors duration-150">#90sKid</a>
        </p>
        <img class="w-full h-auto rounded-lg shadow-lg border-2 border-teal-500 dark:border-teal-400 object-cover" src="https://picsum.photos/seed/retroscene1/600/400" alt="Retro Scene">
      </div>

      <!-- Actions -->
      <div class="flex items-center justify-between text-slate-600 dark:text-slate-300">
        <button class="flex items-center space-x-2 hover:text-fuchsia-500 dark:hover:text-fuchsia-400 transition-colors duration-200 group">
          <svg class="w-6 h-6 group-hover:fill-current transition-all duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
          <span class="font-medium group-hover:font-bold text-sm sm:text-base">1.2k Likes</span>
        </button>
        <button class="flex items-center space-x-2 hover:text-sky-600 dark:hover:text-sky-400 transition-colors duration-200 group">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
          <span class="font-medium group-hover:font-bold text-sm sm:text-base">87 Comments</span>
        </button>
        <button class="flex items-center space-x-2 hover:text-teal-600 dark:hover:text-teal-400 transition-colors duration-200 group">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8M16 6l-4-4m0 0l-4 4m4-4v12"></path></svg>
          <span class="font-medium group-hover:font-bold text-sm sm:text-base">Share</span>
        </button>
      </div>
    </div>
  </div>
</div>

简单内容展示

一个简单的内容显示组件，具有响应式设计和深色主题支持，使用 Tailwind CSS。

打开预览

                <div class="container mx-auto p-4 max-w-sm">
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://picsum.photos/seed/123/400/300" alt="Placeholder image">
    <div class="p-4">
      <h2 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Article Title</h2>
      <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">This is a brief description of the article content. It provides a sneak peek into what the user can expect to read.</p>
      <div class="flex items-center mt-4">
        <img class="w-8 h-8 rounded-full mr-2" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Author avatar">
        <span class="text-gray-700 dark:text-gray-400 text-sm">John Doe</span>
      </div>
    </div>
  </div>
</div>

内容展示组件

一个响应式社交媒体内容显示组件，采用拟物化风格设计，色彩柔和，具有多个交互元素和深色模式支持。

打开预览

                <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-4 max-w-lg mx-auto">
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg">
        <div class="ml-4">
            <h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
            <p class="text-sm text-gray-600 dark:text-gray-400">@johndoe</p>
        </div>
    </div>
    <p class="text-gray-800 dark:text-gray-300 mb-4">This is an example of skeuomorphic design in a social media component. The layout mimics a real-world interaction device.</p>
    <img src="https://picsum.photos/400/200?random=1" alt="Content Image" class="rounded-lg mb-4 shadow-lg">
    <div class="flex justify-between items-center">
        <button class="bg-pink-300 dark:bg-pink-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-pink-400 dark:hover:bg-pink-500 transition">Like</button>
        <button class="bg-blue-300 dark:bg-blue-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-blue-400 dark:hover:bg-blue-500 transition">Comment</button>
        <button class="bg-green-300 dark:bg-green-600 text-gray-800 dark:text-gray-200 px-4 py-2 rounded-lg shadow hover:bg-green-400 dark:hover:bg-green-500 transition">Share</button>
    </div>
</div>

内容显示组件

一个响应式组件，用于以深色模式样式和柔和的配色方案展示作品或产品。

打开预览

                <div class="bg-gray-800 dark:bg-gray-900 p-6 rounded-lg shadow-lg max-w-md mx-auto">
  <h2 class="text-2xl font-bold text-pink-300 dark:text-pink-200 mb-4">Project Title</h2>
  <img src="https://picsum.photos/400/200" alt="Project Image" class="rounded-lg mb-4 shadow-md">
  <p class="text-gray-300 dark:text-gray-200 mb-4">This is a brief description of the project. It showcases the unique features and the value it brings to users.</p>
  <div class="flex items-center mb-4">
    <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="w-10 h-10 rounded-full mr-2 shadow-lg">
    <span class="text-gray-400 dark:text-gray-200">Posted by John Doe</span>
  </div>
  <a href="#" class="inline-block bg-pink-500 hover:bg-pink-400 text-white font-semibold py-2 px-4 rounded mt-2">View More</a>
</div>