搜索组件

类别

所有组件

浏览所有可用的 Tailwind CSS 组件

成功消息组件

一个成功消息组件，设计为深色模式，用于阅读博客/内容。它具有类似的配色方案并且响应迅速。

                <div class="bg-gray-900 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <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 mr-3">
        <div>
            <p class="font-medium">John Doe</p>
            <p class="text-sm text-gray-400">a moment ago</p>
        </div>
    </div>
    <p class="mb-4">Your changes have been saved successfully!</p>
    <img src="https://picsum.photos/seed/success/400/200" alt="Success Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        View Details
    </button>
</div>

<div class="bg-gray-800 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg mt-4">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">Jane Smith</p>
            <p class="text-sm text-gray-400">a few moments ago</p>
        </div>
    </div>
    <p class="mb-4">Your email has been verified successfully!</p>
    <img src="https://picsum.photos/seed/email_verified/400/200" alt="Email Verification Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        Check Inbox
    </button>
</div>

<div class="bg-gray-700 text-gray-200 p-6 rounded-lg max-w-lg mx-auto shadow-lg mt-4">
    <h2 class="text-xl font-semibold mb-4">Success!</h2>
    <div class="flex items-center mb-4">
        <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full mr-3">
        <div>
            <p class="font-medium">Michael Brown</p>
            <p class="text-sm text-gray-400">just now</p>
        </div>
    </div>
    <p class="mb-4">Your profile picture has been updated!</p>
    <img src="https://picsum.photos/seed/profile_update/400/200" alt="Profile Update Image" class="rounded-lg mb-4" />
    <button class="bg-green-600 hover:bg-green-500 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-green-400">
        View Profile
    </button>
</div>

拟物化身份验证组件

拟物化身份验证组件，具有类似的配色方案和用于博客/内容目的的复杂布局，响应式和深色主题支持。

打开预览

                <div class="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-10 font-sans">
  <div class="bg-white dark:bg-gray-800 shadow-2xl rounded-3xl p-10 max-w-md w-full transform transition duration-500 hover:scale-105 border-8 border-gray-200 dark:border-gray-700">
    <div class="text-center mb-10">
      <svg class="w-20 h-20 mx-auto 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 11c0 3.517-1.045 6.705-3 9.5m0-9.5a5 5 0 115 5v4.5M12 11C9.49 14.49 8 17.5 8 21m4-10a5 5 0 015 5v4.5m-16-.5h16m-7 0h.01"></path></svg>
      <h1 class="text-3xl font-extrabold text-gray-800 dark:text-white mt-4">Welcome Back!</h1>
      <p class="text-gray-500 dark:text-gray-400 mt-2">Sign in to continue to your account.</p>
    </div>

    <form>
      <div class="mb-6">
        <label for="email" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform -translate-y-2">Email Address</label>
        <input type="email" id="email" class="shadow-inner appearance-none border rounded-xl w-full py-4 px-5 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your email">
      </div>

      <div class="mb-8">
        <label for="password" class="block text-gray-700 dark:text-gray-300 text-sm font-bold mb-2 transform -translate-y-2">Password</label>
        <input type="password" id="password" class="shadow-inner appearance-none border rounded-xl w-full py-4 px-5 text-gray-700 dark:text-gray-200 leading-tight focus:outline-none focus:ring-4 focus:ring-yellow-500 focus:border-transparent dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400" placeholder="Enter your password">
      </div>

      <div class="flex items-center justify-between mb-8">
        <div class="flex items-center">
          <input id="remember_me" type="checkbox" class="form-checkbox h-5 w-5 text-yellow-600 dark:text-yellow-500 rounded border-gray-300 dark:border-gray-600 transition duration-150 ease-in-out">
          <label for="remember_me" class="ml-2 block text-sm text-gray-900 dark:text-gray-300">Remember me</label>
        </div>

        <a href="#" class="text-sm text-yellow-600 hover:text-yellow-700 dark:text-yellow-500 dark:hover:text-yellow-600 transition duration-200 ease-in-out">Forgot Password?</a>
      </div>

      <button type="submit" class="w-full bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white font-bold py-4 px-6 rounded-2xl focus:outline-none focus:shadow-outline transform transition duration-300 hover:scale-105 shadow-lg shadow-yellow-300/50 dark:shadow-lg dark:shadow-yellow-700/50">
        Sign In
      </button>
    </form>

    <div class="mt-8 text-center text-gray-600 dark:text-gray-400">
      Don't have an account? <a href="#" class="text-yellow-600 hover:text-yellow-700 dark:text-yellow-500 dark:hover:text-yellow-600 transition duration-200 ease-in-out font-bold">Sign Up</a>
    </div>
  </div>
