JSFiddle - React, Tailwind, and code Playground

by Felipe Stoker

HTML

<div class="topoBarra"></div>
		<div class="topoMenu">
			<div class="cont_980">
				<div class="logo"></div>
				<ul>
					<li>Cl&iacute;nicas</li>
					<li>Procedimentos</li>
					<li>Blog</li>
					<li>Trabalhe Conosco</li>
					<li>Contato</li>
				</ul>
				<div class="topoFacebook">facebook</div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="p-relative">
			<div class="banner">
				<img src="./imagens/banner.png" height="603" width="1920" alt="" />
			</div>
		</div>
		<div class="p-relative">
			<div class="homeProcedimentos">
				<div class="cont_960">
					<div class="grid_475 f-left">
						<div class="homeTitulos">
							<h2>Conheça nossos</h2>
							<h3>Procedimentos</h3>
						</div>
						<h4>Est&eacute;tica Bucal</h4>
						<p class="margin-top-25">
							Hoje é possível mudar a cor natural dos dentes, sem alterar a qualidade a estrutura dental. Com o passar da idade, há um escurecimento natural os dentes, e que é acelerado pela ingestão de alimentos de coloração forte, como café, molho de tomate, vinho tinto, beterraba, chocolate, refrigerantes, [...]
						</p>
					</div>
					<div class="grid_475 f-left">
						<img class="margin-top-195" src="./imagens/procedimentos.png" height="325" width="472" alt="" />
					</div>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<div class="homeUnidades">
			<div class="cont_960">
				
					<h2>Nossas</h2>
					<h3>Unidades</h3>
				
			</div>
		</div>

CSS

@charset "UTF-8";
/* CSS Document */
*::selection {background:#1E3C7C;color:#F8E400;}
*::-moz-selection {background:#1E3C7C;color:#F8E400;}
*::-webkit-selection {background:#1E3C7C;color:#F8E400;}
* {margin: 0;padding: 0;}
html { width: 100%; height: 100%; }
h1, h2, h3, h4, h5, h6 {
	float: none;
	margin: 0px;
	padding: 0px;
	font-weight: inherit;
	//font-weight:expression(this.parentNode.currentStyle['font-weight']);
	font-size: inherit;
	//font-size:expression(this.parentNode.currentStyle['font-size']);
}
input, textarea { box-shadow:none !important; border: 0 none; resize: none; background-color: transparent; }
input:focus {outline: none;}
textarea:focus{outline:none;}
a {color: inherit;text-decoration: none;//color:expression(this.parentNode.currentStyle['color']);}
p { margin: 0px; padding: 0px; line-height: inherit; line-height: expression(this.parentNode.currentStyle['line-height']); }
img { border: 0 none;}
ul, li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	line-height: inherit;
	//line-height:expression(this.parentNode.currentStyle['line-height']);
}
body {
	background-color: #ffffff;
	margin: 0px;
	padding: 0px;
	height: 100%;
	width: 100%;
	overflow-x: hidden;
}
.clear {
	margin: 0px !important;
	padding: 0px !important;
	clear: both !important;
	height: 0px !important;
	line-height: 0px !important;
}
.cont_980{width: 980px!important;margin:auto!important;}
.cont_960{width: 960px!important;margin:auto!important;}
.logo{
	background-image: url("../imagens/logo.png");
	background-repeat: no-repeat;
	width: 153px;
	height: 87px;
	float: left;
	margin: -10px 90px 0 0 !important;
}
.topoBarra{width: 100%;height: 20px;background-color: #bdeaf5;}
.topoMenu{height: 80px;background-color: #ffffff;}
.topoMenu ul{width: 610px;float: left;}
.topoMenu li {
	display: inline-block;
	font-family: "roboto";
	font-style: normal;
	font-weight: 300;
	color: #939393;
	font-size: 18px;
	margin-top: 15px;
	letter-spacing: 0px;
	padding: 10px 12px 10px...