ソーシャル共有ボタン コンポーネント 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>