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

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

レトロ/ビンテージデザインとパステルカラーの配色でスタイル化されたレスポンシブソーシャルシェアボタンコンポーネントで、ダークモードをサポートし、ソーシャルメディアインターフェイスに適しています。

プレビュー

HTMLコード 

<div class="container mx-auto p-6">
    <h2 class="text-4xl font-bold text-gray-800 dark:text-gray-200 mb-4">Share This!</h2>
    <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
        <div class="bg-pink-200 dark:bg-pink-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://facebook.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Facebook</a>
        </div>
        <div class="bg-blue-200 dark:bg-blue-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=1" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://twitter.com" class="font-semibold text-gray-800 dark:text-gray-200">Tweet This</a>
        </div>
        <div class="bg-green-200 dark:bg-green-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=2" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://instagram.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Instagram</a>
        </div>
        <div class="bg-yellow-200 dark:bg-yellow-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=3" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://linkedin.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on LinkedIn</a>
        </div>
        <div class="bg-purple-200 dark:bg-purple-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=4" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://pinterest.com" class="font-semibold text-gray-800 dark:text-gray-200">Pin It</a>
        </div>
        <div class="bg-red-200 dark:bg-red-800 rounded-lg shadow-md p-4 flex items-center justify-between">
            <img src="https://picsum.photos/40?random=5" alt="Icon" class="w-10 h-10 rounded-full mr-2">
            <a href="https://tumblr.com" class="font-semibold text-gray-800 dark:text-gray-200">Share on Tumblr</a>
        </div>
    </div>
</div>

関連コンポーネント

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

ソーシャルシェアボタン マイクロインタラクション、グレースケールの配色、ソーシャルメディアインターフェイスの適度な複雑さ、ダークテーマをサポートするレスポンシブデザインを備えたコンポーネント。

開ける

ソーシャルシェアボタン

ソーシャル共有ボタンコンポーネント Glassmorphism デザイン、レスポンシブエフェクト、ダークテーマのサポート。JavaScriptは使用しておりません。

開ける

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

eコマースWebサイト用に設計されたスキューモーフィックソーシャル共有ボタンコンポーネントで、グレースケールのカラースキームとダークモードのサポートを特長としています。

開ける