组件 社交分享按钮 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>

相关组件

社交分享按钮组件

响应式社交分享按钮,具有 Glassmorphism 风格和鲜艳的色彩,专为博客和内容消费而设计。

打开

社交分享按钮

具有响应式设计、支持暗主题和3D美学的社交分享按钮。无需JavaScript。

打开

Social Share Buttons 组件

一个响应式社交分享按钮组件,采用玻璃形态风格设计,具有用于电子商务网站的单色配色方案。它具有磨砂玻璃般的半透明元素,包括多个用于在社交媒体上分享的交互式按钮,并具有使用 Tailwind CSS 的暗模式支持。

打开