CCHub Logo CCHub Tailwind Collection
コンポーネント ソーシャルシェアボタン ソーシャル共有ボタンコンポーネント

ソーシャル共有ボタンコンポーネント

Tailwind CSSでデザインされたミニマリストのソーシャルシェアボタンコンポーネントで、レスポンシブレイアウトとダークテーマのサポートが特徴です。このコンポーネントには、すっきりとしたシンプルなデザイン要素を備えた人気のソーシャルメディアプラットフォームで共有するためのボタンが含まれています。

プレビュー

HTMLコード 

<div class="flex flex-col md:flex-row justify-center items-center space-x-4 p-4 bg-white dark:bg-gray-800 rounded-lg shadow">
    <div class="flex items-center space-x-2">
        <img src="https://picsum.photos/30" alt="Avatar" class="w-8 h-8 rounded-full" />
        <span class="text-gray-800 dark:text-gray-200">Share with:</span>
    </div>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-blue-500 hover:bg-blue-600 text-white transition duration-200 ease-in-out">
        <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-10 h-10 rounded-full bg-blue-400 hover:bg-blue-500 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/twitter-squared.png" alt="Twitter" class="w-6 h-6" />
    </a>
    <a href="#" class="flex items-center justify-center w-10 h-10 rounded-full bg-red-500 hover:bg-red-600 text-white transition duration-200 ease-in-out">
        <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-10 h-10 rounded-full bg-gray-800 hover:bg-gray-600 text-white transition duration-200 ease-in-out">
        <img src="https://img.icons8.com/ios-filled/50/ffffff/linkedin.png" alt="LinkedIn" class="w-6 h-6" />
    </a>
</div>

関連コンポーネント

レトロなソーシャルシェアボタン

レトロ/ビンテージデザイン、レスポンシブエフェクト、Tailwind CSSを使用したダークテーマのサポートを備えたソーシャルシェアボタンコンポーネント、JavaScriptは必要ありません。

開ける

Skeuomorphicソーシャルシェアボタン

Tailwind CSSを使用したSkeuomorphicデザインでスタイル設定されたソーシャルシェアボタンのセット。グラデーション、シャドウ、ホバー/アクティブ効果を備えており、物理的なボタンをシミュレートします。このコンポーネントはレスポンシブで、CSS によるダークモードのサポートが含まれています。Facebook、Twitter、LinkedIn のボタンと、汎用のコピー リンク ボタンが含まれています。

開ける

ソーシャル共有ボタンコンポーネント

ダッシュボード用に設計されたミニマリストのソーシャル共有ボタンコンポーネントで、鮮やかな配色とレスポンシブデザインが特徴で、ダークモードがサポートされています。

開ける