JSFiddle - React, Tailwind, and code Playground

by panchroma

HTML

<body>
    <header id="main-header">
        <section id="block-twitter">
            <p class="tweet-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate.<span class="tweet-time">21 minutes ago via Twitter</span>
            </p>
        </section>
        <section id="block-title">
             <h1>Lorem Ipsum </h1>

        </section>
    </header>
    <div id="main-content">
        <section id="content">
            <section class="one-col">
                 <h3>Hey guys,</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    <p>
                        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            </section>
            <section class="two-col">
                <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est culpa qui officia deserunt mollit anim id estmollit anim id est enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex.</p>
                <ul id="social-icons">
                    <li class="bt-twitter"><a href="#">Twitter</a>
                    </li>
                    <li class="bt-facebook"><a href="#">Facebook</a>
                    </li>
                    <li class="bt-linkedin"><a href="#">Linkedin</a>
                    </li>
                </ul>
            </section>
            <!--end of content-->
            <section class="one-col">
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu...

CSS

@charset"utf-8";

/* CSS Document */

/*reset css*/
 article, aside, figure, footer, header, hgroup, nav, section {
    display:block;
}
/* -------- */
 body {
    margin: 0;
    font-family:"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #5F5E59;
    background: url(images/bg_body.jpg) left top repeat;
}
a:link, a:active, a:visited {
    color: #305F9B;
    text-decoration: none;
}
a:hover {
    color: #000;
    text-decoration: underline;
}
/* ID's */
 header {
    background: url(images/bg_header.jpg) left top repeat-x;
    margin-bottom: 25px;
    background-color:#aaa; /* new */
    overflow:hidden; /* new - required to force background to fill div */
    max-width:960px; /* new */
    margin: 0 auto; /* new */
}
#block-twitter {
    /* width: 700px; */
    width:65%; /* new */
    /* height: 60px; */
    min-height: 60px; /* new */
    position: relative;
    /* margin: 0 auto; */
    /* padding: 20px 200px 0 0; */
    padding: 20px 0 0 0; /* new */
    background-color:pink; /* new */
    float:left;
}
#block-title {
    width: 900px;
    height: 80px;
    position: relative;
    margin: 0 auto;
    padding-top: 25px;
}
#main-content {
    /* width: 900px;*/
    width:100%; /* new */
    max-width:960px; /* new */
    position: relative;
    margin: 0 auto;
}
footer {
    /* width: 900px;*/
    max-width:960px; /* new */
    position: relative;
    margin: 0 auto;
    clear: both;
    padding: 30px 0;
    background: url(images/img_star.png) left top repeat-x;
       background-color: #ccc; /* new */

}
/*header*/
 #block-twitter p.tweet-text {
    color:#fff;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-style:italic;
    font-size:14px;
    text-shadow: 0 -1px 0 #0000;
}
#block-twitter span.tweet-time {
    color:#e3baca;
    font-family:Georgia, "Times New Roman", Times, serif;
    font-style:italic;
    font-size:12px;
    text-shadow:0 -1px 0 #000;
   ...