JSFiddle - React, Tailwind, and code Playground

HTML

<div class="contener">
  <div class="menu">
  das
  </div>
  <div class="hover">
    <div class="img1">
    text one
    </div>
     <div class="img2">
    text-two
    </div>
</div>
</div>
<div class="baner">
dsa
</div>

CSS

body, html{
  overflow-x:hidden;
}
body{
  margin:0;
}
.contener{
  width:100vw;
  
}
.baner{
   background-image: url("http://cdn.lamborghini.com/content/models/Centenario_LP_770-4/Lamborghini-Centenario-geneva-motorshow-2016-Slide-1.jpg");
   background-size:cover;
   width:100vw;
   height:400px;
   margin-left:0;
   left:0;
}
.contener{
  height:100px;
}
.menu{
  display:flex;
  background-color:#e6e6e6;
  height:100%;
  justify-content:flex-end;
  align:content:bottom;
}
.img1{
  width:150px;
  height:25px;
  transform:rotate(45deg);
  background-color:red;
  position:absolute;
  top:40px;
  right:-50px;
  line-height:25px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  text-align:center;
  transition:all 0.4s;
}
.img2{
  width:190px;
  text-align:center;
  transform:rotate(45deg);
  background-color:#333;
  position:absolute;
  height:25px;
  line-height:25px;
  top:55px;
  right:-50px;
  padding:0 20px;
  cursor:pointer;
  color:white;
  transition:all 0.4s;
}
.hover{
  overflow:hidden;
}
.hover:hover .img1{
  background-color:#333;
  transition:all 0.4s;
}
.hover:hover .img2{
  background-color:blue;
  transition:all 0.4s;
}