제품 리뷰 Component - Paper/Print-Neon/Electric
종이/인쇄물에서 영감을 받은 디자인과 네온/전기 색 구성표가 있는 간단하고 반응이 빠른 제품 리뷰 구성 요소로, 문서 또는 Wiki 사이트에 적합합니다. 다크 모드 지원이 포함됩니다.
HTML 코드
<div class="font-sans antialiased bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 p-4 sm:p-6 lg:p-8">
<!-- Review Card Container -->
<div class="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Review Card 1 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-gray-300 dark:border-gray-700
relative transition-all duration-300 ease-in-out
hover:scale-[1.01] hover:shadow-2xl hover:border-fuchsia-500 dark:hover:border-lime-400
p-6 sm:p-8">
<!-- Corner Fold Effect -->
<div class="absolute top-0 right-0 w-0 h-0 border-t-[30px] border-l-[30px] border-r-fuchsia-400 dark:border-r-lime-400 border-t-transparent border-l-transparent
transform rotate-45 origin-top-right translate-x-2 translate-y-2"></div>
<div class="flex items-center mb-4">
<img src="https://randomuser.me/api/portraits/women/6.jpg" alt="User Avatar" class="w-12 h-12 rounded-full border-2 border-fuchsia-400 dark:border-lime-400 object-cover mr-4">
<div>
<p class="font-semibold text-lg text-fuchsia-600 dark:text-lime-400">Alice Johnson</p>
<div class="flex mt-1">
<!-- Star Rating (Neon Blue) -->
<svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-fuchsia-500 dark:text-lime-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-fuchsia-500 dark:text-gray-600 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
</div>
</div>
</div>
<h3 class="text-xl font-bold mb-3 text-fuchsia-700 dark:text-lime-300">"Absolutely fantastic!"</h3>
<p class="text-base leading-relaxed text-gray-700 dark:text-gray-300">
This product exceeded my expectations. The documentation is clear and concise, making it incredibly easy to set up and use.
Highly recommend for anyone seeking reliability and performance. A true game-changer!
</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Reviewed on <time datetime="2023-10-26">October 26, 2023</time></p>
</div>
<!-- Review Card 2 -->
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border-4 border-gray-300 dark:border-gray-700
relative transition-all duration-300 ease-in-out
hover:scale-[1.01] hover:shadow-2xl hover:border-sky-500 dark:hover:border-cyan-400
p-6 sm:p-8">
<!-- Corner Fold Effect -->
<div class="absolute top-0 right-0 w-0 h-0 border-t-[30px] border-l-[30px] border-r-sky-400 dark:border-r-cyan-400 border-t-transparent border-l-transparent
transform rotate-45 origin-top-right translate-x-2 translate-y-2"></div>
<div class="flex items-center 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-sky-400 dark:border-cyan-400 object-cover mr-4">
<div>
<p class="font-semibold text-lg text-sky-600 dark:text-cyan-400">Mark Davis</p>
<div class="flex mt-1">
<!-- Star Rating (Neon Pink) -->
<svg class="w-5 h-5 text-sky-500 dark:text-cyan-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-sky-500 dark:text-cyan-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-sky-500 dark:text-cyan-400 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-gray-500 dark:text-gray-600 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
<svg class="w-5 h-5 text-gray-500 dark:text-gray-600 fill-current" viewBox="0 0 20 20"><path d="M10 15.2c-.2 0-.4-.1-.5-.3L6.3 12.3l-3.3-.5c-.4-.1-.7-.5-.6-.9s.4-.7.8-.7l3.7-.5.5-3.3c.1-.4.5-.7.9-.6s.7.4.6.8l-.5 3.7 3.3.5c.4.1.7.5.6.9s-.4.7-.8.7l-3.7.5-.5 3.3c-.1.4-.5.7-.9.6s-.7-.4-.6-.8L9.5 15c.1-.1.2-.2.2-.3z"/></svg>
</div>
</div>
</div>
<h3 class="text-xl font-bold mb-3 text-sky-700 dark:text-cyan-300">"Good, but room for improvement."</h3>
<p class="text-base leading-relaxed text-gray-700 dark:text-gray-300">
The product works as advertised, and the core functionality is solid. Some sections of the documentation could be more detailed,
especially for advanced users. Overall, a useful tool with potential.
</p>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-4">Reviewed on <time datetime="2023-10-20">October 20, 2023</time></p>
</div>
</div>
<!-- Optional: Add a call to action or overall rating section -->
<div class="max-w-4xl mx-auto text-center mt-12 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-lg border-4 border-gray-300 dark:border-gray-700
relative overflow-hidden group">
<!-- Faint diagonal striped overlay for paper effect -->
<div class="absolute inset-0 bg-gradient-to-br from-transparent via-gray-100/10 to-transparent dark:via-gray-900/10 opacity-20
transform rotate-45 scale-150 pointer-events-none z-0"></div>
<div class="relative z-10">
<h2 class="text-3xl font-extrabold text-blue-700 dark:text-cyan-300 mb-4 tracking-tight">
What People Say About Us
</h2>
<p class="text-lg text-gray-700 dark:text-gray-300 mb-6">
We value your feedback! Leave a review and help us improve.
</p>
<a href="#" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full shadow-sm
text-white bg-fuchsia-600 hover:bg-fuchsia-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-fuchsia-500
dark:bg-lime-500 dark:hover:bg-lime-600 dark:focus:ring-lime-400
transform transition-all duration-300 ease-out
hover:scale-105 active:scale-95
group-hover:ring-offset-lime-300 dark:group-hover:ring-offset-fuchsia-300
group-hover:ring-fuchsia-500 dark:group-hover:ring-lime-400 group-hover:ring-2">
Submit Your Review
<svg class="ml-3 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
</div>관련 구성 요소
제품 리뷰 구성 요소 (Skeuomorphic Pastel)
복잡하고 반응이 빠른 Product Reviews 구성 요소는 파스텔 색상을 사용하고 다크 모드를 지원하는 스큐어모픽 디자인 미학으로 스타일링되었습니다. 겹쳐진 카드, 미묘한 그라디언트, 그림자가 있어 깊이를 더해줍니다. 아바타, 이름, 별점, 리뷰 텍스트 및 선택적 이미지가 포함됩니다. JavaScript 없이 Tailwind CSS를 단독으로 사용합니다.
Playful_Ocean_Product_Reviews_Component_Real_Estate
부동산 플랫폼을 위해 설계된 간단하고 장난스럽고 유쾌한 제품 리뷰 구성 요소입니다. 둥근 요소, 생생한 바다/파란색 색 구성표, 다크 모드 지원으로 완전한 반응성을 제공합니다.