22 views
CSSAdd prefixes
1.form { 2 background-color: #fff; 3 display: block; 4 padding: 1rem; 5 max-width: 350px; 6 border-radius: 0.5rem; 7 box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); 8} 9 10.form-title { 11 font-size: 1.25rem; 12 line-height: 1.75rem; 13 font-weight: 600; 14 text-align: center; 15 color: #000; 16} 17 18.input-container { 19 position: relative; 20} 21 22.input-container input, .form button { 23 outline: none; 24 border: 1px solid #e5e7eb; 25 margin: 8px 0; 26} 27 28.input-container input { 29 background-color: #fff; 30 padding: 1rem; 31 padding-right: 3rem; 32 font-size: 0.875rem; 33 line-height: 1.25rem; 34 width: 300px; 35 border-radius: 0.5rem; 36 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); 37} 38 39.submit { 40 display: block; 41 padding-top: 0.75rem; 42 padding-bottom: 0.75rem; 43 padding-left: 1.25rem; 44 padding-right: 1.25rem; 45 background-color: #4F46E5; 46 color: #ffffff; 47 font-size: 0.875rem; 48 line-height: 1.25rem; 49 font-weight: 500; 50 width: 100%; 51 border-radius: 0.5rem; 52 text-transform: uppercase; 53} 54 55.signup-link { 56 color: #6B7280; 57 font-size: 0.875rem; 58 line-height: 1.25rem; 59 text-align: center; 60} 61 62.signup-link a { 63 text-decoration: underline; 64}
HTML
1 2 <form class="form"> 3 <p class="form-title">Sign in to your account</p> 4 <div class="input-container"> 5 <input type="email" placeholder="Enter email"> 6 <span> 7 </span> 8 </div> 9 <div class="input-container"> 10 <input type="password" placeholder="Enter password"> 11 </div> 12 <button type="submit" class="submit"> 13 Sign in 14 </button> 15 16 <p class="signup-link"> 17 No account? 18 <a href="">Sign up</a> 19 </p> 20 </form> 21