게임 제품 리뷰 구성 요소
게임 웹사이트를 위한 재미있고 생동감 넘치는 제품 리뷰 구성 요소로, 둥근 요소, 채도가 높은 색상, 별 등급, 사용자 아바타, 리뷰 텍스트 및 좋아요/싫어요 버튼이 있는 풍부한 인터페이스를 특징으로 합니다. 다크 모드 지원으로 완벽하게 반응합니다.
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>관련 구성 요소
레트로 제품 리뷰 카드
레트로/빈티지 미학으로 디자인된 제품 리뷰 구성 요소로, 트라이어딕 색 구성표(청록색, 자홍색, 호박색)를 사용합니다. 간단하고 반응이 빠르며 다크 모드를 지원하며 제품 피드백을 보여주는 포트폴리오에 적합합니다. Tailwind CSS를 사용합니다.
제품 리뷰 구성 요소
블로그 또는 콘텐츠 사이트에 적합한 간단하고 반응이 빠른 제품 리뷰 구성 요소로, 머티리얼 디자인 원칙에 따라 설계되었습니다. 트라이어드 색 구성표와 다크 모드 지원이 특징입니다.