JSFiddle - React, Tailwind, and code Playground

by Daniel Hall

HTML

<button id="replaceButton">send</button>
<div id="inputWords">
 <ul>
   <li>
     <input type="text" id="adj1">
     <br> back text
    </li>
    <!-- put other input fields here -->
    
   </ul>
</div>
<div id="story">

</div>
<div id="body"></div>
<div id="body2"><p>from your frend: hello player!</p></div>
<div id="body3"><p>from your frend: thanks for the texted</p></div>

</div>

CSS

body {
    font-family:  "Comic Sans MS"
}
p {
    font-size  500em
}
#body {
    position: absolute;;
    left: 25%
    top: 35%;
    width: 60%;
    height: 60%;
    background-color:  #cacaca;
    text-align:center;
    padding-top: 30px;
}
#body2 {
    position: absolute;
    left: 9%;
    top: 20%;
    width: 45%;
    height: 45%;
    background-color:  #CD5C5C;
    text-align:center;
    padding-top: 30px;
}
#body3 {
    position: absolute;
    left: 70%;
    top: 60%;
    width: 25%;
    height: 25%;
    background-color:  #cacaca;
    text-align:center;
    padding-top: 100px;
}