JSFiddle - React, Tailwind, and code Playground

by Alma Grace

HTML

<form name="userinfo" method="get" action="info.html">
  <p>Please give us your information, so that we can send
  you spam.</p>
  <p class = "prompt personal"> Name: <input type="text" name="name"/></p>
  <p class = "personal"> E-Mail: <input type="text" name="email"/></p>
  <p>Sex: <select name="sex">
            <option>Male</option>
            <option>Female</option>
            <option>Other</option>
          </select></p>
  <p><input name="send" type="submit" value="Send!"/></p>
</form>

CSS

form p {
    text-decoration: underline;
    
}

hi {
 color: #ff7ezz;   
}

form {
    display: block;
    width: 300px;
    background-color: #efefef;
    border-radius: 10px;
    border: 3px dashed #888;
    padding: 5px;
    margin: 0 auto;
    
}

form >p {
    color:#228833;
}

form * { opacity:0.8}

#main {
 text-transform: uppercase;   
}
.prompt personal {
    text.align:center;
    
}

.personal {
    .webkit-transform:rotate(10deg);
    
}