CCHub Logo CCHub Tailwind Collection
组件 社交组件 社交组件

社交组件

具有粗野派和柔和设计的仪表板的社交组件。它显示带有姓名、头衔和头像的用户配置文件，并包含用于社交作（如关注、消息和共享）的按钮。该组件响应迅速，并支持深色模式。

预览

HTML 代码 

<div class="bg-pink-200 dark:bg-purple-900 p-6 rounded-lg shadow-xl border-2 border-black">
  <div class="flex items-center">
    <img class="w-16 h-16 rounded-full border-2 border-black" src="https://randomuser.me/api/portraits/men/75.jpg" alt="User Avatar">
    <div class="ml-4">
      <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">John Doe</h2>
      <p class="text-gray-700 dark:text-gray-300">Lead brutalist designer</p>
    </div>
  </div>
  <div class="mt-6 grid grid-cols-3 gap-4">
    <button class="bg-blue-400 hover:bg-blue-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white">Follow</button>
    <button class="bg-green-400 hover:bg-green-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-green-600 dark:hover:bg-green-700 dark:text-white">Message</button>
    <button class="bg-yellow-400 hover:bg-yellow-500 text-black py-2 px-4 rounded-none border-2 border-black dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:text-white">Share</button>
  </div>
</div>

相关组件

社交组件

一个粗犷风格的社交组件，展示了作品集项目，采用三原色方案，适合展示作品或产品。

打开

Social_Components_Documentation_Wiki

一个复杂的响应式社交组件，适用于文档/Wiki 网站，具有秋天的色彩渐变和平滑过渡，并支持深色模式。

打开

3D Social 作者卡片

具有 3D 效果和社交媒体链接的响应式作者卡片组件，专为博客/内容部分而设计。它具有互补的配色方案（蓝色用于身份/信息，橙色用于强调/CTA），支持深色模式，并使用 Tailwind CSS 进行样式设置。该设计是“简单”的复杂性，具有基本布局和最少的元素，但“3D 设计”通过使用阴影和悬停效果来增加深度和参与度。该组件包括头像、作者姓名、简短的个人简介、社交媒体图标和“Follow Me”行动号召按钮。它使用 randomuser.me 头像作为占位符。

打开