JSFiddle - React, Tailwind, and code Playground

by akhiyadav1

HTML

<!DOCTYPE HTML>
<html lang="en" style="overflow: hidden;"><head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>HTML5 Fax Viewer</title>
     <link type="text/css" rel="stylesheet" href="iedit.css"></link>
     
<!--          <script src="kinetic-v4.0.0.js"></script>
 -->           <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.0.js"></script>

<!--          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

 --> <script type="text/javascript" src="iedit.js"></script>
</head>
<body onmousedown="return false;">                                                                 
<!-- Tool Bar DIV Start -->
  <div class="toolBarDiv">
          <div class="ToolBar" id="optionsToolBar">
            <div class="toolbargroup">
                <a class="toolBarItem OpenFile" title="OpenFile" id="OpenFile" onclick="javascript:document.getElementById('files').click();"></a>
                <a class="toolBarItem Pan" title="Pan" id="Pan" onclick="PanImage();"></a>
                <a class="toolBarItem FitImage" title="Original Fit" id="FitImage" onclick="noZoomPan();"></a>
                <a class="toolBarItem ZoomIn" title="Zoom In" id="ZoomIn" onclick="zoomIn();"></a>
                <a class="toolBarItem ZoomOut" title="Zoom Out" id="ZoomOut" onclick="zoomOut();"></a>
                <a class="toolBarItem Pen" title="Pen" id="Pen" onclick="setPencil()"></a>
                <a class="toolBarItem Eraser" title="Eraser" id="Eraser" onclick="setEraser();"></a>
                <a class="toolBarItem RotateClock" title="Rotate Clockwise" id="RotateClock" onclick="rotateClock()"></a>
                <a class="toolBarItem RotateCounterClock" title="Rotate Counter Clockwise" id="RotateCounterClock"...

CSS

body { background:#eee; margin:1em; text-align:center; }
canvas { display:block; margin:1em auto; background:#eee; border:1px solid #ccc; }
.toolBarDiv
{
    top:36px;
    left:0px;
    
}

.ToolBar div
{
   margin-left:5px;
}

.toolbargroup
{   
   float:left;
}

.toolBarItem
{
   margin-right:2px;
   margin-top:2px;
   margin-bottom:2px;
   cursor:pointer;
   display:block;
   height:50px;
   width:50px;   
   float:left;
}

.Tools
{
   display:block;
   width:50px;
   height:50px;
   background:url(https://lh3.googleusercontent.com/-L8MwUFK9icQ/UNK1O3DBMJI/AAAAAAAAAA8/PWmRHBW5LX4/s500/sprite-sheet.png) -0px -100px;
}
.Tools:hover
{
   display:block;
   width:50px;
   height:50px;
   background:url(https://lh3.googleusercontent.com/-L8MwUFK9icQ/UNK1O3DBMJI/AAAAAAAAAA8/PWmRHBW5LX4/s500/sprite-sheet.png) -0px -150px;
}
.DateTime
{
   display:block;
   width:50px;
   height:50px;
   background:url(https://lh3.googleusercontent.com/-L8MwUFK9icQ/UNK1O3DBMJI/AAAAAAAAAA8/PWmRHBW5LX4/s500/sprite-sheet.png) -100px -100px;
}
.DateTime:hover
{
   display:block;
   width:50px;
   height:50px;
   background:url(https://lh3.googleusercontent.com/-L8MwUFK9icQ/UNK1O3DBMJI/AAAAAAAAAA8/PWmRHBW5LX4/s500/sprite-sheet.png) -100px -150px;
}
.Text
{
   display:block;
   width:50px;
   height:50px;
   background:url(https://lh3.googleusercontent.com/-L8MwUFK9icQ/UNK1O3DBMJI/AAAAAAAAAA8/PWmRHBW5LX4/s500/sprite-sheet.png) -50px -100px;
}
.Text:hover
{
   display:block;
   width:50px;
   height:50px;
   background:url(https://lh3.googleusercontent.com/-L8MwUFK9icQ/UNK1O3DBMJI/AAAAAAAAAA8/PWmRHBW5LX4/s500/sprite-sheet.png) -50px -150px;
}
.Pan
{
   display:block;
   width:50px;
   height:50px;
   background:url(https://lh3.googleusercontent.com/-L8MwUFK9icQ/UNK1O3DBMJI/AAAAAAAAAA8/PWmRHBW5LX4/s500/sprite-sheet.png) -50px -0px;
}
.Pan:hover
{
   display:block;
   width:50px;
   height:50px;
  ...