JSFiddle - React, Tailwind, and code Playground

by mrnobody

HTML

<!DOCTYPE html>

<body>
  <div class="container1 cur"></div>
   <div class="container2 cur"></div>
</body>

CSS

html {
  /* min-height: 100%; */
    position: relative;
}

html:before,
html:after,
body:before,
body:after {
    position: absolute;
    content: "";
    left: 45px;
    top: 45px;
    bottom: 45px;
    right: 45px;
    border: 1px none #ae9;
}



html:before {
    bottom: auto;
    border-top-style: solid;
}

html:after {
    top: auto;
    border-top-style: solid;
}

body:before {
    left: auto;
    border-right-style: solid;
}

body:after {
    right: auto;
    border-left-style: solid;
}

.cur:hover {
   cursor:pointer; 
}
.container1 {
  height: 400px;
  background: url('http://deita.ru/upload/iblock/ddf/belprauda.org.jpeg');
  background-size:cover;
}
.container2 {
  height: 400px;
  background: url('http://deita.ru/upload/iblock/ddf/belprauda.org.jpeg');
  background-size:cover;
}