Profile Settings Update Card

<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<form class="profile-card" onsubmit="return false;"><div class="prof-head"><div class="prof-avatar">JD</div><button type="button" class="change-btn">Change Avatar</button></div><label>DISPLAY NAME</label><input type="text" value="Jane Doe"><label>USERNAME</label><input type="text" value="@janedoe"><label>BIO</label><textarea rows="2">Product designer & Developer based in Madrid.</textarea><button type="submit" class="save-btn">Save Changes</button></form>

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

.profile-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; margin: auto; box-sizing: border-box; }
.prof-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.prof-avatar { width: 32px; height: 32px; border-radius: 50%; background: #e0e7ff; color: #4338ca; font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.change-btn { background: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px; padding: 4px 8px; font-size: 7px; font-weight: 700; color: #334155; cursor: pointer; }
.profile-card label { display: block; font-size: 6px; font-weight: 800; color: #64748b; margin: 6px 0 2px; }
.profile-card input, .profile-card textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; padding: 5px 7px; font-size: 8px; color: #0f172a; outline: none; box-sizing: border-box; font-family: inherit; }
.profile-card textarea { resize: none; }
.save-btn { width: 100%; background: #16a34a; color: #fff; border: none; border-radius: 6px; padding: 7px; font-size: 8px; font-weight: 800; cursor: pointer; margin-top: 8px; }