ソーシャルメディアコンテナ
鮮やかな色、魅力的なマイクロインタラクション、ダークテーマのサポートを備えたレスポンシブコンテナコンポーネントで、ソーシャルメディアインターフェイスに適しています。機能には、微妙なホバー効果とすっきりとしたレイアウトが含まれます。
HTMLコード
<div class="container mx-auto p-4 md:p-8 bg-gradient-to-r from-purple-500 to-pink-500 dark:from-gray-800 dark:to-black rounded-lg shadow-xl">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center">
<img class="w-10 h-10 rounded-full mr-4 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
<h2 class="text-xl font-bold text-white dark:text-gray-200">User Profile</h2>
</div>
<button class="px-4 py-2 bg-white bg-opacity-20 text-white text-sm font-semibold rounded-full hover:bg-opacity-30 transition-all duration-300 ease-in-out">Follow</button>
</div>
<p class="text-white dark:text-gray-300 leading-relaxed mb-6">
This is a sample container component for social media interfaces. It features vibrant colors, subtle hover effects for buttons, and is fully responsive.
</p>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white bg-opacity-10 rounded-lg p-4 hover:bg-opacity-20 transition-all duration-300 ease-in-out">
<h3 class="text-lg font-semibold text-white mb-2">Recent Post</h3>
<p class="text-white text-sm dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
</div>
<div class="bg-white bg-opacity-10 rounded-lg p-4 hover:bg-opacity-20 transition-all duration-300 ease-in-out">
<h3 class="text-lg font-semibold text-white mb-2">Notifications</h3>
<p class="text-white text-sm dark:text-gray-300">You have 3 new notifications. ...</p>
</div>
</div>
<div class="mt-6 pt-4 border-t border-white border-opacity-20 flex justify-around text-white">
<a href="#" class="text-sm hover:text-gray-200 transition-colors duration-200">Messages</a>
<a href="#" class="text-sm hover:text-gray-200 transition-colors duration-200">Settings</a>
<a href="#" class="text-sm hover:text-gray-200 transition-colors duration-200">Logout</a>
</div>
</div>