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

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

80年代/90年代のレトロ/ビンテージの美学でスタイル化されたレスポンシブソーシャルシェアボタンコンポーネントで、Tailwind CSSとプレースホルダー画像を使用したダークテーマのサポートが特徴です。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center p-5 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-purple-800 dark:to-pink-700 rounded-lg shadow-lg">
    <h2 class="text-white text-2xl font-bold mb-4">Share Your Experience</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="facebook" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Facebook</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="twitter" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Twitter</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="instagram" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">Instagram</span>
        </a>
        <a href="#" class="flex items-center p-2 bg-white dark:bg-gray-800 border-2 border-gray-300 dark:border-gray-600 rounded-full transition-transform transform hover:scale-105">
            <img src="https://picsum.photos/30/30" alt="linkedin" class="w-8 h-8 rounded-full mr-2">
            <span class="text-gray-800 dark:text-white font-medium">LinkedIn</span>
        </a>
    </div>
    <div class="mt-5">
        <img src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar" class="w-16 h-16 rounded-full border-2 border-white shadow-lg">
    </div>
</div>

関連コンポーネント

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

レスポンシブでミニマリストのソーシャルシェアボタンコンポーネントは、グレースケールの配色を使用して、スイス/インターナショナルタイポグラフィスタイルでデザインされています。求人掲示板やキャリア開発プラットフォームに適しており、さまざまなソーシャルメディアプラットフォームにクリーンな共有オプションを提供します。

開ける

ソーシャル共有ボタンコンポーネント - 音楽/オーディオ

音楽およびオーディオプラットフォーム用に設計されたソーシャルシェアボタンのセットで、落ち着いた色とサポートするダークモードを備えたマテリアルデザインの美学が特徴です。Facebook、Twitter、メールなどの一般的な共有プラットフォーム用のボタンが含まれています。

開ける

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

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

開ける