社交分享按钮组件 51
一个响应式社交分享按钮组件，采用拟物化设计原则，按钮模仿现实世界对象，并支持深色主题。该组件使用 Tailwind CSS 样式，并包含来自 picsum.photos 的占位符图像和来自 randomuser.me 的头像。
HTML 代码
<div class="flex justify-center items-center p-5 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-lg">
<div class="flex space-x-4">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40" alt="Share on Facebook" class="rounded-full shadow-md mb-2">
<a href="#" class="bg-blue-600 dark:bg-blue-800 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
Facebook
</a>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40" alt="Share on Twitter" class="rounded-full shadow-md mb-2">
<a href="#" class="bg-blue-400 dark:bg-blue-600 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
Twitter
</a>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40" alt="Share on LinkedIn" class="rounded-full shadow-md mb-2">
<a href="#" class="bg-blue-700 dark:bg-blue-900 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
LinkedIn
</a>
</div>
<div class="flex flex-col items-center">
<img src="https://picsum.photos/40/40" alt="Share on Instagram" class="rounded-full shadow-md mb-2">
<a href="#" class="bg-pink-500 dark:bg-pink-700 text-white p-2 rounded-full shadow-lg transform hover:scale-105 transition duration-150 ease-in-out">
Instagram
</a>
</div>
</div>
</div>相关组件
Social Share Buttons 组件
具有单色配色方案的 retro/vintage social share buttons 组件。它是一个复杂的响应式设计，支持深色主题，适用于投资组合。使用不带 JavaScript 的 Tailwind CSS。
Social Share Buttons 组件
一个响应式社交分享按钮组件，采用玻璃形态风格设计，具有用于电子商务网站的单色配色方案。它具有磨砂玻璃般的半透明元素，包括多个用于在社交媒体上分享的交互式按钮，并具有使用 Tailwind CSS 的暗模式支持。