Form by Yaya12085
#212121
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}
14K views
14K views
MIT License