Community Forum 구성 요소
Material Design 원칙에 따라 설계된 반응형 커뮤니티 포럼 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. 그리드 레이아웃, 대화형 요소를 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.
HTML 코드
<div class="bg-gray-100 dark:bg-gray-900 p-6 rounded-lg shadow-md">
<h1 class="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-4">Community Forum</h1>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/100" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">John Doe</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Understanding Material Design</h2>
<p class="text-gray-600 dark:text-gray-300">This post discusses the key principles of Material Design and how to implement them effectively using Tailwind CSS.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/101" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/10.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">Jane Smith</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Tailwind CSS for Beginners</h2>
<p class="text-gray-600 dark:text-gray-300">A beginner's guide to Tailwind CSS, exploring its utility-first approach and customization options.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/102" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/men/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">Michael Johnson</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Accessibility in Design</h2>
<p class="text-gray-600 dark:text-gray-300">Exploring the importance of accessibility in design and how to ensure your designs are inclusive.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
<div class="bg-white dark:bg-gray-800 rounded-lg shadow hover:shadow-lg transition-shadow duration-300">
<img src="https://picsum.photos/200/103" alt="Post Image" class="rounded-t-lg">
<div class="p-4">
<div class="flex items-center mb-2">
<img src="https://randomuser.me/api/portraits/women/20.jpg" class="w-8 h-8 rounded-full mr-2" alt="User Avatar">
<span class="font-semibold text-gray-700 dark:text-gray-200">Emily Davis</span>
</div>
<h2 class="font-bold text-lg text-gray-800 dark:text-gray-100 mb-2">Responsive Web Design</h2>
<p class="text-gray-600 dark:text-gray-300">Learn how to create responsive web designs that adapt to different screen sizes and devices.</p>
<div class="mt-4">
<a href="#" class="text-blue-500 hover:text-blue-700 dark:hover:text-blue-400">Read More</a>
</div>
</div>
</div>
</div>
</div>관련 구성 요소
커뮤니티 포럼 구성 요소 9
커뮤니티 포럼 구성 요소로, 젖빛 유리와 같은 반투명 요소, 반응형 효과 및 어두운 테마 지원이 있는 glassmorphism 디자인을 특징으로 합니다.
Community Forum 구성 요소
Tailwind CSS를 사용하여 다크 모드로 스타일링된 반응형 커뮤니티 포럼 컴포넌트입니다. 이 구성 요소는 눈의 피로를 줄이기 위해 어두운 배경을 특징으로 하며 아바타 및 포럼 게시물에 대한 자리 표시자 이미지를 포함합니다.
Community Forum 구성 요소
전자 상거래를 위한 미니멀리스트 커뮤니티 포럼 구성 요소로, 깔끔한 디자인, 트라이어딕 색 구성표 및 다크 모드 지원을 특징으로 합니다.