Password — Insta Generate

<div class="password-area"> <div class="password-wrapper"> <input type="text" id="password" readonly placeholder="Your password"> <button class="copy-btn" id="copyBtn"> <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z" fill="#8e8e9e"/> </svg> </button> </div> <div id="copyMessage" style="text-align: right; font-size: 12px; margin-top: 6px; min-height: 20px;"></div> </div>

.copy-feedback font-size: 12px; margin-left: 8px; color: #2e7d32; font-weight: 500; insta generate password

input[type="range"]:focus outline: none; button class="copy-btn" id="copyBtn"&gt

input[type="range"] width: 100%; height: 6px; border-radius: 10px; background: #dbdfea; -webkit-appearance: none; div id="copyMessage" style="text-align: right

.check-group label display: flex; align-items: center; gap: 8px; font-size: 14px; color: #262626; cursor: pointer;

<button class="generate-btn" id="generateBtn">✨ Generate new password</button> </div>