JSFiddle - React, Tailwind, and code Playground

by blueroof

HTML

<textarea type="textarea" id="fir" value="" onfocus="this.value=''"></textarea>
<p id = "slash"> / </p>
<textarea type="textarea" id="sec" value="" onfocus="this.value=''"></textarea>
<button onclick="TestGrade();" >Add</button>

CSS

#slash {
     font-size: 50px;
     color: #E86B00;
     display: inline-block;
  }
  textarea {
     border: 3px solid #FF9333;
     resize: none;
     height:30px;
     width:50px;
  }
  textarea:focus{
     border: 3px solid #E86D00;
     outline: none;
  }
  button {
    height: 30; width: 70;
    color: #FFFFFF;
    background-color: #FF7800;
  }
  button:hover {
    background-color: #E86D00;
    cursor: pointer;
  }
  button:active {
    background-color: #FF8315;
    border-right: 2px solid #DCDCDC;
    border-bottom: 2px solid #DCDCDC;
    border-top: 2px solid #ADADAD;
    border-left: 2px solid #ADADAD;
  }