JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<!-- tableless design -->

<div id="leftnavigation">
<h1>Left Column</h1>
<ul>
<li><a href="http://webdesign.about.com/">Home</a></li>
<li><a href="http://webdesign.about.com/library/weekly/aa102102a.htm">Tableless Browsing</a></li>
<li><a href="/cs/css/">CSS Links</a></li>
</ul>
</div>

<div id="content">
<h1>Sample Content</h1>
<p>
This is the content section of the page. As you can see, I'll use structural markup
like &lt;p&gt;&lt;/p&gt;, &lt;strong&gt;&lt;/strong&gt;, and &lt;em&gt;&lt;/em&gt;. This
will help keep the page valid in XHTML. 
</p>




</div>
<div id="rightnavigation">
<h2>Right Column</h2>
<p>
Ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Quis nostrud exercitation duis aute irure dolor cupidatat non proident. 
</p>


</div>

CSS

#leftnavigation {
position: absolute;
left: 0;
width: 150px;
margin-left: 10px;
color: 
black;
padding: 3px;
}

#content {
top: 0px;
margin: 0px 25% 0 165px;
padding: 3px;
color: 
black;
}
#rightnavigation {
position: absolute;
left: 80%;
top: 0px;
width: 140px;
padding: 3px;
z-index: 3;
color: 
black;
padding: 3px;
}