</div>

拟物化媒体嵌入组件

适用于商业网站的中构媒体嵌入组件，具有响应式设计和使用互补色的深色主题支持。

打开预览

                <div class="flex justify-center items-center min-h-screen bg-gray-200 dark:bg-gray-900 p-10">
  <div class="neumorphic-card bg-gray-300 dark:bg-gray-800 p-8 rounded-xl w-full max-w-4xl">
    <div class="flex flex-col md:flex-row space-y-8 md:space-y-0 md:space-x-8">
      <!-- Media Embed -->
      <div class="flex-1 neumorphic-inset p-4 rounded-lg overflow-hidden">
        <iframe class="w-full aspect-video rounded-lg" src="https://www.youtube.com/embed/dQw4w9WgXcQ" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-screen" allowfullscreen></iframe>
      </div>
      <!-- Content Area -->
      <div class="flex-1 flex flex-col justify-between">
        <div>
          <h3 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-4">Media Title</h3>
          <p class="text-gray-700 dark:text-gray-300 mb-6">This is a description of the media content. It provides context and details about the video or audio being embedded. The design uses subtle shadows and highlights to create the neumorphic effect, visually pushing the content forward.</p>
        </div>
        <div class="flex items-center mt-4">
          <img class="w-12 h-12 rounded-full mr-4 neumorphic-avatar" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Author Avatar">
          <div>
            <p class="font-semibold text-gray-800 dark:text-gray-200">Author Name</p>
            <p class="text-sm text-gray-600 dark:text-gray-400">Date Published</p>
          </div>
        </div>
        <div class="mt-6 flex space-x-4">
          <button class="neumorphic-button text-gray-800 dark:text-gray-200 font-semibold py-2 px-6 rounded-full hover:scale-105 transition duration-200">Learn More</button>
          <button class="neumorphic-button text-gray-800 dark:text-gray-200 font-semibold py-2 px-6 rounded-full hover:scale-105 transition duration-200">Share</button>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.neumorphic-card {
  box-shadow: 9px 9px 16px rgb(163,177,198,.6), -9px -9px 16px rgba(255,255,255, .5);
}
.dark .neumorphic-card {
  box-shadow: 9px 9px 16px rgb(0,0,0,.6), -9px -9px 16px rgba(30,30,30, .5);
}

.neumorphic-inset {
  box-shadow: inset 5px 5px 12px rgb(163,177,198,.6), inset -5px -5px 12px rgba(255,255,255, .5);
}
.dark .neumorphic-inset {
   box-shadow: inset 5px 5px 12px rgb(0,0,0,.6), inset -5px -5px 12px rgba(30,30,30, .5);
}

.neumorphic-avatar {
    box-shadow: 3px 3px 7px rgb(163,177,198,.6), -3px -3px 7px rgba(255,255,255, .5);
}
.dark .neumorphic-avatar {
    box-shadow: 3px 3px 7px rgb(0,0,0,.6), -3px -3px 7px rgba(30,30,30, .5);
}

.neumorphic-button {
    box-shadow: 5px 5px 10px rgb(163,177,198,.6), -5px -5px 10px rgba(255,255,255, .5);
    transition: all 0.2s ease-in-out;
}

.neumorphic-button:not(:active):hover {
    box-shadow: 7px 7px 14px rgb(163,177,198,.7), -7px -7px 14px rgba(255,255,255, .6);
}

.dark .neumorphic-button {
    box-shadow: 5px 5px 10px rgb(0,0,0,.6), -5px -5px 10px rgba(30,30,30, .5);
}

.dark .neumorphic-button:not(:active):hover {
    box-shadow: 7px 7px 14px rgb(0,0,0,.7), -7px -7px 14px rgba(30,30,30, .6);
}

.neumorphic-button:active {
    box-shadow: inset 3px 3px 7px rgb(163,177,198,.6), inset -3px -3px 7px rgba(255,255,255, .5);
}

.dark .neumorphic-button:active {
    box-shadow: inset 3px 3px 7px rgb(0,0,0,.6), inset -3px -3px 7px rgba(30,30,30, .5);
}
</style>

社交媒体侧边导航组件

响应式社交媒体侧边栏导航组件，支持深色主题，使用粗野主义、大地色调和复杂设计原则。无需 JavaScript。

