JSFiddle - React, Tailwind, and code Playground

by Abid Shaik

HTML

<!--Simple Resposive Demo --> 
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div Id="myHeader">
    <ul>
        <li><a href="#">Home</a>

        </li>
        <li><a href="#">About</a>

        </li>
    </ul>
</div>
<div class="introbox">
     <h1>This is Intro</h1>

    <article>This is some article This is some article This is some article This is some article This is some article This is some article This is some article This is some article This is some article This is some article This is some article </article>
    
        <div class="sidetext">This is side text this is side textThis is side text this is side text This is side text this is side text</div>
    <img class="intrologo" src="http://1.bp.blogspot.com/-1Ou9VU12EVk/UzEExPKgdLI/AAAAAAAAHo0/qaZ0lOZI6jw/s1600/css_logo.png" />
</div>
<div class="module-block">
    <div class="box">
         <h2>Header 1</h2>

    </div>
    <div class="box">
         <h2>Header 2</h2> 
    </div>
    <div class="box">
         <h2>Header 3</h2> 
    </div>
    <div class="box">
         <h2>Header 4</h2> 
    </div>
    <div class="box">
         <h2>Header 5</h2> 
    </div>
</div>

CSS

/*positions
static ->default
relative -> relative to where its default position should be like left/right
fixed -> relative to browser window
absolute-> 

1. use box-sizing t maintain content dimensions after adding padding
2.if items inside container are bigger than it then they will overflow and mix up with other items
3. Apply text-align t the container instead of controls
4. if we see empty gap set margin-top 0;
*/
 body {
    font-family:'Oswald';
    margin:0;
    padding:0;
}
#myHeader {
    position:fixed;
    height:70px;
    padding-top: 10px;
    box-sizing:border-box;
    /*this makes sure size remain 70px*/
    -moz-box-sizing:border-box;
    width:100%;
    background-color:#000;
    color:#fff;
    z-index:10;
    text-align:center;
}
#myHeader li {
    text-decoration:none;
    display:inline;
    padding-right:20px;
}
.introbox {
    width:100%;
    background-color:#99ccee;
    padding:70px 0 0 0;
    overflow:auto;
}
article{
    margin:0 5%;
    column-count:2;
    transition-property: background-color;
    transition-duration:1500ms;
    transition-delay:10ms;
    transition-timing-function:ease-out;
}
article:hover{
    background-color:yellow;
    transition-timing-function:ease-in;
}
.introbox h1 {
    font-size:24px;
    text-align:center;
    vertical-align:middle;
}
.sidetext {
    display:inline-block;
    float:left;
    margin-left:5%;
}
.intrologo {
    width:200px;
    height:200px;
    display:inline-block;
    float:right;
    margin-right:5%;
}
.module-block {
    text-align:center;
    margin-top:50px;
    vertical-align: top;
}
.box {
    border: solid 2px #99ccee;
    display:inline-block;
    width:200px;
    height:200px;
}
.box h2 {
    margin-top:0;
    background-color:#99ccee;
}
@media screen and (max-width: 700px) {
    /* < 700px like mobile*/
    .introbox h1 {
        font-size:1em;
    }
}
@media screen (min-width:700px) and (max-width:960px) {
    /*Medium size betwen mobile and desktop*/
}