const styles = { formrow: { marginBottom: "32px", }, label: { display: "block", color: "#fff", fontSize: "16px", position: "relative", paddingRight: "5px", marginBottom: "10px", }, textbox: { backgroundColor: "rgba(0, 0, 0, 0.2)", border: "1px solid rgba(255, 255, 255, 0.1)", minHeight: "46px", color: "#fff", fontSize: "14px", borderRadius: "6px", width: "100%", padding: "4px 11px", }, textarea: { backgroundColor: "rgba(0, 0, 0, 0.2)", border: "1px solid rgba(255, 255, 255, 0.1)", minHeight: "100px", color: "#fff", fontSize: "14px", borderRadius: "6px", width: "100%", padding: "4px 11px", resize: "none", }, contentdiv: { padding: "32px", background: "#29244e", borderRadius: "0px 0px 10px 10px", }, pagename: { color: "#fff", padding: "16px", fontSize: "22px", backgroundColor: "#231D4B", fontWeight: 600, borderRadius: "5px", display: "flex", justifyContent: "center", }, formwrap: { background: "#29244e", maxWidth: "700px", margin: "16px auto", borderRadius: "10px", }, btnrow: { display: "flex", justifyContent: "center", }, btnback: { color: "rgba(255, 255, 255, 0.8)", fontSize: "16px", padding: "5px 16px", fontWeight: 400, background: "none", backgroundColor: "rgba(60, 53, 109, 0.5)", border: "1px solid rgba(255, 255, 255, 0.2)", boxShadow: "0 2px 0 rgba(0, 0, 0, 0.02)", height: "40px", borderRadius: "40px", lineHeight: "29px", letterSpacing: "0.01em", display: "flex", alignItems: "center", }, btn: { color: "rgba(255, 255, 255, 0.8)", fontSize: "16px", padding: "5px 16px", fontWeight: 400, background: "none", backgroundImage: "linear-gradient(145deg, #016EDA, #6C1ECF, #016EDA, #6C1ECF)", border: "1px solid rgba(255, 255, 255, 0.2)", boxShadow: "0 2px 0 rgba(0, 0, 0, 0.02)", height: "40px", borderRadius: "40px", lineHeight: "29px", letterSpacing: "0.01em", display: "flex", alignItems: "center", marginLeft: "16px", justifyContent: "center", maxWidth: "200px", }, }; return ( <> <div style={styles.formwrap}> <div style={styles.pagename}>Feature Request</div> <div style={styles.contentdiv}> <div style={styles.formrow}> <label style={styles.label}>Feature category*</label> <input style={styles.textbox} name="myInput" /> </div> <div style={styles.formrow}> <label style={styles.label}>e-mail*</label> <input style={styles.textbox} name="myInput" /> </div> <div style={styles.formrow}> <label style={styles.label}>Name</label> <input style={styles.textbox} name="myInput" /> </div> <div style={styles.formrow}> <label style={styles.label}>Feature description*</label> <textarea style={styles.textarea} name="w3review" rows="4" cols="50" ></textarea> </div> <div style={styles.btnrow}> <input style={styles.btn} type="submit" value="Submit" /> </div> </div> </div> </> );