JSFiddle - React, Tailwind, and code Playground

by Daniel Hall

HTML

<div id="robot">
<div id="body"><p id="message">Welcome to message app</p></div>
<button id="replaceButton">Send it!</button>
<div id="inputWords">
  <ul>
    <li>
      <input type="text" id="adj1">
      <br>Message
    </li>
    <!-- put other input fields here -->
    
 
  </ul>
</div>       
<div id="story">

</div>
<div id="body"><p>message failed</p></div>
<button id=replaceButton>try again</button>

CSS

body {
   font-family: Arial;
}
p {
    font-size: 3em;
}
#body {
    positson: absolute;
    left: 40%;
    top: 10%;
    width: 45%;
    height: 100%;
    background-color:   #cacaca;
    text-align:bottom;
    padding-top: 200px;
}
input [type=text] {
    border-width: 0 0 1px 0;
    border-color:  #333;
}
#buttonDiv {
    text-align: center;
}
#replaceButton {
    margin-top: 30px;
    width: 25%;
}
#story {
    margin-top: 12px;
    width: 15%;
    border: 1px dashed blue;
    padding: 6px;
    float: ;
}
.replacement {
    text-decoration: underline;
    text-transform: uppercase;
}
#body2 {
    position: absolute;
    left: 900%;
    top: 35%;
    width: 45%;
    height: 55%;
    backgroud-color:  #dadad;
    text-align:center;
    padding-top: 300px;
}