여러 대화형 요소로 블로그 콘텐츠를 보여주도록 설계된 복잡한 활동 피드 구성 요소입니다. 3D 디자인 스타일과 보색 구성표를 통합합니다. 반응형 디자인과 어두운 테마를 지원합니다.
<div class="max-w-2xl mx-auto p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700"> <h2 class="text-2xl font-bold text-center text-gray-800 dark:text-white mb-4">Activity Feed</h2> <div class="space-y-6"> <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-green-500"> <div class="flex items-center space-x-4 mb-2"> <img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"> <div> <h3 class="font-semibold text-gray-800 dark:text-white">John Doe</h3> <p class="text-sm text-gray-600 dark:text-gray-400">Posted 2 hours ago</p> </div> </div> <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Exploring Tailwind CSS</h4> <p class="text-gray-700 dark:text-gray-300 mb-2">Join me as we dive into the world of Tailwind CSS, a utility-first CSS framework.</p> <img src="https://picsum.photos/400/200?random=1" alt="Feed Image" class="w-full rounded-lg mb-2"> <div class="flex justify-between text-gray-500 dark:text-gray-400"> <button class="hover:text-green-500">Like</button> <button class="hover:text-green-500">Comment</button> </div> </div> <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-blue-500"> <div class="flex items-center space-x-4 mb-2"> <img src="https://randomuser.me/api/portraits/women/11.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"> <div> <h3 class="font-semibold text-gray-800 dark:text-white">Jane Smith</h3> <p class="text-sm text-gray-600 dark:text-gray-400">Posted 3 hours ago</p> </div> </div> <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Understanding CSS Grid</h4> <p class="text-gray-700 dark:text-gray-300 mb-2">CSS Grid is an amazing layout system that allows for two-dimensional layouts.</p> <img src="https://picsum.photos/400/200?random=2" alt="Feed Image" class="w-full rounded-lg mb-2"> <div class="flex justify-between text-gray-500 dark:text-gray-400"> <button class="hover:text-blue-500">Like</button> <button class="hover:text-blue-500">Comment</button> </div> </div> <div class="bg-gray-50 dark:bg-gray-900 p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-300 border-l-4 border-red-500"> <div class="flex items-center space-x-4 mb-2"> <img src="https://randomuser.me/api/portraits/men/12.jpg" alt="User Avatar" class="w-10 h-10 rounded-full"> <div> <h3 class="font-semibold text-gray-800 dark:text-white">Mark Johnson</h3> <p class="text-sm text-gray-600 dark:text-gray-400">Posted 4 hours ago</p> </div> </div> <h4 class="text-lg font-semibold text-gray-800 dark:text-white">Responsive Design Basics</h4> <p class="text-gray-700 dark:text-gray-300 mb-2">Learn the fundamental principles of creating responsive web designs.</p> <img src="https://picsum.photos/400/200?random=3" alt="Feed Image" class="w-full rounded-lg mb-2"> <div class="flex justify-between text-gray-500 dark:text-gray-400"> <button class="hover:text-red-500">Like</button> <button class="hover:text-red-500">Comment</button> </div> </div> </div> </div>
Tailwind CSS를 사용하여 다크 모드 UI용으로 설계된 반응형 활동 피드 구성 요소입니다.
마이크로 인터랙션과 어두운 테마가 있는 전자 상거래를 위한 복잡한 활동 피드 구성 요소로, Tailwind CSS를 사용하여 스타일링되었습니다.
Tailwind CSS로 구축된 깊이 효과와 어두운 테마 지원을 통합한 3D 디자인 스타일의 반응형 활동 피드 구성 요소입니다.