JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!DOCTYPE HTML>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />


<!-- LIBRARIES -->
<script language="javascript" type="text/javascript" src="../js/libs/jquery/JQuery-1.8.2.js"></script>
<script language="javascript" type="text/javascript" src="../js/libs/jqPlot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="../js/libs/jqPlot/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="../js/libs/jqPlot/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="../js/libs/jqPlot/logAxisRenderer.js"></script>
<script type="text/javascript" src="../js/libs/jqPlot/jqplot.pointLabels.min.js"></script>

<script type="text/javascript" src="../js/libs/underscore/underscore-min.js"> </script>
<script type="text/javascript" src="../js/libs/backbone/backbone-min.js"> </script>
<script type="text/javascript" src="../js/libs/jquery/jquery-ui-1.10.2.custom.min.js"></script>
<script src="../js/libs/jquery/jquery.mobile-1.3.0.min.js" type="text/javascript" charset="utf-8"></script>

<!-- SCRIPTS -->
<script src="../js/libs/iscroll/iscroll.js" type="text/javascript"></script>
<script src="../js/common/common.js" type="text/javascript"></script>

<!-- STYLESHEETS -->

<link rel="stylesheet" href="../css/jquery.mobile-1.3.0.min.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" type="text/css" href="../css/jquery-ui-1.10.2.custom.min.css" />
<link rel="stylesheet" href="../css/calculator.css" type="text/css"	media="screen" title="no title" charset="utf-8" />

<!-- iSCROLL INITIALISATION -->
<link rel="stylesheet" type="text/css" href="../css/jquery.jqplot.css" />

<!-- iSCROLL INITIALISATION -->
<link rel="stylesheet" type="text/css" href="../css/jquery.jqplot.css" />

<script type="text/javascript">

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    
    if (charCode ==...

CSS

*{
	margin: 0px;
	padding: 0px;	
}
html,body{width:100%;height:100%;}

/* HEADER */

.pageHeader{
	background : url("../images/reports_header.png");
	background-repeat : no-repeat;	
	background-size : 100% 100%;
	max-width : 100%;
	height:65.45px;
}

.salesToolPage{
	background : url("../images/bg.png");	
	background-repeat : no-repeat;	
	background-size : 100%;
	width : 100%;
	height:100%;
}
.borderBottom {
	border-bottom-style:none;
}


.sectionHeading{
	
	font-size:14px;
	color:white;
	padding : 1% 0 1% 0;
}



.questionComplexDesc1{
	margin-left : 2%;
	font-family:Arial;
	font-size:14px;
	font-weight:bold;
	color:#white;
	vertical-align:center;
	padding-top : 1%;
	background-color:#EBF4F8;
}


#searchButton{
	background: url("../images/calcCalculatorBtn.png");
	background-position : center;
	border: medium none;
	color: white;
	margin-top: 0.3em;
	vertical-align: middle;
  	width: 150px;
  	border-radius : 6px;
}

#pageHeadingText{
	text-align: left;
}

.headingImg{
	padding-left : 20px;
	vertical-align : middle;
}

.headingText{
	margin-top : 8px;	
}

.settingIcon{
	margin-right: 5em;
	margin-top: 0.3em;
	vertical-align: middle;
}

/* SIDEBAR */


div[data-role="content"]{	
	padding :0px;	
}

#navigation{
	position: relative;
	bottom:0px;
	top:60px;
	left: 0px;
	
}

nav{ 
	 width : 161px; 
	 float: left;
}

nav div{	
	position : relative;	
	display: block;	
	margin-top : 10px;	
	width : 161px;
	font-size: small;
}

nav b{	position: relative;	left:35px;	top:40%;}

/* CONTENT AREA */

#contentContainer{
	bottom:0px;
	top:60px;
	left: 10px;
	right:0px;
	width:100%;
	height:100%;
	margin-left:auto;
	margin-right:auto;
	overflow-y:hidden;
	z-index: 1;
}

#scroller {
	position:relative;
	float:left;
	width:100%;
	padding:0;
}

#navScroller{
	position:relative;
	float:left;
	width:100%;
	padding:0;
}

/* INPUTS */

.ui-input-text{
	margin: 0px;		
}


.first{
	color : black;
	font-weight :...