HTML 代码
<div class="flex justify-center p-4 bg-gray-800 dark:bg-gray-900 rounded-lg shadow-lg">
<div class="flex space-x-4">
<a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
<img src="https://picsum.photos/24?random=1" alt="Share on Facebook" class="mr-2 rounded-full">
<span class="text-gray-700 dark:text-gray-200">Share on Facebook</span>
</a>
<a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
<img src="https://picsum.photos/24?random=2" alt="Share on Twitter" class="mr-2 rounded-full">
<span class="text-gray-700 dark:text-gray-200">Share on Twitter</span>
</a>
<a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
<img src="https://picsum.photos/24?random=3" alt="Share on Instagram" class="mr-2 rounded-full">
<span class="text-gray-700 dark:text-gray-200">Share on Instagram</span>
</a>
<a href="#" class="flex items-center p-2 rounded-lg border border-gray-400 dark:border-gray-600 bg-gray-300 dark:bg-gray-700 hover:bg-gray-400 dark:hover:bg-gray-600 transition ease-in-out duration-200">
<img src="https://picsum.photos/24?random=4" alt="Share via Email" class="mr-2 rounded-full">
<span class="text-gray-700 dark:text-gray-200">Share via Email</span>
</a>
</div>
</div>相关组件
拟物化社交分享按钮
一套使用拟物设计风格的社交分享按钮，使用 Tailwind CSS。具有渐变、阴影及悬停/激活效果来模拟物理按钮。该组件是响应式的，并通过 CSS 包含深色模式支持。包含 Facebook、Twitter、LinkedIn 和通用复制链接按钮。