打开预览

                <div class="flex h-screen bg-stone-100 dark:bg-stone-900">

  <!-- Sidebar -->
  <div class="w-64 bg-stone-300 dark:bg-stone-800 p-6 space-y-6 transform -translate-x-full md:translate-x-0 transition-transform duration-200 ease-in-out" id="sidebar">
    
    <!-- Profile Section -->
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full border-4 border-stone-900 dark:border-stone-100" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
      <div>
        <h2 class="text-xl font-bold text-stone-900 dark:text-stone-100">Username</h2>
        <p class="text-sm text-stone-700 dark:text-stone-300">@userhandle</p>
      </div>
    </div>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Navigation -->
    <nav class="space-y-4">
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Feed</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Profile</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Messages</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Notifications</a>
      <a href="#" class="block text-stone-900 dark:text-stone-100 text-lg font-semibold hover:underline focus:underline">Settings</a>
    </nav>

    <hr class="border-stone-900 dark:border-stone-100">

    <!-- Footer Links -->
    <div class="flex flex-wrap gap-2 text-sm text-stone-700 dark:text-stone-300">
      <a href="#" class="hover:underline focus:underline">About</a>
      <a href="#" class="hover:underline focus:underline">Help</a>
      <a href="#" class="hover:underline focus:underline">Terms</a>
      <a href="#" class="hover:underline focus:underline">Privacy</a>
    </div>

  </div>

  <!-- Content Area - Example -->
  <div class="flex-1 p-6">
    <h1 class="text-2xl font-bold text-stone-900 dark:text-stone-100">Main Content Area</h1>
    </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>

评论区组件

具有微交互的注释部分组件，柔和的配色方案，仪表板的中等复杂性，响应式深色主题支持，使用 Tailwind CSS。图片来自 picsum.photos 的图像，randomuser.me 的头像。无 JavaScript。

打开预览

                <div class="container mx-auto p-4">
  <!-- Comments Section -->
  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6">
    <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Comments</h2>

    <!-- New Comment Input -->
    <div class="flex items-start mb-6">
      <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
      <div class="flex-grow">
        <textarea class="w-full p-3 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:placeholder-gray-400" rows="3" placeholder="Add a comment..."></textarea>
        <button class="mt-2 px-4 py-2 bg-blue-200 text-blue-800 rounded-md hover:bg-blue-300 focus:outline-none focus:ring-2 focus:ring-blue-300 dark:bg-blue-700 dark:text-white dark:hover:bg-blue-800">Post Comment</button>
      </div>
    </div>

    <!-- Existing Comments -->
    <div class="space-y-6">
      <!-- Comment 1 -->
      <div class="flex items-start">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
        <div class="flex-grow bg-gray-100 dark:bg-gray-700 rounded-md p-4">
          <div class="flex justify-between items-center mb-2">
            <span class="font-semibold text-gray-800 dark:text-white">John Doe</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300">This is a very insightful comment. I really appreciate the details provided.</p>
          <div class="flex items-center mt-3">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out">
              <svg class="w-4 h-4 mr-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 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H5v-7h3m4 0hക്കായി-3m0 0l-1.59-1.59a2 2 0 010-2.82l1.59-1.59v6z"></path></svg>
              <span class="text-sm">Like (5)</span>
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 ml-4 transition duration-200 ease-in-out">
              <svg class="w-4 h-4 mr-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.96 9.96 0 01-5.012-1.39l-3 3v-3.032A8.96 8.96 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span class="text-sm">Reply</span>
            </button>
          </div>
        </div>
      </div>

      <!-- Comment 2 -->
      <div class="flex items-start">
        <img class="w-10 h-10 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/2.jpg" alt="User Avatar">
        <div class="flex-grow bg-gray-100 dark:bg-gray-700 rounded-md p-4">
          <div class="flex justify-between items-center mb-2">
            <span class="font-semibold text-gray-800 dark:text-white">Jane Smith</span>
            <span class="text-sm text-gray-500 dark:text-gray-400">Yesterday</span>
          </div>
          <p class="text-gray-700 dark:text-gray-300">Thanks for the great post! Very helpful.</p>
          <div class="flex items-center mt-3">
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-blue-500 dark:hover:text-blue-400 transition duration-200 ease-in-out">
              <svg class="w-4 h-4 mr-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 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21H5v-7h3m4 0hത്തിനായി-3m0 0l-1.59-1.59a2 2 0 010-2.82l1.59-1.59v6z"></path></svg>
              <span class="text-sm">Like (12)</span>
            </button>
            <button class="flex items-center text-gray-600 dark:text-gray-400 hover:text-green-500 dark:hover:text-green-400 ml-4 transition duration-200 ease-in-out">
              <svg class="w-4 h-4 mr-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="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.96 9.96 0 01-5.012-1.39l-3 3v-3.032A8.96 8.96 0 013 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
              <span class="text-sm">Reply</span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

