JSFiddle - React, Tailwind, and code Playground

by jackrugile

HTML

<div id="container">
<div id="header">header</div>
<div id="content-wrapper">
<div id="contentinfo">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc nec metus porttitor ultrices. Suspendisse pulvinar mollis tellus vel auctor. Mauris massa turpis, fermentum ut sodales a, lobortis et metus. Phasellus rhoncus lacus nec leo tincidunt id fermentum justo sagittis. Quisque consectetur interdum urna vitae iaculis. Nulla lobortis sagittis quam, quis consequat sem mollis sed. Fusce sollicitudin porta dignissim. Integer lacus nisi, gravida ut dictum sed, lacinia a ante. Duis tincidunt est a lectus cursus sit amet gravida nibh tempor. Nulla ut leo sem. Sed nec rutrum nulla. Nam non diam massa, vitae porta tellus. Sed odio dolor, malesuada ac dignissim fringilla, lacinia semper sapien. Aliquam eu sem id est venenatis cursus. Nam sapien risus, elementum in sollicitudin eget, facilisis eget orci. Cras eu scelerisque libero. Vestibulum non semper orci. Aenean venenatis posuere dui vehicula vehicula. </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget nunc nec metus porttitor ultrices. Suspendisse pulvinar mollis tellus vel auctor. Mauris massa turpis, fermentum ut sodales a, lobortis et metus. Phasellus rhoncus lacus nec leo tincidunt id fermentum justo sagittis. Quisque consectetur interdum urna vitae iaculis. Nulla lobortis sagittis quam, quis consequat sem mollis sed. Fusce sollicitudin porta dignissim. Integer lacus nisi, gravida ut dictum sed, lacinia a ante. Duis tincidunt est a lectus cursus sit amet gravida nibh tempor. Nulla ut leo sem. Sed nec rutrum nulla. Nam non diam massa, vitae porta tellus. Sed odio dolor, malesuada ac dignissim fringilla, lacinia semper sapien. Aliquam eu sem id est venenatis cursus. Nam sapien risus, elementum in sollicitudin eget, facilisis eget orci. Cras eu scelerisque libero. Vestibulum non semper orci. Aenean venenatis posuere dui vehicula vehicula. </p>
    <p>Lorem ipsum dolor sit...

CSS

#container {
    color: #fff;
    margin: 0 auto;
    width: 700px;   
}

#header {
    height: 100px;
    background: #000;   
}

#content-wrapper {
background: #444;

}

#contentinfo {
    background: #222;
    width: 450px; 
    float: left;  
}

#sidebar {
    background: #444;
    width: 200px;
    padding: 10px;
    float: right;   
}

#menu {
    background: #555;
    height: 200px;   
}

#credits {
    background: #777;
    height: 200px;  
}

#footer {
    background: #999;
    clear: both;
    height: 100px;   
}