JSFiddle - React, Tailwind, and code Playground

by Zacc206

HTML

<body>
    <div class="headContainer">
        <div class="headLogoContainer">
            RWD Demo
        </div>
    </div>
    <div class="navContainer">
    </div>
    <div class="pageContainerA">
        <h1>Hello World!</h1>
        <div class="section group">
            <div class="col span_1_of_2">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod arcu quis nulla venenatis feugiat. Maecenas vel purus justo, id semper enim. Morbi diam enim, fringilla eget placerat eu, placerat at enim. Aliquam fringilla, lacus et commodo suscipit, dui erat consectetur dui, vulputate pretium enim massa non ipsum. Fusce mollis, justo ut eleifend consequat, ligula lacus aliquet eros, id faucibus nisi lacus nec lorem. In commodo accumsan nibh et laoreet. Nam vel leo non libero feugiat facilisis. Morbi venenatis dignissim quam, vel commodo lacus ullamcorper faucibus. Sed egestas, massa eu mattis congue, sem dui lobortis erat, sed ornare sem odio nec purus. Curabitur elit nulla, ultrices sit amet consectetur nec, tempor eu ante. Morbi gravida leo in metus aliquet ornare.</p>
            </div>
            <div class="col span_1_of_2">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas euismod arcu quis nulla venenatis feugiat. Maecenas vel purus justo, id semper enim. Morbi diam enim, fringilla eget placerat eu, placerat at enim. Aliquam fringilla, lacus et commodo suscipit, dui erat consectetur dui, vulputate pretium enim massa non ipsum. Fusce mollis, justo ut eleifend consequat, ligula lacus aliquet eros, id faucibus nisi lacus nec lorem. In commodo accumsan nibh et laoreet. Nam vel leo non libero feugiat facilisis. Morbi venenatis dignissim quam, vel commodo lacus ullamcorper faucibus. Sed egestas, massa eu mattis congue, sem dui lobortis erat, sed ornare sem odio nec purus. Curabitur elit nulla, ultrices sit amet consectetur nec, tempor eu ante. Morbi gravida leo in metus aliquet ornare.</p>
     ...

CSS

/* CSS Based on HTML5 Boilerplate project - html5boilerplate.com */

/*=============================================================*/
/*   Base Styles 
/*=============================================================*/

html,
button,
input,
select,
textarea {
    color: #222;
}

body {
    font-size: 1em;
    line-height: 1.4;
}

p {

}

h1 {
    color: #000;
    font-weight: bold;
    font-size: 26px;
}

h4 {
   font-family: 'Segoe UI', sans-serif; 
   font-size: 20px;
   font-weight: lighter;
}

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

        ::-moz-selection {
            background: #c2ffbb;
            text-shadow: none;
        }

        ::selection {
            background: #c2ffbb;
            text-shadow: none;
        }

hr {
    display: block;
    height: 10px;
    border: 0;
    border-top: 2px solid #EEE;
    background-color: #808080;
    margin: 0;
    padding: 0;
}

img {
    vertical-align: middle;
    /* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 */
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    /* Remove default fieldset styles. */
}

.topNav {
    display: none;
    margin: 0px;
    padding: 0px;
}

    .topNav ul {
        border: 1px solid #000;
        padding: 5px;
        font-style: none;
    }

        .topNav ul li {
            padding: 5px;

        }

            .topNav ul li a:hover {
                background-color: #000;
                font: #FFF;
            }

#ie {
    
}

/*============================================================
    Container Styles
============================================================*/

.pageContainerA {
    float: left;
    margin: 0px;
    padding: 20px;
    background-color: #EEE;
    font-family: 'Agency FB', Vani;
    color: #000;
    font-weight: normal;
}

    .pageContainerA h3 {
   ...