JSFiddle - React, Tailwind, and code Playground

by Arina Gavrilova

HTML

<div class="wrapper clearfix">
      <div class="layout-position">
          <div class="header">Header</div>
      </div>

      <div class="menu clearfix">
          <div class="layout-position">Menu</div>
      </div>

       <div class="layout-position">
          <div class="promo promo-1">Promo 1</div>
          <div class="promo promo-2">Promo 2</div>
      </div>
  </div>
  <div class="layout-position content clearfix">
      <div class="left">Left</div>
      <div class="main">Main</div>
      <div class="right">Right</div>
  </div>
  <div class="footer clearfix">
      <div class="layout-position">
          Footer
      </div>
  </div>

CSS

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:335px;
    font-family:'Arial', sans-serif;
    font-size:10px;
    color:white;
}
body * {
    box-sizing: border-box;
}
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}
.layout-position {
    width: 350px;
    margin: 0 auto;
}

.wrapper {
    padding: 10px 0;
}
.header,
.menu {
    height: 35px;
    margin: 10px auto;    
    padding-top: 5px;
}
.header {
    margin: 0;    
    padding-left: 5px;
}
.menu,
.footer {
    padding-left: 10px;
}
.promo {
    float: left;
    width: 170px;
    margin-right: 10px;
    height: 60px;    
    padding-top: 5px;
    padding-left: 5px;
}
.promo-2 {
    margin-right: 0;
}
.content {
    margin: 10px auto;
}
.content > * {
    float: left;
    height: 110px;  
    padding-top: 5px;
    padding-left: 5px;
    margin-right: 10px;
}
.content > *:last-child,
.right {
     margin-right: 0;
}
.left,
.right {
    width: 70px;
}
.main {
    width: 190px;
}
.footer {
    padding-top: 5px;
    height: 35px;
}

/* colors */
.wrapper,
.footer {
    background: #34495e;
}
.header,
.promo {
    background: #c0392b;
}
.menu,
.left,
.main,
.right {
    background: #3498DB;
}