JSFiddle - React, Tailwind, and code Playground

by learner001

HTML

<!-- main Container -->
<div class="main-wrapper">
    <!-- Header -->
    <div class="header-wrapper">
        <div class="logo-wrapper">
            <img id="imgLogo" class="logo" src="logo.jpg">
        </div>
        <div class="search-sm-wrapper">
            <div class="search-wrapper margin5-0">
                <input name="ctl00$btnSearch" value="Go!" id="btnSearch" class="btn-search btn" type="submit">
                <input name="ctl00$txtSearch" value="Search" id="txtSearch" class="txtSearch" onfocus="if(this.value=='Search')this.value='';" onblur="if(this.value=='')this.value='Search';" type="text">
            </div>
            <div class="language-wrapper margin00-5-0">
                <a href="login.aspx" class="language-link">Login</a>
            </div>
            <div class="sm-wrapper">

            </div>
        </div>
        <!-- Menu -->
        <div class="menu-wrapper">
            <div class="navbar">                             
                <nav id="menu" class="menu">
                   Menus...

                </nav>                                       
           </div>
        </div>
        <!-- Menu -->
     </div>
     <!-- Header -->
    <div class="content-wrapper">
          
<!-- Content Page-->
    <!-- banner image wrapper -->
        <div class="top-image-wrapper">
		Page Related Image will show up here & then menu will show at the bottom on this div after image
			<div class="page-sub-menu">
		Sub menus
			</div>
        </div>



     <!-- banner image wrapper -->
     
     <!-- page content wrapper -->
        <div id="page-content-area" class="page-content-area">
            <div id="pg-intro-area" class="pg-intro-area">
                <div class="page-title">
                    <h5>Page Title </h5>
                </div>

                <div class="page-text">

 Lorem ipsum dolor sit amet, donec amet, consectetuer ornare in, sodales vulputate pellentesque, tempus duis pharetra ut commodo laoreet vivamus....

CSS

html, body,form { height:100%;   background-color:gray; }
body {
  font-family:  Verdana,"Trebuchet MS",Arial,sans-serif;
   -webkit-font-smoothing: antialiased;
  font-size: 11px;
  line-height: 16px;
  height:100%; margin:0;padding:0; border:0;
  color:#656565;
}
p
{
    text-align:justify;
    color:#687074;
}
hr 
{
    background-color: #ccc;
    border: medium none;
    height: 1px;
    margin-bottom: 12px;
    margin-top: 12px;
}
h5 /* for page title*/
{
 font-size:15px;
 color:#028F41;   
 margin:5px 0;
}
.page-title-lbl
{
 font-size:15px;
 color:#028F41;   
 padding-left:105px;
 background-image:url("../images/title-bar.png");
 background-repeat:no-repeat; 
 text-shadow:0 0 0px #F6F6F6;
}
img
{
border:0px
}

a {
  color: #028F41;
  text-decoration: none;
}

a:hover,
a:focus {
  text-decoration: underline;
}

input {
    border: 1px solid #ccc;
    font-size: 12px;
    height: 20px;
    line-height:20px;
    vertical-align:middle;
    padding-left: 5px;
    color:#656565;
}
.btn 
{
    background-color: #0A8F36;
    border: 0 none;
    color: #FFFFFF;
    font-size: 12px;
    font-weight:bold;
    height: 24px;
    line-height:24px;
}

.margin5-0
{
    margin:5px 0;
}
.margin10-0
{
    margin:10px 0;
}
.margin20-0
{
    margin:20px 0;
}
.padding5-0
{
   padding:10px 0;
}
.padding10-0
{
   padding:10px 0;
}
.padding20-0
{
   padding:20px 0;
}
.margin10-000
{
    margin:10px 0 0 0;
}
.margin00-5-0
{
    margin:0 0 5px 0;
}
.margin00-10-0
{
    margin:0 0 10px 0;
}
.margin20-000
{
    margin:20px 0 0 0;
}
.margin00-20-0
{
 margin:0 0 20px 0;
}
.row
{
   float:left;
    width:1000px;
    height:auto;
}
.main-wrapper
{
    width:1000px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
margin:0px auto 0px auto;
background-color:#fff;
padding-left:10px;
padding-right:10px;
}
.header-wrapper
{
height:130px;
background-color:red;

}
.logo-wrapper
{
   float:left;
   width:200px;
  ...