JSFiddle - React, Tailwind, and code Playground

by crf121359

HTML

<div align="center" id="mainWrapper">
    <div id="pageHeader">
      <div id="logo">
        <a href="index.php"><img src="img/logo.png" width="290" height="80" /></a>
      </div>

      <div id="formSearch">
        <form style="background-color: transparent;" class="form-wrapper cf">
          <input style=
          "padding-left:3px; float:left; border:1px solid #999; height:30px; width:240px;"
          type="text" placeholder="Search For Location" /> <button class=
          "pomegranate-flat-button" style=
          "padding: 5px 9px; background: #cb202d; float:left; color: #FFF;" type=
          "submit">Search</button>
        </form>
      </div>
    </div><!--Header ends-->

    <div id="secondWrapper">
      <div id="pageContent">
        <div id="btns2" style=
        " border-right:dashed 1px #fff; width:150px; height:42px; vertical-align:middle; text-align:center; position:absolute; float:left;">
        <span style="position:relative; top:10px;"><a href="index.php">HOME</a></span>
        </div>

        <div id="btns2" style=
        " border-right:dashed 1px #fff; width:150px; height:42px; vertical-align:middle; text-align:center; position:absolute; float:left; margin-left:174px;">
        <span style="position:relative; top:10px; float:left; left:35px;"><a href=
        "blog.php">BLOG</a></span>
        </div>

        <div id="btns2" style=
        " border-right:dashed 1px #fff; width:220px; height:42px; vertical-align:middle; text-align:center; position:absolute; float:left; margin-left:348px;">
        <span style="position:relative; top:10px; float:left; left:24px;"><a href=
        "time-difference.php">TIME DIFFERENCE</a></span>
        </div>

        <div id="btns" style=
        "color:#FFF; font-family:Tahoma, Geneva, sans-serif; font-size:15px; font-weight:bold; height:40px; width:100%; background-color:#333;">
        <div style="position:relative; left:210px; float:left; margin-top:6px;"></div>
        </div>

        <div...

CSS

body {
    margin: 0;
	height:1300px;
		clear:both;
}


#secondWrapper {
	    margin-left:auto;
    margin-right:auto;
	width:960px;
	min-width:910px;
	height:1300px;
		clear:both;
	


}
#mainWrapper{
    margin-left:auto;
    margin-right:auto;
    width:960px;
	height:1300px;
		clear:both;
	

}

#pageHeader {
		clear:both;
	height:100px;
	width:100%;
	min-width: 918px;
	border-bottom: solid 1px #ededed;
	z-index:1000;
	position:relative;
	box-shadow: 6px 0px 5px -5px #CCC, -6px 0px 5px -5px #CCC;


}
#pageContent {
	clear:both;
	width:100%;
	min-width: 918px;
	background-image:url(../img/map.png); 
	height:1300px; 
	background-repeat:no-repeat;
	background-position: top 149px center;
	box-shadow: 6px 0px 5px -5px #CCC, -6px 0px 5px -5px #CCC;
	
	

}
#pageFooter {
		clear:both;
	width:100%;
	min-width: 960px;
	height:140px;
	border-top:10px solid #000;
	border-bottom:3px solid #999;
	box-shadow: 6px 0px 5px -5px #CCC, -6px 0px 5px -5px #CCC;
}

#logo{
	position: absolute;
	margin-left:29px;
	width:290px;
	height:80px;
	top: 10px;
	text-align:center;
	vertical-align:center;
	display:block;
	font-family:Tahoma, Geneva, sans-serif;
	font-size:24px;
	color:#FFF;
	font-weight:bold;
	float:left;
	z-index:1000;

}

#logoTxt{
	position: relative;
	top:26%;
	color:#FFF;
	
}

#yourCurrentTime{
	float:left;
	left:350px;
	top:20%;
	position:relative;
	border-radius:2px;

	
}

#formSearch{
	float:left;
	left:420px;
	top:22px;
	position:relative;
	border: 1px solid rgba(0, 0, 0, 0.2);;
	border-radius:4px;
	
	
}

#arrow-down {
	position:absolute;
	width: -23px;
	height: 2px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #1abc9c;
	left: 99px;
	top: 30px;
}

#b {
	position:absolute;
	width:200px;
	height:115px;
	z-index:10000000;
	left: -59px;
	top: 48px;
	background-color:#333;
	display:none;
	


}

    div#a:hover div#b {
        display: inline;
		
    }
	    div#a:hover...