JSFiddle - React, Tailwind, and code Playground

by Taras Pyatyhorskyy

HTML

<body>
  <div class="header">
    <div class="inner-heder">Header</div>
  </div>
  <div class="row">
    <div class="is-floated"></div>
    <div class="is-floated"></div>
    <div class="is-floated"></div>

    <div class="menu">
      <div class="inner-Menu">Menu</div>
    </div>
    <div class="left">
      <div class="inner-Left">Left</div>
    </div>

    <div class="center">

      <div class="inner-centr">centr</div>
    </div>
    <div class="right-containar">
      <div class="Right">Right</div>
      <div class="onne">One</div>
      <div class="twwo">Two
          <div class="five">
            <div class="inner-Feve">Fove</div>
          </div>
        </div>
      <div class="threee">three</div>
      <div class="four">Four
        <div class="Siix">Six</div></div>
      </div>
    <div class="container">
      <div class="osin">Osun</div>
      <div class="lito">Leto
        <div class="myimage">
          <div class="inner-image">
        
          <img src="C:\Users\Vorteri\Desktop\TarasiSolya\Solya.jpg" 
  width="100" height="100">
           </div></div></div>
      <div class="zima">Zuma</div>
    </div>
    <div class="footer">

      <div class="inner-footr">Footer</div>
    </div>

    <body>

CSS

.row:after {
  content: "";
  display: table;
  clear: both;
}

.header {
  width: 100%;
}

.inner-heder {
  height: 100px;
  background-color: yellow;
  text-align: center;
}

.menu {
  width: 100%;
}

.inner-Menu {
  height: 49px;
  background-color: blue;
  text-align: center;
}

.left {
  width: 30%;
  float: left;
}

.inner-Left {
  background-color: green;
  text-align: center;
  height: 730px;
}

.center {
  width: 35%;
  float: left;
}

.inner-centr {
  background-color: orange;
  height: 40px;
  text-align: center;
}

.right-containar {
  width: 35%;
  float: right;
}

.Right {
  background-color: grey;
  height: 300px;
  text-align: center;
}
.onne {
  width: 50%;
  float: left;
  background-color: black;
  color: white;
  text-align: center;
  height: 430px;
}


.twwo {
  width: 50%;
  float: left;
  background-color: #c4c4c4;
  text-align: center;
  height: 200px;
}

.five {
  width: 175px;
}
.inner-Feve {
  background-color: blue;
  text-align: center;
  margin-top: 130px;
  height: 35px;
  margin-left: 135px;
}

.threee {
  width: 25%;
  float: left;
  background-color: #ab86ba;
  text-align: center;
  height: 230px;

}

.four {
  float: right;
  width: 25%;
  background-color: orange;
  text-align: center;
  height: 230px;
}

.Siix {
  float: right;
  background-color: red;
  text-align: center;
  margin-top: 180px;
  width: 30px;
  height: 50px;
}

.osin {
  background-color: #4fd67d;
  text-align: center;
  float: right;
  width: 15%;
  height: 690px;
  margin: 0;
}

.lito {
  background-color: red;
  text-align: center;
  width: 20%;
  height: 250px;
  float: left;
}
.myimage {
  margin-top: 80px;
  margin-left:120px;
  position: fixed;
}
.inner-image {
  border: 8px solid black;
  width: 100px;
  height: 100px;
}

.zima {
  background-color: #ddb3de;
  text-align: center;
  width: 20%;
  float: left;
  height: 440px;
}

.footer {
  width: 100%;
  float: left;
}

.inner-footr {
  background-color: blue;
  color: white;
  text-align: center;
 ...