JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="sidebar">
        <img name="logo" src="" width="280" height="150" alt="" />
        <br />
        
        <br />
        <br />
<a href="#"><img src="images/fb.png" /></a>  <a href="#"><img src="images/twitter.png" /></a>

    </div>
    <div class="content">
         <h3>Welcome to the Babylon Citizens Council on the Arts!</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor rutrum hendrerit. Cras hendrerit nulla in ligula sodales et molestie velit aliquet. Vivamus volutpat ultrices consectetur. Etiam sed sapien id elit placerat consequat quis et neque. Mauris a nibh sit amet sem aliquam scelerisque. Phasellus pretium porta mattis. Donec sit amet mi non quam feugiat hendrerit. Quisque consectetur tristique lorem, id pulvinar augue bibendum mattis. Donec adipiscing blandit risus, ut aliquet diam fermentum ut. Donec tempor erat quis neque suscipit non pellentesque felis pulvinar. Nulla eu nisl orci, ac placerat nibh. Nunc consequat, nulla ac interdum fermentum, metus diam mattis leo, et dapibus est purus non justo. Sed condimentum luctus libero, et posuere odio semper malesuada. Quisque vel elit nisl, in venenatis ligula. Duis quam urna, euismod et congue vel, porta ac magna. Phasellus rutrum, nibh auctor commodo venenatis, risus dolor ullamcorper risus, dignissim egestas diam urna et diam.

Sed accumsan, est quis imperdiet auctor, velit nibh convallis arcu, id placerat purus mi vel orci. Quisque sed ipsum metus, et sollicitudin nunc. Nulla lorem est, bibendum vel cursus ut, bibendum vel mi. Phasellus dignissim quam ut tortor pellentesque eget euismod diam blandit. Nulla posuere elit ac erat laoreet varius. Etiam sollicitudin, quam vel scelerisque tempor, ligula lectus auctor tortor, malesuada lobortis purus tortor non odio. Praesent nec tellus vitae leo vulputate lobortis. Suspendisse accumsan sagittis quam, quis dapibus mauris vestibulum ut. Ut nec augue ut eros porta rutrum a vitae mauris....

CSS

@charset"UTF-8";
 html, body {
    height:100%;
}
body {
    font: 12px Verdana, Arial, Helvetica, sans-serif;
    line-height: 22px;
    background: url(images/bg.png);
    margin: 0;
    padding: 0;
    color: #666;
}
/* ~~ Element/tag selectors ~~ */
 ul, ol, dl {
    /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
    padding: 0;
    margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
    margin-top: 0;
    /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
    padding-right: 15px;
    padding-left: 15px;
    /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}
a img {
    /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
    border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
 a:link {
    color: #42413C;
    text-decoration: underline;
    /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}
a:visited {
    color: #6E6C64;
    text-decoration: underline;
}
a:hover, a:active, a:focus {
    /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
    text-decoration: none;
}
/* ~~ this fixed width container surrounds all other elements ~~ */
 #container {
    width: 960px;
    height: 100%;
    background: #FFF;
    display:...