JSFiddle - React, Tailwind, and code Playground

by Taras Pyatyhorskyy

HTML

<body>
  <div class="header">Heder</div>
  <div class="menu">Menu</div>
  <div class="left">Left</div>
  <div class="center">Centr</div>
  <div class="right">
  <div class="center"></div>
  </div>

  <body>

CSS

.header {
  background-color: yellow;
  height: 100px;
  text-align: center;
  width: 100%;
}

.menu {
  background-color: blue;
  height: 49px;
  width: 100%;
  text-align: center;
}

.left {
  background-color: green;
  text-align: center;
  width: 30%;
  float: left;
  height: 360px;
}

.center {
  background-color: orange;
  width: 35%;
  height: 40px;
  text-align: center;
  float: left;
}
.right {
  background-color: grey;
  width: 35%;
  height: 300px;
  float:right;
  text-align:center;
}
.lito {
  background-color: red;
  height:235px;
  width:17%;
  position:absolute;
  left:387px;
  bottom:225px;
  text-align:center;
}
.osin {
  background-color:#548f68;
  height:325px;
  width:224px;
  position:absolute;
  left:604px;
  bottom:135px;
  text-align:center;
  
}