Interactive Product Feedback Survey Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="feedback-card" onsubmit="return false;"><h3>Rate Experience</h3><p>How was your overall purchase?</p><div class="star-rating"><input type="radio" id="st5" name="rate" value="5"><label for="st5">★</label><input type="radio" id="st4" name="rate" value="4"><label for="st4">★</label><input type="radio" id="st3" name="rate" value="3"><label for="st3">★</label><input type="radio" id="st2" name="rate" value="2"><label for="st2">★</label><input type="radio" id="st1" name="rate" value="1"><label for="st1">★</label></div><textarea placeholder="Write your thoughts..." rows="3" required></textarea><button type="submit">Submit Review</button></form>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.feedback-card { width: 210px; background: #ffffff; border-radius: 16px; padding: 18px; box-shadow: 0 15px 35px rgba(0,0,0,0.06); font-family: system-ui, sans-serif; text-align: center; margin: auto; box-sizing: border-box; }
.feedback-card h3 { margin: 0; font-size: 13px; font-weight: 800; color: #0f172a; }
.feedback-card p { margin: 2px 0 10px; font-size: 7px; color: #64748b; }
.star-rating { display: flex; flex-direction: row-reverse; justify-content: center; gap: 4px; margin-bottom: 10px; }
.star-rating input { display: none; }
.star-rating label { font-size: 16px; color: #cbd5e1; cursor: pointer; transition: color 0.2s; }
.star-rating label:hover, .star-rating label:hover ~ label, .star-rating input:checked ~ label { color: #f59e0b; }
.feedback-card textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 8px; padding: 6px 8px; font-size: 8px; outline: none; font-family: inherit; margin-bottom: 8px; box-sizing: border-box; resize: none; }
.feedback-card button { width: 100%; background: #0f172a; color: #fff; border: none; border-radius: 8px; padding: 8px; font-size: 8px; font-weight: 800; cursor: pointer; }