Insta Generate: Password

.slider-header display: flex; justify-content: space-between; font-size: 14px; font-weight: 500; color: #262626; margin-bottom: 12px;

.strength-label display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: #4a4e69;

<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> insta generate password

.insta-card:hover transform: translateY(-4px);

.strength-fill width: 0%; height: 100%; border-radius: 12px; transition: width 0.3s ease, background 0.2s; .slider-header display: flex

<div class="check-group"> <label><input type="checkbox" id="uppercase" checked> A-Z</label> <label><input type="checkbox" id="lowercase" checked> a-z</label> <label><input type="checkbox" id="numbers" checked> 0-9</label> <label><input type="checkbox" id="symbols" checked> !@#$%&*</label> </div>

.copy-btn background: none; border: none; cursor: pointer; padding: 10px; border-radius: 40px; transition: all 0.2s; display: flex; align-items: center; justify-content: center; .strength-label display: flex

<div class="insta-card"> <div class="insta-header"> <h1> 🔐 <span>Insta Pass</span> ✨ </h1> <p>Generate strong, unique passwords like a pro</p> </div>