HTML 代码
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4">
<!-- Facebook -->
<a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
<div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">F</div>
</a>
<!-- Twitter -->
<a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
<div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">T</div>
</a>
<!-- LinkedIn -->
<a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
<div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">in</div>
</a>
<!-- Instagram -->
<a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
<div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
<div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">I</div>
</a>
</div>
</div>相关组件
Social Share Buttons 组件
一个优雅、响应式的社交分享按钮组件，专为新闻和新闻网站设计，具有豪华的森林/绿色调色板和深色模式支持。它包括用于在各种平台上共享文章的多个交互式元素。
社交分享按钮组件 51
一个响应式社交分享按钮组件，采用拟物化设计原则，按钮模仿现实世界对象，并支持深色主题。该组件使用 Tailwind CSS 样式，并包含来自 picsum.photos 的占位符图像和来自 randomuser.me 的头像。