JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="left">
    <a href="http://laurent.delrocq.free.fr/test/left.png" style="outline:0">
      <img src="http://laurent.delrocq.free.fr/test/left.png" alt="#">
    </a>
  </div>
  <div class="right">
    <a href="http://laurent.delrocq.free.fr/test/right.png">
      <img src="http://laurent.delrocq.free.fr/test/right.png" alt="#">
    </a>
  </div>
</div>
</body>

CSS

html, body {
  height: 100%;
  margin: 0;
}

a{
  outline:0;
}

.main{
    min-height: 100%;
    background-image:    url(http://laurent.delrocq.free.fr/test/img-1.jpg);
    background-size:     contain; 
    background-repeat:   no-repeat;
    background-position: center center;  
    }

.left{
    position:absolute;
    width:20%;
    height:100%;
}

.left a, .right a{
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

.right{
    position:absolute;
    margin-left: 80%;
    width:20%;
    height:100%;
}