导航组件

专为产品组合设计的响应式导航组件，具有微交互和深色主题支持。

打开预览

                <nav class="bg-gray-800 text-white dark:bg-gray-900 p-4">
    <div class="container mx-auto flex justify-between items-center">
        <div class="flex items-center space-x-4">
            <a href="#" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Home</a>
            <a href="#portfolio" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Portfolio</a>
            <a href="#about" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">About</a>
            <a href="#contact" class="text-lg font-semibold hover:text-blue-400 dark:hover:text-blue-300 transition duration-300">Contact</a>
        </div>
        <div class="flex items-center space-x-4">
            <a href="#" class="py-2 px-4 bg-blue-600 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 rounded transition duration-300">Login</a>
            <a href="#" class="py-2 px-4 bg-blue-600 hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600 rounded transition duration-300">Sign Up</a>
        </div>
    </div>
</nav>

<div class="bg-gray-100 text-black dark:bg-gray-800 dark:text-white">
    <div class="container mx-auto p-8">
        <h1 class="text-3xl font-bold mb-4">My Portfolio</h1>
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
            <div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
                <img src="https://picsum.photos/400/300?random=1" alt="Project 1" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h2 class="text-xl font-semibold">Project Title 1</h2>
                    <p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
                <img src="https://picsum.photos/400/300?random=2" alt="Project 2" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h2 class="text-xl font-semibold">Project Title 2</h2>
                    <p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-700 rounded shadow-lg overflow-hidden transform transition duration-500 hover:scale-105">
                <img src="https://picsum.photos/400/300?random=3" alt="Project 3" class="w-full h-32 object-cover">
                <div class="p-4">
                    <h2 class="text-xl font-semibold">Project Title 3</h2>
                    <p class="text-gray-600 dark:text-gray-300">Brief description of the project.</p>
                </div>
            </div>
        </div>
    </div>
</div>

信息图组件

作品集的信息图表组件 - Material Design、Analogous color scheme、中等复杂度、响应式、深色主题支持

打开预览

                <div class="container mx-auto py-12 px-4">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">

    <!-- Infographic Card 1 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <div class="p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0 bg-blue-500 dark:bg-blue-700 rounded-full p-3">
            <svg class="h-6 w-6 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="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3-.895 3-2-1.343-2-3-2z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12c0 4.418-4.03 8-9 8a9.004 9.004 0 01-7.493-3.577L3 16"></path></svg>
          </div>
          <div class="ml-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Project Completion</h3>
          </div>
        </div>
        <p class="mt-4 text-gray-600 dark:text-gray-300">Completed 95% of projects on time within the last year, ensuring client satisfaction and timely delivery.</p>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
        <div class="w-full bg-gray-300 rounded-full h-2 dark:bg-gray-600">
          <div class="bg-blue-500 h-2 rounded-full" style="width: 95%"></div>
        </div>
      </div>
    </div>

    <!-- Infographic Card 2 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <div class="p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0 bg-teal-500 dark:bg-teal-700 rounded-full p-3">
            <svg class="h-6 w-6 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 7L6 14l-3-3m0 0l3-3m0 0l3 3m7 0l-3 3m0 0l3 3m0 0l-3-3m3 3l-3-3"></path></svg>
          </div>
          <div class="ml-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Skills Acquired</h3>
          </div>
        </div>
        <p class="mt-4 text-gray-600 dark:text-gray-300">Successfully integrated three new key skills into my workflow, enhancing versatility and project outcomes.</p>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-300">
          <span>Skill 1</span>
          <span>Advanced</span>
        </div>
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-300 mt-2">
          <span>Skill 2</span>
          <span>Intermediate</span>
        </div>
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-300 mt-2">
          <span>Skill 3</span>
          <span>Proficient</span>
        </div>
      </div>
    </div>

    <!-- Infographic Card 3 -->
    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden">
      <div class="p-6">
        <div class="flex items-center">
          <div class="flex-shrink-0 bg-orange-500 dark:bg-orange-700 rounded-full p-3">
            <svg class="h-6 w-6 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m6-2v2m0-2a2 2 0 100 4m0-4a2 2 0 110 4m0 4v2"></path></svg>
          </div>
          <div class="ml-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Client Satisfaction</h3>
          </div>
        </div>
        <p class="mt-4 text-gray-600 dark:text-gray-300">Achieved a 90% positive feedback rate from clients, demonstrating strong communication and project management.</p>
      </div>
      <div class="bg-gray-100 dark:bg-gray-700 px-6 py-4">
        <div class="flex items-center justify-betweentext-gray-600 dark:text-gray-300">
          <span>Positive Feedback</span>
          <span>90%</span>
        </div>
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-300 mt-2">
          <span>Neutral Feedback</span>
          <span>8%</span>
        </div>
        <div class="flex items-center justify-between text-gray-600 dark:text-gray-300 mt-2">
          <span>Negative Feedback</span>
          <span>2%</span>
        </div>
      </div>
    </div>

  </div>
