소셜 구성 요소 구성 요소
레트로/빈티지 스타일의 소셜 미디어 구성 요소는 여러 대화형 요소가 있는 풍부한 인터페이스를 특징으로 하며, 보색으로 디자인되고 다크 모드를 지원합니다.
HTML 코드
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg max-w-md mx-auto">
<h1 class="text-3xl font-bold text-center text-blue-800 dark:text-blue-300 mb-4">Retro Social Media</h1>
<div class="bg-white dark:bg-gray-700 rounded-lg p-4">
<div class="flex mb-4">
<img class="w-16 h-16 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/10.jpg" alt="Avatar">
<div>
<h2 class="text-lg font-semibold text-blue-700 dark:text-blue-200">John Doe</h2>
<p class="text-gray-600 dark:text-gray-400">@johndoe</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-4">Feeling nostalgic about the good old days of the 80s and 90s. What’s your favorite memory?</p>
<img class="w-full h-auto rounded-lg mb-4" src="https://picsum.photos/400/200?random=1" alt="Retro Image">
<div class="flex justify-between">
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition duration-200">Like</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded transition duration-200">Comment</button>
<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-200">Share</button>
</div>
</div>
<div class="margin-top: 8px flex justify-between items-center text-gray-600 dark:text-gray-300 text-sm">
<span class="cursor-pointer hover:underline">12 Likes</span>
<span class="cursor-pointer hover:underline">3 Comments</span>
</div>
</div>