커뮤니티 포럼 구성 요소(E-commerce Bauhaus)
전자 상거래를 위해 설계된 간단하고 반응이 빠른 커뮤니티 포럼 구성 요소로, Bauhaus에서 영감을 받은 기하학적 형태와 차분한 색상 팔레트를 특징으로 합니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="p-4 sm:p-6 md:p-8 bg-gray-100 dark:bg-gray-900 min-h-screen font-sans antialiased">
<!-- Section Title -->
<h2 class="text-2xl sm:text-3xl font-bold mb-6 text-gray-800 dark:text-gray-100 text-center uppercase tracking-wider">
Customer Stories & Feedback
</h2>
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Forum Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 relative">
<div class="absolute -top-3 -left-3 w-8 h-8 bg-blue-500 transform rotate-45"></div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-blue-500 dark:border-blue-400 mr-4">
<div>
<p class="font-semibold text-lg text-gray-800 dark:text-gray-100">Jane Doe</p>
<p class="text-sm text-gray-500 dark:text-gray-400">2 hours ago</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Absolutely Transformed My Workflow!"</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
I was skeptical at first, but this product exceeded all my expectations. The quality is top-notch,
and it integrated seamlessly with my existing setup. Highly recommend for anyone looking to boost productivity!
</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<span class="flex items-center mr-4">
<svg class="w-4 h-4 mr-1 fill-blue-500 dark:fill-blue-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
12 Likes
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
5 Comments
</span>
</div>
</div>
<!-- Forum Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 relative">
<div class="absolute -top-3 -right-3 w-8 h-8 bg-red-500 transform -rotate-45"></div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/29.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-red-500 dark:border-red-400 mr-4">
<div>
<p class="font-semibold text-lg text-gray-800 dark:text-gray-100">John Smith</p>
<p class="text-sm text-gray-500 dark:text-gray-400">1 day ago</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Great Product, Minor Suggestion"</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
Overall, I'm very satisfied with my purchase. The build quality is solid, and it performs as advertised.
My only constructive feedback would be to consider adding 'X' feature in a future update.
</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<span class="flex items-center mr-4">
<svg class="w-4 h-4 mr-1 fill-red-500 dark:fill-red-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
8 Likes
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
2 Comments
</span>
</div>
</div>
<!-- Forum Card 3 (Placeholder for more, hidden on small screens) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 hidden md:block relative">
<div class="absolute -bottom-3 -right-3 w-8 h-8 bg-yellow-500 transform rotate-45"></div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/women/77.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-yellow-500 dark:border-yellow-400 mr-4">
<div>
<p class="font-semibold text-lg text-gray-800 dark:text-gray-100">Emily White</p>
<p class="text-sm text-gray-500 dark:text-gray-400">3 days ago</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"Fantastic Support Team!"</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
I had a small issue with my order, and the customer support was incredibly responsive and helpful.
They resolved my problem quickly and professionally. Really appreciate the dedication!
</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<span class="flex items-center mr-4">
<svg class="w-4 h-4 mr-1 fill-yellow-500 dark:fill-yellow-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
15 Likes
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
7 Comments
</span>
</div>
</div>
<!-- Forum Card 4 (Placeholder for more, hidden on small screens) -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-5 border border-gray-200 dark:border-gray-700 hidden md:block relative">
<div class="absolute -bottom-3 -left-3 w-8 h-8 bg-green-500 transform -rotate-45"></div>
<div class="flex items-start mb-4">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-green-500 dark:border-green-400 mr-4">
<div>
<p class="font-semibold text-lg text-gray-800 dark:text-gray-100">David Lee</p>
<p class="text-sm text-gray-500 dark:text-gray-400">5 days ago</p>
</div>
</div>
<h3 class="text-xl font-semibold mb-3 text-gray-700 dark:text-gray-200">"A Must-Have for Every Enthusiast!"</h3>
<p class="text-gray-600 dark:text-gray-300 mb-4 text-base leading-relaxed">
I've been looking for a product like this for ages. It delivers on all its promises and more.
Sturdy, efficient, and well-designed. Don't hesitate to buy it!
</p>
<div class="flex items-center text-gray-500 dark:text-gray-400 text-sm">
<span class="flex items-center mr-4">
<svg class="w-4 h-4 mr-1 fill-green-500 dark:fill-green-400" viewBox="0 0 24 24"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>
20 Likes
</span>
<span class="flex items-center">
<svg class="w-4 h-4 mr-1 fill-gray-500 dark:fill-gray-400" viewBox="0 0 24 24"><path d="M21 11.5c0-.83.67-1.5 1.5-1.5s1.5.67 1.5 1.5-.67 1.5-1.5 1.5-1.5-.67-1.5-1.5zM12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg>
10 Comments
</span>
</div>
</div>
</div>
<!-- Call to Action / View More -->
<div class="text-center mt-8">
<button class="px-6 py-3 bg-gray-700 dark:bg-gray-200 text-white dark:text-gray-900 font-bold uppercase rounded-md
tracking-wider hover:bg-gray-600 dark:hover:bg-gray-300 transition duration-300 ease-in-out
border border-gray-700 dark:border-gray-200 shadow-md">
View All Discussions
</button>
</div>
</div>관련 구성 요소
Community Forum 구성 요소
Material Design 원칙에 따라 설계된 반응형 커뮤니티 포럼 구성 요소로, 블로그 및 콘텐츠 소비에 적합합니다. 그리드 레이아웃, 대화형 요소를 특징으로 하며 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.
Community Forum 구성 요소
전자 상거래를 위한 미니멀리스트 커뮤니티 포럼 구성 요소로, 깔끔한 디자인, 트라이어딕 색 구성표 및 다크 모드 지원을 특징으로 합니다.
커뮤니티 포럼 구성 요소 - 레트로 오션 블루
80년대/90년대 복고풍 분위기의 단순하고 반응이 빠른 커뮤니티 포럼 구성 요소로, 직업 및 경력 플랫폼을 위해 설계되었습니다. 오션 블루 색 구성표와 다크 모드 지원이 특징입니다.