JSFiddle - React, Tailwind, and code Playground

by Luke Arrington

HTML

<title></title>
<script>
function myFunction() { 
	document.getElementById("mainFrameOne").style.display="none"; 
	document.getElementById("mainFrameTwo").style.display="block"; 
}
function myFunctionTwo() {
document.getElementById("mainFrameTwo").style.display="none"; 
document.getElementById("mainFrameOne").style.display="block";
}
</script>
<body>
<div id="mainFrameOne">
    <p></p>
</div>
<div id="mainFrameTwo" style="display:none;">
    <p></p>
</div>
<p id="smokey" onclick="myFunction()">Green</p>
<p id="smokey" onclick="myFunctionTwo()">Pink</p>
</body>

CSS

#mainFrameOne {
  width: 300px;
  height: 150px;
  background-color: pink;
transition: visibility 0s, opacity 0.5s linear;
}
#mainFrameTwo {
  width: 300px;
  height: 150px;
  background-color: green;
transition: visibility 0s, opacity 0.5s linear;
}
#smokey {
  width: 60px;
  height: 25px;
  background-color: yellow;
}