Comments Section 구성 요소
음식/레스토랑 웹사이트를 위한 복잡하고 매력적인 3D에서 영감을 받은 댓글 섹션 구성 요소로, 멋진 중립색, 완전한 응답성 및 다크 모드 지원을 제공합니다.
HTML 코드
<section class="bg-gray-100 dark:bg-gray-900 py-12 sm:py-16 lg:py-20 font-sans">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl sm:text-5xl lg:text-6xl font-extrabold text-center mb-12 sm:mb-16 dark:text-gray-100 leading-tight tracking-tight cool-neutral-text-gradient ">
What Our <span class="relative inline-block">
<span class="block absolute -inset-1 -skew-y-3 bg-red-500 dark:bg-red-700 rounded-lg"></span>
<span class="relative text-white dark:text-gray-900 drop-shadow-lg">Customers</span>
</span> Say
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 sm:gap-10 lg:gap-12">
<!-- Comment Card 1 -->
<div class="relative p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out
transform rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 perspective-1000
dark:hover:shadow-red-500/30
after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-red-500 after:rounded-l-lg
before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-red-400 before:rounded-t-lg
group">
<div class="absolute inset-0 bg-gradient-to-br from-red-50 to-orange-50 dark:from-gray-900 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl z-0"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="flex items-center mb-4">
<img class="w-14 h-14 rounded-full border-4 border-red-300 dark:border-red-600 shadow-lg" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Customer Avatar">
<div class="ml-4">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-100">Alice Johnson</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Food Critic</p>
</div>
</div>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</div>
<p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-grow">
"Absolutely blown away by the quality and flavor! The delivery was super fast, and the food arrived hot and fresh. This is my new go-to for online orders. Highly recommend the chef's special!"
</p>
<div class="flex justify-end mt-auto">
<a href="#" class="inline-flex items-center text-red-600 dark:text-red-400 font-semibold hover:underline">
Read More
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Comment Card 2 -->
<div class="relative p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out
transform rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 perspective-1000
dark:hover:shadow-blue-500/30
after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-blue-500 after:rounded-l-lg
before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-blue-400 before:rounded-t-lg
group">
<div class="absolute inset-0 bg-gradient-to-br from-blue-50 to-cyan-50 dark:from-gray-900 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl z-0"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="flex items-center mb-4">
<img class="w-14 h-14 rounded-full border-4 border-blue-300 dark:border-blue-600 shadow-lg" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Customer Avatar">
<div class="ml-4">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-100">Mark Smith</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Food Blogger</p>
</div>
</div>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-blue-300 dark:text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</div>
<p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-grow">
"This place truly understands flavor! Every dish I've tried has been exceptional, beautifully presented, and perfectly portioned. The online ordering system is a breeze. A definite culinary delight."
</p>
<div class="flex justify-end mt-auto">
<a href="#" class="inline-flex items-center text-blue-600 dark:text-blue-400 font-semibold hover:underline">
Read More
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
</div>
</div>
</div>
<!-- Comment Card 3 -->
<div class="relative p-6 sm:p-8 bg-white dark:bg-gray-800 rounded-3xl shadow-xl dark:shadow-2xl overflow-hidden hover:scale-105 transition-transform duration-300 ease-in-out
transform rotate-x-6 rotate-y-3 skew-x-2 skew-y-1 perspective-1000
dark:hover:shadow-green-500/30
after:absolute after:inset-y-0 after:left-0 after:w-1 after:bg-green-500 after:rounded-l-lg
before:absolute before:inset-x-0 before:top-0 before:h-1 before:bg-green-400 before:rounded-t-lg
group">
<div class="absolute inset-0 bg-gradient-to-br from-green-50 to-lime-50 dark:from-gray-900 dark:to-gray-800 opacity-0 group-hover:opacity-100 transition-opacity duration-300 rounded-3xl z-0"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="flex items-center mb-4">
<img class="w-14 h-14 rounded-full border-4 border-green-300 dark:border-green-600 shadow-lg" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Customer Avatar">
<div class="ml-4">
<p class="text-xl font-semibold text-gray-900 dark:text-gray-100">Sophia Lee</p>
<p class="text-sm text-gray-600 dark:text-gray-400">Food Enthusiast</p>
</div>
</div>
<div class="flex items-center mb-4">
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
<svg class="w-5 h-5 text-gray-300 dark:text-gray-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.817 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.683-1.539 1.118l-2.817-2.034a1 1 0 00-1.176 0l-2.817 2.034c-.784.565-1.83-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path>
</svg>
</div>
<p class="text-lg text-gray-700 dark:text-gray-300 leading-relaxed mb-6 flex-grow">
"I'm a regular here, and for good reason! The consistency of quality is impressive, and the customer service is outstanding. They always go the extra mile. Keep up the fantastic work!"
</p>
<div class="flex justify-end mt-auto">
<a href="#" class="inline-flex items-center text-green-600 dark:text-green-400 font-semibold hover:underline">
Read More
<svg class="ml-1 w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
</a>
</div>
</div>
</div>
</div>
<!-- Call to action for more reviews -->
<div class="mt-16 text-center">
<a href="#" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-bold rounded-full shadow-lg
bg-gradient-to-r from-red-500 to-orange-500 text-white
hover:from-red-600 hover:to-orange-600
dark:from-red-600 dark:to-orange-600
dark:hover:from-red-700 dark:hover:to-orange-700
transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105
focus:outline-none focus:ring-4 focus:ring-red-400 dark:focus:ring-red-700 focus:ring-opacity-75
cool-neutral-button-shadow">
View All Reviews
<svg class="ml-3 w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
</svg>
</a>
</div>
</div>
</section>
<style>
/* This CSS is typically handled by a global stylesheet or a build process */
.cool-neutral-text-gradient {
background-image: linear-gradient(to right, #4A5568, #2D3748);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
html.dark .cool-neutral-text-gradient {
background-image: linear-gradient(to right, #CBD5E0, #F7FAFC);
}
.perspective-1000 {
perspective: 1000px;
}
/* Custom 3D transformations for cards */
.transform {
transform-style: preserve-3d;
}
.cool-neutral-button-shadow {
box-shadow: 0 10px 20px rgba(239, 68, 68, 0.2), 0 6px 6px rgba(239, 68, 68, 0.2);
}
html.dark .cool-neutral-button-shadow {
box-shadow: 0 10px 20px rgba(185, 28, 28, 0.4), 0 6px 6px rgba(185, 28, 28, 0.4);
}
</style>관련 구성 요소
Comments Section 구성 요소
glassmorphism 디자인으로 스타일이 지정된 반응형 댓글 섹션 구성 요소로, 흐림 효과가 있는 젖빛 유리와 같은 반투명 요소와 Tailwind CSS를 사용하여 어두운 테마를 지원합니다.
코멘트섹션
반응형, 어두운 테마와 호환되는 댓글 섹션 구성 요소는 미니멀리스트/플랫 디자인, 트라이어딕 색 구성표 및 복잡한 상호 작용 요소를 갖춘 전자 상거래를 위한 것으로, Tailwind CSS로 제작되었습니다. 데모 이미지에는 picsum.photos 및 randomuser.me 를 사용합니다.