ソーシャル共有ボタンコンポーネント
現実世界の対応物を模倣したスキューモーフィックなデザインスタイルを持つレスポンシブソーシャル共有ボタンコンポーネントで、ダークテーマのサポートが特徴です。
HTMLコード
<div class="p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-md flex flex-col items-center space-y-4">
<h2 class="text-lg font-bold">Share this Post</h2>
<div class="flex space-x-4">
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=1" alt="Facebook" class="rounded-full" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=2" alt="Twitter" class="rounded-full" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=3" alt="LinkedIn" class="rounded-full" />
</a>
<a href="#" class="flex items-center justify-center w-12 h-12 bg-white dark:bg-gray-700 rounded-full shadow-md hover:shadow-lg transform transition-all duration-200 hover:scale-105">
<img src="https://picsum.photos/30/30?random=4" alt="Instagram" class="rounded-full" />
</a>
</div>
<div class="text-sm text-gray-600 dark:text-gray-400">
<p>Connect with us!</p>
</div>
</div>関連コンポーネント
ソーシャル共有ボタン コンポーネント 51
スキューモーフィックなデザイン原則で設計されたレスポンシブなソーシャル共有ボタンコンポーネントで、現実世界のオブジェクトを模倣するボタンとダークテーマのサポートを特徴としています。このコンポーネントは Tailwind CSS を使用してスタイル設定され、picsum.photos のプレースホルダー画像と randomuser.me のアバターが含まれています。
Skeuomorphicソーシャルシェアボタン
レスポンシブソーシャル共有ボタンコンポーネント、スキューモーフィックデザイン、モノクロカラースキーム、複雑なインタラクション、ダークテーマのサポート。ブログやコンテンツサイト向けに設計されています。