게임 제품 리뷰 구성 요소
게임 웹사이트를 위한 재미있고 생동감 넘치는 제품 리뷰 구성 요소로, 둥근 요소, 채도가 높은 색상, 별 등급, 사용자 아바타, 리뷰 텍스트 및 좋아요/싫어요 버튼이 있는 풍부한 인터페이스를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.
HTML 코드
<div class="font-sans p-4 sm:p-6 md:p-8 bg-gradient-to-br from-purple-100 to-pink-100 dark:from-purple-900 via-pink-900 to-indigo-900 rounded-3xl shadow-2xl max-w-4xl mx-auto transform hover:scale-105 transition-all duration-300">
<div class="flex items-center justify-between mb-6">
<h2 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-purple-800 dark:text-purple-300 drop-shadow-lg leading-tight">
Player Reviews
</h2>
<div class="relative group">
<button class="px-4 py-2 sm:px-6 sm:py-3 bg-yellow-400 hover:bg-yellow-500 text-purple-900 dark:bg-yellow-600 dark:hover:bg-yellow-700 dark:text-purple-100 font-bold rounded-full shadow-lg transition-all duration-300 transform active:scale-95 flex items-center">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd"></path></svg>
Write a Review
</button>
<div class="absolute hidden group-hover:block bg-white dark:bg-gray-800 border dark:border-gray-700 rounded-lg p-3 text-sm text-gray-800 dark:text-gray-200 right-0 mt-2 whitespace-nowrap shadow-xl z-10 animate-fade-in-down">
Share your experience!
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 sm:gap-8">
<!-- Review Card 1 -->
<article class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-xl border-t-4 border-yellow-400 dark:border-yellow-600 transform hover:-translate-y-2 transition-transform duration-300">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-purple-400 dark:border-purple-600 object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar of John Doe">
<div>
<h3 class="text-lg sm:text-xl font-bold text-purple-700 dark:text-purple-300">PlayerOne</h3>
<time datetime="2023-01-15" class="text-sm text-gray-500 dark:text-gray-400">January 15, 2023</time>
</div>
</div>
<div class="flex items-center mb-4">
<div class="flex text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
<p class="ml-2 text-sm font-semibold text-gray-600 dark:text-gray-300">4.0</p>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-4">
"Highly addictive gameplay! I've lost countless hours to this game, and I don't regret a single one. The graphics are stunning, and the storyline keeps you totally engaged. A must-play for any serious gamer. The multiplayer could use some tweaks, but overall, solid."
</p>
<div class="flex justify-between items-center">
<div class="flex space-x-2">
<button class="flex items-center text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-bold">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.995 20H18a2 2 0 002-2V8.118l-.7-1.12A4 4 0 0015.588 5H13V3a2 2 0 00-2-2H9.847a2 2 0 00-1.802 1.1l-.813 1.626A2 2 0 014.72 6H2.667A2.667 2.667 0 000 8.667v1.666A2.667 2.667 0 002.667 13H3a1 1 0 001-1v-1.667a4 4 0 01.996-2.502L6 10.333z"></path></svg>
<span class="text-sm">123</span>
</button>
<button class="flex items-center text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-bold">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667V4.237a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.005 0H2a2 2 0 00-2 2v10.882l.7 1.12A4 4 0 004.412 15H7v2a2 2 0 002 2h2.153a2 2 0 001.802-1.1l.813-1.626A2 2 0 0115.28 14H17.333A2.667 2.667 0 0020 11.333V9.667A2.667 2.667 0 0017.333 7H17a1 1 0 00-1 1v1.667a4 4 0 01-.996 2.502L14 9.667z"></path></svg>
<span class="text-sm">5</span>
</button>
</div>
<a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-semibold text-sm transition-colors duration-200">Read More</a>
</div>
</article>
<!-- Review Card 2 -->
<article class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-xl border-t-4 border-green-400 dark:border-green-600 transform hover:-translate-y-2 transition-transform duration-300">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-pink-400 dark:border-pink-600 object-cover" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar of Jane Smith">
<div>
<h3 class="text-lg sm:text-xl font-bold text-green-700 dark:text-green-300">PixelQueen</h3>
<time datetime="2023-01-20" class="text-sm text-gray-500 dark:text-gray-400">January 20, 2023</time>
</div>
</div>
<div class="flex items-center mb-4">
<div class="flex text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
<p class="ml-2 text-sm font-semibold text-gray-600 dark:text-gray-300">5.0</p>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-4">
"Absolutely gorgeous game! The art style is unique and the characters are so charming. Every level feels fresh, and the puzzles are just challenging enough to be fun without being frustrating. Highly recommend for a relaxing yet engaging experience. Best game I've played all year!"
</p>
<div class="flex justify-between items-center">
<div class="flex space-x-2">
<button class="flex items-center text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-bold">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.995 20H18a2 2 0 002-2V8.118l-.7-1.12A4 4 0 0015.588 5H13V3a2 2 0 00-2-2H9.847a2 2 0 00-1.802 1.1l-.813 1.626A2 2 0 014.72 6H2.667A2.667 2.667 0 000 8.667v1.666A2.667 2.667 0 002.667 13H3a1 1 0 001-1v-1.667a4 4 0 01.996-2.502L6 10.333z"></path></svg>
<span class="text-sm">256</span>
</button>
<button class="flex items-center text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-bold">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667V4.237a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.005 0H2a2 2 0 00-2 2v10.882l.7 1.12A4 4 0 004.412 15H7v2a2 2 0 002 2h2.153a2 2 0 001.802-1.1l.813-1.626A2 2 0 0115.28 14H17.333A2.667 2.667 0 0020 11.333V9.667A2.667 2.667 0 0017.333 7H17a1 1 0 00-1 1v1.667a4 4 0 01-.996 2.502L14 9.667z"></path></svg>
<span class="text-sm">12</span>
</button>
</div>
<a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-semibold text-sm transition-colors duration-200">Read More</a>
</div>
</article>
<!-- Review Card 3 -->
<article class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-xl border-t-4 border-orange-400 dark:border-orange-600 transform hover:-translate-y-2 transition-transform duration-300">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-green-400 dark:border-green-600 object-cover" src="https://randomuser.me/api/portraits/men/8.jpg" alt="Avatar of Alex Gamer">
<div>
<h3 class="text-lg sm:text-xl font-bold text-orange-700 dark:text-orange-300">ArcadeKing</h3>
<time datetime="2023-01-25" class="text-sm text-gray-500 dark:text-gray-400">January 25, 2023</time>
</div>
</div>
<div class="flex items-center mb-4">
<div class="flex text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
<p class="ml-2 text-sm font-semibold text-gray-600 dark:text-gray-300">3.0</p>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-4">
"It's okay. Decent graphics but the controls are a bit clunky on PC. I had to remap a lot of keys. The story is pretty standard, nothing groundbreaking. Fun for a few hours, but then it gets repetitive. Good time-waster, but probably won't revisit often."
</p>
<div class="flex justify-between items-center">
<div class="flex space-x-2">
<button class="flex items-center text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-bold">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.995 20H18a2 2 0 002-2V8.118l-.7-1.12A4 4 0 0015.588 5H13V3a2 2 0 00-2-2H9.847a2 2 0 00-1.802 1.1l-.813 1.626A2 2 0 014.72 6H2.667A2.667 2.667 0 000 8.667v1.666A2.667 2.667 0 002.667 13H3a1 1 0 001-1v-1.667a4 4 0 01.996-2.502L6 10.333z"></path></svg>
<span class="text-sm">78</span>
</button>
<button class="flex items-center text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-bold">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667V4.237a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.005 0H2a2 2 0 00-2 2v10.882l.7 1.12A4 4 0 004.412 15H7v2a2 2 0 002 2h2.153a2 2 0 001.802-1.1l.813-1.626A2 2 0 0115.28 14H17.333A2.667 2.667 0 0020 11.333V9.667A2.667 2.667 0 0017.333 7H17a1 1 0 00-1 1v1.667a4 4 0 01-.996 2.502L14 9.667z"></path></svg>
<span class="text-sm">45</span>
</button>
</div>
<a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-semibold text-sm transition-colors duration-200">Read More</a>
</div>
</article>
<!-- Review Card 4 -->
<article class="bg-white dark:bg-gray-800 rounded-2xl p-5 shadow-xl border-t-4 border-blue-400 dark:border-blue-600 transform hover:-translate-y-2 transition-transform duration-300">
<div class="flex items-center mb-4">
<img class="w-12 h-12 rounded-full mr-4 border-2 border-orange-400 dark:border-orange-600 object-cover" src="https://randomuser.me/api/portraits/women/10.jpg" alt="Avatar of Sarah Code">
<div>
<h3 class="text-lg sm:text-xl font-bold text-blue-700 dark:text-blue-300">CodeMaiden</h3>
<time datetime="2023-01-28" class="text-sm text-gray-500 dark:text-gray-400">January 28, 2023</time>
</div>
</div>
<div class="flex items-center mb-4">
<div class="flex text-yellow-500 dark:text-yellow-400">
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
<svg class="w-5 h-5 fill-current text-gray-300 dark:text-gray-600" 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.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.538 1.118l-2.8-2.034a1 1 0 00-1.176 0l-2.8 2.034c-.783.57-1.838-.197-1.538-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.927 8.72c-.783-.57-.381-1.81.588-1.81h3.462a1 1 0 00.95-.69l1.07-3.292z"></path></svg>
</div>
<p class="ml-2 text-sm font-semibold text-gray-600 dark:text-gray-300">4.0</p>
</div>
<p class="text-gray-700 dark:text-gray-300 mb-4 leading-relaxed line-clamp-4">
"Pretty solid experience, especially with friends. The co-op mode is a blast! Some minor bugs here and there, but nothing game-breaking. Updates seem to come regularly, which is a good sign. It runs smoothly even on older hardware, which is a big plus for me."
</p>
<div class="flex justify-between items-center">
<div class="flex space-x-2">
<button class="flex items-center text-green-600 hover:text-green-700 dark:text-green-400 dark:hover:text-green-300 font-bold">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.995 20H18a2 2 0 002-2V8.118l-.7-1.12A4 4 0 0015.588 5H13V3a2 2 0 00-2-2H9.847a2 2 0 00-1.802 1.1l-.813 1.626A2 2 0 014.72 6H2.667A2.667 2.667 0 000 8.667v1.666A2.667 2.667 0 002.667 13H3a1 1 0 001-1v-1.667a4 4 0 01.996-2.502L6 10.333z"></path></svg>
<span class="text-sm">99</span>
</button>
<button class="flex items-center text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 font-bold">
<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667V4.237a2 2 0 00-1.106-1.79l-.05-.025A4 4 0 0011.005 0H2a2 2 0 00-2 2v10.882l.7 1.12A4 4 0 004.412 15H7v2a2 2 0 002 2h2.153a2 2 0 001.802-1.1l.813-1.626A2 2 0 0115.28 14H17.333A2.667 2.667 0 0020 11.333V9.667A2.667 2.667 0 0017.333 7H17a1 1 0 00-1 1v1.667a4 4 0 01-.996 2.502L14 9.667z"></path></svg>
<span class="text-sm">10</span>
</button>
</div>
<a href="#" class="text-purple-600 hover:text-purple-800 dark:text-purple-400 dark:hover:text-purple-200 font-semibold text-sm transition-colors duration-200">Read More</a>
</div>
</article>
</div>
<div class="flex justify-center mt-8">
<button class="px-6 py-3 bg-pink-500 hover:bg-pink-600 text-white dark:bg-pink-700 dark:hover:bg-pink-800 font-bold rounded-full shadow-lg transition-all duration-300 transform active:scale-95 flex items-center">
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
Load More Reviews
</button>
</div>
</div>
<style>
/* Add some playful custom animations if needed, though Tailwind mostly covers. */
/* Example: */
@keyframes fade-in-down {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in-down {
animation: fade-in-down 0.4s ease-out;
}
/* For line-clamp replacement since it's a CSS property, not a Tailwind class directly for utility classes */
.line-clamp-4 {
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Custom scrollbar for playful feel - optional and browser specific */
.no-scrollbar::-webkit-scrollbar {
display: none;
}
.no-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
</style>관련 구성 요소
제품 리뷰 구성 요소
비즈니스/기업 웹 사이트에 적합한 생생한 색 구성표로 다크 모드용으로 설계된 반응형 제품 리뷰 구성 요소입니다. 사용자 아바타, 리뷰 등급 및 사용자 댓글이 대화형 레이아웃으로 표시됩니다.
제품 리뷰 Component - Playful Jewel Tones with Reservation Focus
예약/예약에 초점을 맞춘 복잡하고 재미있는 제품 리뷰 구성 요소입니다. 보석 색조 색상, 둥근 요소, 다크 모드 지원으로 완전한 반응성을 제공합니다.