JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">
    <div id="header_center">
        <img src="groop.png" height="50px" width="auto" />
    </div>
</div>

<div id="global_container">

    <div id="middle">

        <!-- Left contains everything you wanna do today-->
        <div id="left"> 

            <!-- Lists everything that you're planning to do NOW --> 
            <div class="list_title"><strong>The Now List</strong></div>

            <ul id="tomorrow_list">

            </ul>        

        <!-- End of left -->  
        </div>

        <!--Right contains stuff that's upcoming-->
        <div id="right">
            <div id="newcontent">
                <textarea id="textbox" rows="2" placeholder="Any assignments?"></textarea> 
            </div>

            <div id="content">
                    <div>
                        <div class="due_title">Due Today</div>
                        <ul class="inlist">
                            <li><div class="list_item" id="list_item">Do math homework if it's really long asldgjka;lskdgj a;lk ja;lsk jgal;sdkjg  as;dgkj a;sdgj ;asd;lkgj ; lkjasdg; ja; a;sdgk j;a j;adsjg ;aklsjd ;a ja;sdlgk ja; a;ds jg;alk ;adj g;adsj g;asdkg ja;kj l;ajg a; j</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due Tomorrow</div>
                        <ul class="inlist">
                            <li><div class="list_item">Do math homework</div></li>
                        </ul>
                        <hr />
                    </div>
                    <div>
                        <div class="due_title">Due This Week</div>
                        <ul class="inlist">
                      ...

CSS

a:link
{
    text-decoration:underline;
}

a:visited
{
text-decoration:none;
color:black;
}

a:hover
{
color:#115685;
}

a
{
font-family:'Helvetica Neue', sans-serif;
color:#1A71AD;
}

html, body
{
background-color:#e9e9e9;
margin:0;
}

#header
{
position:fixed;
top:0px;
right:0px;
left:0px;
background-color:#208ff6;
border-bottom:1px solid black;
height:50px;
width:100%;
z-index:1;
}

#header_center
{
width:860px; 
height:auto;
background-color:#147DB5;
margin-left:auto;
margin-right:auto;  
}

#header_center img
{
position:relative;
float:left;
margin-left:0px; 
top:5px;
}

#global_container
{
position:absolute;
height:100%;
width:100%;
overflow:auto;
}

#middle
{
position:relative;
margin-top:50px;
margin-bottom:0px;
margin-right:auto;
margin-left:auto;
width:860px;
min-height:100%;
height:auto;
border-left:1px solid #cfcfcf;
border-right:1px solid #cfcfcf;
background-color:white;
}

/* Everything that is on the left */

#left
{
min-height:100%;
/*height:auto;*/
width:30%;
margin-left:0px;
}

/* Everything that's on the right */

#right
{
min-height:100%;
/*height:auto;*/
margin-left:30%;
width:70%;
border-left:1px solid #d0d0d0;
font-family:'Titillium Web', sans-serif;
font-weight:200;
}

#textbox
{
resize:none;
outline:none;
font-family:'Helvetica Neue', sans-serif;
font-size:1em;
margin-top:10px;
margin-left:10px;
margin-right:10px;
width:95%;
padding:5px 5px 5px 5px;
border:1px solid #d0d0d0;
font-weight:300;
}

.list_title
{
float:left;
margin-top:10px;
margin-left:10px;
font-family:'Titillium Web', sans-serif;
font-weight:200;
font-size:1.5em;
color:#208ff6;
}

#postit
{
float:left;
margin-top:5px;
margin-left:10px;
border: 1px solid #147DB5;
background: #208ff6;
color: white;
font: normal 0.8em 'Titillium Web', sans-serif;
font-weight:300;
padding: 4px;
cursor: pointer;
width:55px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

#postit:hover
{
border: 1px solid #147DB5;
background: #147DB5;
color: white;
font: normal 0.8em 'Titillium Web',...