1.5K 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.input-container span { 40 display: grid; 41 position: absolute; 42 top: 0; 43 bottom: 0; 44 right: 0; 45 padding-left: 1rem; 46 padding-right: 1rem; 47 place-content: center; 48} 49 50.input-container span svg { 51 color: #9CA3AF; 52 width: 1rem; 53 height: 1rem; 54} 55 56.submit { 57 display: block; 58 padding-top: 0.75rem; 59 padding-bottom: 0.75rem; 60 padding-left: 1.25rem; 61 padding-right: 1.25rem; 62 background-color: #4F46E5; 63 color: #ffffff; 64 font-size: 0.875rem; 65 line-height: 1.25rem; 66 font-weight: 500; 67 width: 100%; 68 border-radius: 0.5rem; 69 text-transform: uppercase; 70} 71 72.signup-link { 73 color: #6B7280; 74 font-size: 0.875rem; 75 line-height: 1.25rem; 76 text-align: center; 77} 78 79.signup-link a { 80 text-decoration: underline; 81}
HTML
1 2 <form class="form"> 3 <p class="form-title">Sign in to your account</p> 4 <div class="input-container"> 5 <input placeholder="Enter email" type="email"> 6 <span> 7 <svg stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 8 <path d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path> 9 </svg> 10 </span> 11 </div> 12 <div class="input-container"> 13 <input placeholder="Enter password" type="password"> 14 15 <span> 16 <svg stroke="currentColor" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> 17 <path d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path> 18 <path d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" stroke-width="2" stroke-linejoin="round" stroke-linecap="round"></path> 19 </svg> 20 </span> 21 </div> 22 <button class="submit" type="submit"> 23 Sign in 24 </button> 25 26 <p class="signup-link"> 27 No account? 28 <a href="">Sign up</a> 29 </p> 30 </form> 31