组件 社交分享按钮 Social Share Buttons 组件

Social Share Buttons 组件

专为仪表板设计的极简主义社交分享按钮组件,具有鲜艳的配色方案和响应式设计,并支持深色模式。

预览

HTML 代码

<div class="flex items-center justify-center space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300">
  <h2 class="text-lg font-semibold text-gray-800 dark:text-white">Share this Dashboard</h2>
  <div class="flex space-x-2">
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 text-white hover:bg-red-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 text-white hover:bg-blue-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-green-500 text-white hover:bg-green-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-yellow-500 text-white hover:bg-yellow-600 transition duration-300">
      <img src="https://picsum.photos/20/20?random=4" alt="Share via Email" class="w-5 h-5" />
    </a>
  </div>
</div>

相关组件

社交分享按钮组件 51

一个响应式社交分享按钮组件,采用拟物化设计原则,按钮模仿现实世界对象,并支持深色主题。该组件使用 Tailwind CSS 样式,并包含来自 picsum.photos 的占位符图像和来自 randomuser.me 的头像。

打开

社交分享按钮组件

一个使用 Tailwind CSS 设计的极简社交分享按钮组件,具有响应式布局和深色主题支持。该组件包括用于在流行社交媒体平台上分享的按钮,采用干净简单的设计元素。

打开

社交分享按钮

具有神经形态样式的社交分享按钮,单色配色方案,适用于商业/企业网站的简单复杂性。使用 Tailwind CSS 的响应式设计,支持深色主题。使用微妙的阴影来实现神经形态效果。

打开