</div>

验证码组件

一个 Material Design 样式的 CAPTCHA 组件，用于增强作品集网站的安全性，具有深色主题和带有 Tailwind CSS 的响应式设计。

打开预览

                <div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-800 p-4">
  <div class="max-w-lg w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg p-6">
    <h2 class="text-2xl font-semibold text-gray-800 dark:text-white mb-4 text-center">CAPTCHA Verification</h2>
    <p class="text-gray-600 dark:text-gray-400 mb-4 text-center">Please verify that you are not a robot by completing the challenge below.</p>
    <div class="flex items-center justify-between mb-4"> 
      <img src="https://picsum.photos/200/100" alt="Captcha Image" class="rounded-lg shadow-md flex-1 mr-2" />
      <input type="text" placeholder="Enter the text above" class="flex-1 border border-gray-300 dark:border-gray-700 rounded-md py-2 px-3 focus:ring focus:ring-indigo-500 dark:focus:ring-indigo-400">
    </div>
    <div class="flex flex-col items-center mb-4">
      <p class="text-gray-600 dark:text-gray-400 text-sm">Select the images that match the description:</p>
      <div class="grid grid-cols-2 gap-2 mt-2">
        <img src="https://picsum.photos/100/100?random=1" alt="Image 1" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
        <img src="https://picsum.photos/100/100?random=2" alt="Image 2" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
        <img src="https://picsum.photos/100/100?random=3" alt="Image 3" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
        <img src="https://picsum.photos/100/100?random=4" alt="Image 4" class="object-cover rounded-md shadow-lg cursor-pointer hover:shadow-xl transition-shadow duration-300">
      </div>
    </div>
    <button type="submit" class="w-full bg-indigo-600 dark:bg-indigo-800 text-white font-semibold py-2 rounded-md hover:bg-indigo-700 dark:hover:bg-indigo-600 transition duration-300">Verify</button>
    <div class="flex items-center justify-between mt-4">
      <p class="text-gray-600 dark:text-gray-400 text-sm">Having trouble? <a href="#" class="text-indigo-600 dark:text-indigo-400 hover:underline">Request a new challenge</a></p>
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-8 h-8 rounded-full border border-gray-300 dark:border-gray-700">
    </div>
  </div>
</div>

用户资料组件

用户配置文件组件，采用粗野派风格设计，采用三色配色方案，具有适度的复杂度，适合博客/内容使用，响应式设计支持深色主题。

打开预览

                <div class="container mx-auto p-6">
    <h2 class="text-4xl font-bold text-gray-900 dark:text-white mb-8">User Profiles</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <!-- Profile 1 -->
        <div class="bg-yellow-300 dark:bg-yellow-800 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">John Doe</h3>
            <p class="text-gray-700 dark:text-gray-200">Content Writer</p>
            <p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Passionate about writing and sharing knowledge."
            </p>
            <img src="https://picsum.photos/200/100" alt="Content Image" class="mt-4 rounded-lg shadow-md">
        </div>
        <!-- Profile 2 -->
        <div class="bg-blue-400 dark:bg-blue-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Jane Smith</h3>
            <p class="text-gray-700 dark:text-gray-200">Graphic Designer</p>
            <p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Creating visuals that tell a story."
            </p>
            <img src="https://picsum.photos/200/100?grayscale" alt="Content Image" class="mt-4 rounded-lg shadow-md">
        </div>
        <!-- Profile 3 -->
        <div class="bg-green-500 dark:bg-green-900 rounded-lg shadow-lg p-4 border border-gray-400 dark:border-gray-600">
            <img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-24 h-24 rounded-full mx-auto mb-4">
            <h3 class="text-2xl font-semibold text-gray-900 dark:text-gray-100">Mike Brown</h3>
            <p class="text-gray-700 dark:text-gray-200">Web Developer</p>
            <p class="text-center text-gray-600 dark:text-gray-300 mt-2">"Building interactive web experiences."
            </p>
            <img src="https://picsum.photos/200/100?blur" alt="Content Image" class="mt-4 rounded-lg shadow-md">
        </div>
    </div>
</div>

1 ... 179 180 181 182 183 ... 335