JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div id="q">
  <img src="https://erinlyyc.com/wp-content/uploads/2017/05/google-maps.jpg" alt="">
  <div>
    <h2>KONTAKT</h2>
    <hr>
  <p>  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta dignissimos debitis dicta exercitationem molestias quasi ipsum mollitia nobis consequatur provident, reiciendis iure incidunt recusandae eos voluptatibus.
</p>
    <button>KONTAKT</button>
  </div>
</div>

CSS

#q{
  height:300px;
  font-family:Verdana;
}
#q img:hover{
  filter:grayscale(0%);
  transition:.5s;
}
#q img{
  transition:.5s;
  filter:grayscale(100%);
  width:50%;
  height:100%;
  clip-path:polygon(0 0, 80% 0, 100% 100%,0 100%);
  float:left;
}
#q div hr{
  width:40%;
  margin:auto;
  background:#FFF;
}
#q div h2{
  color:#FFF;
  text-align:center;
}
#q div p{
  font-size:.9em;
  padding-right:10%;
  text-align:right;
  color:#FFF;
}
#q div button{
  border-radius:5px;
  width:30%;
  height:30px;
  border:none;
  background:#FFF;
  color:#2ab1ed;
  margin-right:10%;
  float:right;
}
#q div{
  padding-left:10%;
  box-sizing:border-box;
  width:50%;
  height:100%;
  background:#2ab1ed;
  clip-path:polygon(0 0, 100% 0, 100% 100%,20% 100%);
  display:inline-block;
  float:left;
  margin-left:-10%;
}