JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<!doctype html>
<body>
    <div id="pinkHeader"></div>
    <div id="wrapper">
        <div class="yellowArea">
            <div class="yellowBox1"></div>
            <div class="yellowBox2"></div>
            <div class="yellowBox3"></div>

        </div>
        
        <div class="clear"></div>
        
    </div>
</body>

CSS

/* Default Styles */
* {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

p {
    color: #fff;
    font-size: 1.2em;
}

/* Pink header */
#pinkHeader {
    width: 100%;
    height: 100px;
    display: inline-block;
    position: fixed;
    top: 0;
    z-index: 100;
    background-color: pink; 
}

/* Grey Background */
#wrapper {
    max-width: 900px;
    height: 100%;
    padding: 0 30px;
    margin: 100px auto;
    background-color: lightgray; 
}

/* Yellow Area */
.yellowArea {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
    background-color: lightyellow; 
}

.yellowBox1, .yellowBox2, .yellowBox3 {
    height: 250px;
    width: 250px;
    display: inline-block;
    margin: 20px 10px 20px 0;
    background-color: yellow; 
}

@media (max-width: 865px){
  .yellowBox3 {
    display: none; 
  } 
}

@media (max-width: 650px){
  .yellowBox3, .yellowBox2 {
    display: none; 
  } 
}

.clear {
  clear: both; 
}