JSFiddle - React, Tailwind, and code Playground

by Igor_Ivancha

HTML

<div id="container">
  <!---container--->
  <div id="header">
    <h1>JORDAS</h1>

  </div>
  <!--header-->

  <div id="nav">
    <a href="index.html">Etusivu</a>
    <br>
    <a href="page1.html">Teltat</a>
    <br>
    <a href="page2.html">Palvelut</a>
    <br>
    <a href="page3.html">Yhteistiedot</a>
    <br>
  </div>

  <div id="section">
    <a href="page2.html"><h1>Pro</h1></a>
    <div class="main_block">

      <div class="inner_block">lorem ipsum
        <img src="https://pixabay.com/static/uploads/photo/2015/10/09/00/55/lotus-978659_960_720.jpg">
      </div>

      <div class="inner_block">lorem ipsum
        <img src="https://pixabay.com/static/uploads/photo/2015/10/09/00/55/lotus-978659_960_720.jpg">
      </div>

    </div>
    <!--mainblock-->
  </div>

  <div id="footer">
    <h3>POP-UP TELTTOJEN YKKÖNEN </h3>
  </div>
  <!--footer-->
</div>
<!--container-->
</body>

CSS

body {
  margin: 0;
  padding: 0;
}

#header {
  background-color: #ff6600;
  color: white;
  text-align: left;
  padding: 2px;
}

#nav {
  line-height: 30px;
  background-color: #fff000;
  height: 350px;
  width: 189px;
  float: left;
  padding: 5px;
}

#section {
  width: 350px;
  float: left;
  padding: 10px;
}

#footer {
  background-color: #737373;
  color: white;
  clear: both;
  text-align: center;
}

#container {
  margin: auto;
  width: 900px;
  text-align: left;
  overflow: hidden;
}

.inner_block {
  display: inline-block;
  text-align: center;
  width: 100px;
}

img {
  width: 100px;
}