JSFiddle - React, Tailwind, and code Playground

by JohannesDeml

HTML

<script type="text/javascript">
function bigger()
{
	document.getElementById("box").style.width="100%";
}
function smaller()
{
	document.getElementById("box").style.width="100px";
}
</script>

<button onclick="bigger()">bigger</button>
<button onclick="smaller()">smaller</button>
<div id="box">
</div>

CSS

#box
{
	width:200px;
	height:200px;
	background-color:red;
	-webkit-transition:300ms linear;
	-moz-transition:300ms linear;
	-o-transition:300ms linear;
	-ms-transition:300ms linear;
	transition:300ms linear;
}

#box:hover
{
	width:400px;
}