Glassmorphism Rating Feedback Form

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="glassfeed-card" onsubmit="return false;"><h4>Your Feedback</h4><p>How was your overall experience?</p><div class="glassfeed-stars"><span>★</span><span>★</span><span>★</span><span>★</span><span>☆</span></div><textarea rows="3" placeholder="Write a comment..."></textarea><button type="submit">Send Review</button></form>

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

.glassfeed-card { width: 210px; background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 14px; padding: 16px; font-family: system-ui, sans-serif; color: #fff; margin: auto; box-sizing: border-box; text-align: center; }
.glassfeed-card h4 { margin: 0; font-size: 11px; font-weight: 800; }
.glassfeed-card p { margin: 4px 0 10px; font-size: 7px; color: #94a3b8; }
.glassfeed-stars { color: #f59e0b; font-size: 14px; margin-bottom: 10px; letter-spacing: 2px; cursor: pointer; }
.glassfeed-card textarea { width: 100%; background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 6px; font-size: 8px; color: #fff; outline: none; box-sizing: border-box; resize: none; margin-bottom: 10px; }
.glassfeed-card button { width: 100%; background: #a855f7; color: #fff; border: none; border-radius: 6px; padding: 7px; font-size: 8px; font-weight: 800; cursor: pointer; }