Form by nathann09
#e8e8e8
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}
11K views
11K views
mikerly131 27. December 2023. at 15:13
27. December 2023. at 15:13
Thanks nathann09, it looks sleek and helped me get my front-end in a demo state in a tight timeline.
MIT License