ソーシャル共有ボタンコンポーネント
ブログコンテンツ消費用のグレースケールのスキューモーフィックスタイルで設計されたレスポンシブソーシャル共有ボタンコンポーネント。ダークモードのサポートが含まれています。
HTMLコード
<div class="flex flex-col items-center bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h2 class="text-xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This Article</h2>
<div class="flex space-x-4 mb-6">
<div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="w-10 h-10 rounded-full">
<a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Facebook</a>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="w-10 h-10 rounded-full">
<a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Twitter</a>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="w-10 h-10 rounded-full">
<a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">LinkedIn</a>
</div>
<div class="bg-gray-300 dark:bg-gray-700 p-3 rounded-full shadow hover:shadow-lg transform hover:scale-105 transition-transform duration-200">
<img src="https://picsum.photos/40/40?random=4" alt="Email" class="w-10 h-10 rounded-full">
<a href="#" class="block text-center text-sm text-gray-800 dark:text-gray-200">Email</a>
</div>
</div>
<p class="text-gray-600 dark:text-gray-400 text-center text-sm">Share this with your friends and family!</p>
</div>