ソーシャル共有ボタンコンポーネント
現実世界の対応物を模倣したスキューモーフィックなデザインスタイルを持つレスポンシブソーシャル共有ボタンコンポーネントで、ダークテーマのサポートが特徴です。
HTMLコード
<div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex flex-col items-center space-y-4">
<h2 class="text-lg font-bold">Share this Post</h2>
<div class="flex space-x-4">
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=3" alt="LinkedIn" class="rounded-full" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=4" alt="Instagram" class="rounded-full" />
</a>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
<p>Connect with us!</p>
</div>
</div>