JSFiddle - React, Tailwind, and code Playground

HTML

<div class="footer">
  <footer class="clearfix">
    <section class="path">
      <img height="474px" src="../../src/images/api-maps.yandex.ru.png">
    </section>
    <section class="info">
      <p>bla</p>
    </section>
    <section class="links">
      <p>bla</p>
    </section>
    <footer class="clearfix"></footer>
  </footer>
</div>

CSS

* {
      box-sizing: border-box;
    }
html, body { height: 100%; }

    body {
      margin: 0;
      padding: 0;
    }

    .clearfix {
      margin: 0;
      padding: 0;
    }
    .clearfix:before, .clearfix:after {
      content: " ";
      display: table;
    }
    .clearfix:after {
      clear: both;
    }

    div.footer {
      width: 100%;
        height: 100%;
    }
    div.footer footer {
      background-color: black;
      width: 100%;
      overflow: hidden;
        height: 100%;
    }
    footer.clearfix {
      border-top: 6px solid grey;
    }
    footer section {
      float: left;
      width: 33.333%;
      height: 100%;
    }

    section.path {
      background-color: red;
    }
    section.path img {
      width: 100%;
      display: block;
    }
    section.info {
      background-color: blue;
    }
    section.links {
      background-color: yellow;
    }