ソーシャル共有ボタンコンポーネント
電子商取引サイト用の単色の配色を持つglassmorphismスタイルで設計されたレスポンシブソーシャル共有ボタンコンポーネント。すりガラスのような半透明の要素が特徴で、ソーシャルメディアで共有するための複数のインタラクティブボタンが含まれており、Tailwind CSSを使用したダークモードがサポートされています。
HTMLコード
<div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 bg-opacity-40 backdrop-filter backdrop-blur-lg rounded-lg shadow-lg space-x-4">
<div class="flex flex-col items-center">
<img src="https://picsum.photos/200/200" alt="Product Image" class="w-24 h-24 rounded-lg mb-2">
<h2 class="text-lg text-gray-800 dark:text-gray-200">Share this product</h2>
</div>
<div class="flex space-x-4">
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-500 text-white hover:bg-blue-700 transition-all duration-300 shadow-lg dark:bg-blue-600 dark:hover:bg-blue-800">
<img src="https://img.icons8.com/ios-filled/50/ffffff/facebook-new.png" alt="Facebook" class="w-6 h-6">
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-blue-400 text-white hover:bg-blue-600 transition-all duration-300 shadow-lg dark:bg-blue-500 dark:hover:bg-blue-700">
<img src="https://img.icons8.com/ios-filled/50/ffffff/twitter.png" alt="Twitter" class="w-6 h-6">
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-pink-500 text-white hover:bg-pink-700 transition-all duration-300 shadow-lg dark:bg-pink-600 dark:hover:bg-pink-800">
<img src="https://img.icons8.com/ios-filled/50/ffffff/instagram-new.png" alt="Instagram" class="w-6 h-6">
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-red-500 text-white hover:bg-red-700 transition-all duration-300 shadow-lg dark:bg-red-600 dark:hover:bg-red-800">
<img src="https://img.icons8.com/ios-filled/50/ffffff/pinterest.png" alt="Pinterest" class="w-6 h-6">
</a>
</div>
</div>関連コンポーネント
ソーシャル共有ボタンコンポーネント
レスポンシブなソーシャルシェアボタンコンポーネントは、glassmorphismエフェクトでスタイル設定され、明るいテーマと暗いテーマの両方をサポートします。
ソーシャル共有ボタンコンポーネント
80年代/90年代のレトロ/ビンテージの美学でスタイル化されたレスポンシブソーシャルシェアボタンコンポーネントで、Tailwind CSSとプレースホルダー画像を使用したダークテーマのサポートが特徴です。