소셜 구성 요소 구성 요소
Tailwind CSS를 사용하고 머티리얼 디자인 원칙에 따라 설계된 간단한 소셜 미디어 구성 요소입니다. 생생한 색상과 다크 모드 지원이 특징이므로 소셜 네트워킹 인터페이스에 적합합니다.
HTML 코드
<div class="max-w-sm mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/400/200" alt="Social Media Image">
<div class="p-4">
<div class="flex items-center space-x-3">
<img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
<div>
<h2 class="text-lg font-semibold text-gray-800 dark:text-white">John Doe</h2>
<p class="text-gray-600 dark:text-gray-300">@johndoe</p>
</div>
</div>
<p class="mt-2 text-gray-600 dark:text-gray-300">This is a sample post demonstrating the vibrant and energetic design suitable for social media engagement.</p>
<div class="mt-4 flex justify-between">
<button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700">Like</button>
<button class="px-4 py-2 text-white bg-green-500 rounded hover:bg-green-600 dark:bg-green-600 dark:hover:bg-green-700">Comment</button>
</div>
</div>
</div>