JSFiddle - React, Tailwind, and code Playground

by John Grivas

HTML

<!-- Tableless layout from tutorialtastic.co.uk.
Example only; may be used for inspiration or testing, 
obvious copying or theft is against Copyright Laws. -->


<div id="container">

	<div id="header">
	header stuff
	</div>

	<div id="leftbar">
        <img src="http://www.waylineconsultants.com/img.png" alt="Smiley face" height="242" width="242"/>
	</div>

	<div id="content">
	<p>    
          <img src="http://www.waylineconsultants.com/img.png" alt="Smiley face" height="82" width="82"/>
        </p>
	</div>

	<div id="rightbar">
      <img src="http://www.waylineconsultants.com/img.png" alt="Smiley face" height="242" width="242"/>
	</div>
	</div>

</div>

CSS

body {
background: #ddd;
margin: 40px 0;
text-align: center;
}
#container {
width: 700px;
margin: 0 auto;
}
#header {
background: #fff;
width: 100%;
height: 30px;
padding-top: 15px;
}
#content {
background: #aaa;
float: left;
width: 100px;
text-align: left;
}
#leftbar {
background: #ccc;
float: left;
width: 300px;
}
#rightbar {
background: #ccc;
float: right;
width: 300px;
}