JSFiddle - React, Tailwind, and code Playground

by mcoo

HTML

<div id="container"> 
  <!-- Begin Header Wrapper -->
  <div id="page-top">
    <div id="header-wrapper"> 
      <!-- Begin Header -->
      <div id="header">
        
        <!-- Logo --> 
		<div id="logo"><a href="index.html"><img width="220" height="50" alt="constructim" src="style/images/logo1.png"></a></div>
        <!-- Begin Menu -->
        <div id="menu-wrapper">
          <div class="ddsmoothmenu" id="smoothmenu1">
            <ul>
              <li><a class="selected" href="index.html">Acasa</a></li>
              <li><a href="services.html">Servicii&amp;Tarife </a></li><a href="services.html">
              </a><li><a href="services.html"><a href="portfolio-1.html">Galerie</a></li>
			  <li><a href="regulament.html">Regulament</a></li>
			  <li><a href="contact.html">Contact</a></li>
            </ul>
          </div>
        </div>
        <!-- End Menu --> 
      </div>
      <!-- End Header --> 
    </div>
  </div>
  <!-- End Header Wrapper --> 
 
<div class="content-wrapper">
<div id="harta">
  <iframe width="360" height="380" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2783.645671301102!2d21.222109!3d45.75824899999998!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x474567872446451f%3A0x5670655002206ac6!2sParcare+subterana+Piata+700!5e0!3m2!1sro!2sro!4v1405442196611" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border: 2px solid rgb(192, 192, 192); border-image: none;"></iframe>
  </div>
 <div id="cycle-wrapper">
  
 
    <div id="sliderholder-cycle" style="display: block; position: relative;"> 
	  <img width="600" height="380" style="left: 0px; top: 0px; display: none; position: absolute; z-index: 3; opacity: 0;" src="style/images/art/slider2.jpg">
      <img width="600" height="380" style="left: 0px; top: 0px; width: 600px; height: 380px; display: block; position: absolute; z-index: 4; opacity: 1;" src="style/images/art/slider1.jpg">
      <img width="650" height="380" style="left: 0px; top: 0px;...

CSS

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent
}
body {
    
	line-height:1;
	margin:auto;
	
}
ol, ul {
	list-style:none
}
blockquote, q {
	quotes:none
}
blockquote:before, blockquote:after, q:before, q:after {
	content:'';
	content:none
}
:focus {
	outline:0
}
ins {
	text-decoration:none
}
del {
	text-decoration:line-through
}
table {
	border-collapse:collapse;
	border-spacing:0
}
.clear {
	clear:both;
	display:block;
	overflow:hidden;
	visibility:hidden;
	width:0;
	height:0
}
.clearfix:after {
	clear:both;
	content:' ';
	display:block;
	font-size:0;
	line-height:0;
	visibility:hidden;
	width:0;
	height:0
}
.clearfix {
	display:inline-block
}
* html .clearfix {
	height:1%
}
.clearfix {
	display:block
}


/*-----------------------------------------------------------------------------------*/
/*	1.	FONT-FACE
/*-----------------------------------------------------------------------------------*/

 @font-face {
 font-family: 'Puritan20Italic';
 src: url('style/type/puritan/puritan_italic-webfont.eot?') format('eot'),  url('style/type/puritan/puritan_italic-webfont.woff') format('woff'),  url('style/type/puritan/puritan_italic-webfont.ttf') format('truetype'),  url('style/type/puritan/puritan_italic-webfont.svg#webfontZMWmRIPG') format('svg');
 font-weight: normal;
 font-style: normal;
}
 @font-face {
 font-family: 'Puritan20Normal';
 src: url('style/type/puritan/puritan_regular-webfont.eot?') format('eot'),  url('style/type/puritan/puritan_regular-webfont.woff') format('woff'),  url('style/type/puritan/puritan_regular-webfont.ttf') format('truetype'), ...