소셜 구성 요소 구성 요소
대시보드를 위한 간단하고 반응이 빠른 소셜 구성 요소 섹션으로, 단색 색 구성표와 스큐어모피즘에서 영감을 받은 디자인을 특징으로 합니다.
HTML 코드
<div class="p-4 bg-gray-200 dark:bg-gray-800 shadow-xl rounded-lg">
<h2 class="text-xl font-bold mb-4 text-gray-800 dark:text-gray-200">Social Feed</h2>
<div class="space-y-4">
<!-- Post 1 -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">John Doe</p>
<p class="text-sm text-gray-600 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">Exploring the new dashboard features! Really intuitive and clean design. #dashboard #UIUX</p>
<img src="https://picsum.photos/400/200?random=1" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
<div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
<span>❤️ 23 Likes</span>
<span>💬 5 Comments</span>
</div>
</div>
<!-- Post 2 -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">Jane Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Yesterday</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">Just launched my new project! Check it out in the updated dashboard. Let me know your thoughts! #projectlaunch #dashboard</p>
<div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
<span>❤️ 45 Likes</span>
<span>💬 12 Comments</span>
</div>
</div>
<!-- Post 3 -->
<div class="bg-gray-100 dark:bg-gray-700 p-4 rounded-lg shadow-md">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/20.jpg" alt="User Avatar" class="w-10 h-10 rounded-full border-2 border-gray-300 dark:border-gray-500 mr-3">
<div>
<p class="font-semibold text-gray-900 dark:text-gray-100">Peter Jones</p>
<p class="text-sm text-gray-600 dark:text-gray-400">3 days ago</p>
</div>
</div>
<p class="text-gray-800 dark:text-gray-200 mb-3">The new analytics module in the dashboard is a game-changer! So much data presented clearly. Highly recommend! #analytics #datadriven</p>
<img src="https://picsum.photos/400/200?random=2" alt="Post Image" class="w-full rounded-md shadow-inner mb-2">
<div class="flex justify-between text-gray-600 dark:text-gray-400 text-sm">
<span>❤️ 60 Likes</span>
<span>💬 8 Comments</span>
</div>
</div>
</div>
</div>