JSFiddle - React, Tailwind, and code Playground

by brennan

HTML

<div class="header">
    <!-- The logo follows -->
    <img class="logo" src="http://2.bp.blogspot.com/-7rGxIby4tU4/T6be-bVKMeI/AAAAAAAAAwo/4QD7joT5PT8/s1600/Poetry_fingers_header.jpg"/>
    <!-- end of the logo -->
</div>
<!-- This is the body -->
<div class="body">
    <div class="sidebar">
        To see all my poetry click <a href="http://brennanmceachran.com">here</a>
    </div>
    <div class="content">
        <!-- Put poem here -->
        <p>old <strong>pond</strong>... <br/>
            a <de­l>frog</de­l> <em>leaps</em> in<br/>
            water’s sound
        </p>
    </div>
</div>

<!-- Take credit for your work. -->
<div class="footer">by Brennan McEachran</div>

CSS

/*  this is my poetry css */
.header{
    background:blue;
    color:white;
    text-align:center;
}

.header .logo{
    width:100%;
}

.sidebar{
    float:right;
    background: #E7745E; /* baby blue */
    color:white;
    width:25%;
    font-size:11px;
    padding: 5px;
}

.footer{
    text-align: center; /* this centers the text */
    font-size:9px;
    color:grey;
    clear:both; /* this clears the sidebar */
}



.content li{
    list-style:none;
}