ソーシャル共有ボタンコンポーネント
Tailwind CSSでデザインされたミニマリストのソーシャル共有ボタンコンポーネントで、レスポンシブエフェクトとダークテーマのサポートが特徴です。
HTMLコード
<div class="flex justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md">
<a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://picsum.photos/20/20?random=1" alt="Share on Facebook" class="w-5 h-5 rounded-full">
<span>Facebook</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://picsum.photos/20/20?random=2" alt="Share on Twitter" class="w-5 h-5 rounded-full">
<span>Twitter</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://picsum.photos/20/20?random=3" alt="Share on LinkedIn" class="w-5 h-5 rounded-full">
<span>LinkedIn</span>
</a>
<a href="#" class="flex items-center space-x-2 text-gray-800 dark:text-white p-2 rounded hover:bg-gray-200 dark:hover:bg-gray-700">
<img src="https://picsum.photos/20/20?random=4" alt="Share on WhatsApp" class="w-5 h-5 rounded-full">
<span>WhatsApp</span>
</a>
</div>
<style>
@media (prefers-color-scheme: dark) {
.dark\:bg-gray-800 {
background-color: #2d3748;
}
.dark\:text-white {
color: #fff;
}
.dark\:hover\:bg-gray-700 {
background-color: #4a5568;
}
}
</style>関連コンポーネント
ソーシャルシェアボタン
ニューモーフィズムスタイル、単色の配色、ビジネス/企業のWebサイト向けのシンプルな複雑さを備えたソーシャル共有ボタン。Tailwind CSSを使用したダークテーマをサポートするレスポンシブデザイン。ニューモーフィックな効果に微妙な影を使用します。