JSFiddle - React, Tailwind, and code Playground

by kyleshevlin

HTML

<body>
<div id="container">
    <div id="header">
        <h1><b>Webbplatsens namn</b></h1>
    </div>
    <div id="content" class="cf">
        <div id="content2" class="cf">
            <h3>Om webbplatsens namn</h3>
            <p>
                Text textText textText textText textText textText textText textText
                Text textText textText textText textText textText textText textText
                Text textText textText textText textText textText textText textText
                Text textText textText textText textText textText textText textText
                Text textText textText textText textText textText textText textText
                Text textText textText textText textText textText textText textText
            </p>
            <p>
                Text textText textText textText textText textText textText textText
                Text textText textText textText textText textText textText textText
                Text textText textText textText textText textText textText textText
                Text textText textText textText textText textText textText textText
                Text textText textText textText textText textText textText textText
                Text textText textText textText textText textText textText textText
            </p>
        </div><!-- /content2 -->
        <div id="nyheter" class="cf">
            <h3><b>Nyheter</b></h3>
            Text textText textText textText textText textText textText textText textText
            Text textText textText textText textText textText textText textText textText
            Text textText textText textText textText textText textText textText textText
            Text textText textText textText textText textText textText textText textText
            Text textText textText textText textText textText textText textText textText
            Text textText textText textText textText textText textText textText textText
        </div><!-- /nyheter -->
        <div id="navbar"...

CSS

*, *:after, *:before {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    min-height: 100%;
}
body{
    background-color: #ffffff;
    width: 100%;
    height: 100%;
}
#container{
    width: 80%;
    background-color: dodgerblue;
    margin: 0 auto;
}
#header{
    background-color: orangered;
    width: 100%;
    height: 60px;
}
#header h1{
    margin-left: 20px;
    color: #ffffff;
}
#content{
    float: left;
    clear: both;
    width: 100%;
    height: 100%;
    word-break: break-all;
    background-color: white;
}
#content2{
    float: left;
    width: 50%;
    height: 100%;
    padding: 15px;
    word-break: break-all;
}
#content2 h3{
    color: orangered;
}
#nyheter{
    float: left;
    padding: 15px;
    background-color: skyblue;
    width: 25%;
    height: 100%;
}
#navbar{
    float: left;
    background-color: dodgerblue;
    width: 25%;
    height: 100%;
    padding: 15px;
}
#navbar ul li{
    list-style: none;
}
#copyright {
    clear: both;
    width: 100%;
    background-color: dodgerblue;
    text-align: center; 
    color: #ffffff;
}

/* Clearfix */

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

.cf {
    *zoom: 1;
}