组件 Follow 按钮 关注按钮组件

关注按钮组件

一个响应式的关注按钮组件,采用Material Design原则设计,支持暗模式,并使用Tailwind CSS进行定制样式。

预览

HTML 代码

<div class="flex items-center justify-center p-4">
  <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg p-5 transition-shadow duration-300 hover:shadow-lg">
    <div class="flex items-center">
      <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-12 h-12 rounded-full shadow-lg mr-3">
      <div class="flex-1">
        <h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Follow Me</h2>
        <p class="text-gray-600 dark:text-gray-400">Join my journey and stay updated!</p>
      </div>
      <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition duration-300 ease-in-out">
        Follow
      </button>
    </div>
  </div>
</div>

相关组件

关注按钮

一个简单的关注按钮,具有材料设计风格、响应式效果和暗模式支持。

打开

Follow Button 组件

一个简单、响应迅速的关注按钮组件,专为约会/社交平台设计,具有柔和的配色方案和深色模式支持。

打开

Follow Button 组件

适用于活动和会议网站的响应式关注/取消关注按钮组件,具有渐变过渡、深色模式支持和明亮的强调色。它包括微妙的悬停效果,并在单击时更改文本和背景(模拟)。

打开