JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<div id="container">
<div id="container-game">
<div id="game">
<div class="optionText" id="optionText">
<div class="option"></div>
</div>
</div>
</div>
</div>
</div>
CSS
#game {
font-family: Times, Times New Roman, serif;
font-size: 11.5px;
height: 577px;
line-height: 1.2;
margin: 1rem auto;
overflow: hidden;
transition: filter .6s ease, background .6s ease;
user-select: none;
width: 1025px;
}
#game-scene {
height: 100%;
width: 100%;
position: absolute;
}
#game #play {
position: relative;
display: inline-block;
margin: auto;
width: auto;
top: 270px;
padding: 0em 0.6em;
border-color: #c6f2fa;
background: linear-gradient(to right, #fff, #cbb7e6, #ffdef8, #fff);
box-shadow: 0.02em 0.02em 0.2em #f4d7c5;
font-weight: bold;
text-shadow: 0.02em 0.02em 0.05em #fdfeffe0;
font-size: 26px;
border-radius: 10px;
}
#content {
height: 609px;
width: 1250px;
background-color: #ffede780;
border-radius: 5px;
margin: auto;
margin-top: inherit;
box-shadow: 0px 1px 14px 3px #f79e9e;
border-color: linear-gradient(to right, #039ede, #27d6f6);
}
#container {
position: relative;
font-family: Rubik, cursive;
}
#text {
align-content: center
}
.optionText{
background-color: #ffede780;
cursor: pointer;
position: absolute;
bottom: auto;
left: 13%;
right: 13%;
padding: 8px;
margin-top: 41%
}
.option{
font-family: Times, Times New Roman, serif;
font-size: 22px;
color: black;
padding: 1px;
text-align: left;
margin: 1px;
}
JavaScript
var demo_history = {};