JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<button onclick="large();">make large</button>
<button onclick="small();">make small</button>
<br/>
<canvas id="Canvas" style="width: 50px; height: 73px;" height="73" width="50"></canvas>

CSS

canvas
{
    background-color: yellow;
    transition: width 2s ease,height 2s linear;
    -moz-transition:width 2s ease, height 2s linear;
    -webkit-transition:width 2s ease, height 2s linear;
}

JavaScript

function large()
{
    document.getElementById("Canvas").height = 62;
    document.getElementById("Canvas").width = 114;
    document.getElementById("Canvas").style.width = "114px";
    document.getElementById("Canvas").style.height = "62px";
}

function small()
{
    document.getElementById("Canvas").height = 73;
    document.getElementById("Canvas").width = 50;
    document.getElementById("Canvas").style.width = "50px";
    document.getElementById("Canvas").style.height = "73px";
}