JSFiddle - React, Tailwind, and code Playground

HTML

<div class="oblique-block">
   <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 671 208" preserveAspectRatio="xMinYMin meet">
	  <a href="#" title="Meet the creators" target="_self">
		  <g class="icon">
			 <path scale(0.8)="" id="p1" fill="#65C6CC" d="M 5,3 H 150 L 120,203 H 5 Z"></path>
			 <!-- icon supervisor -->          		 
			 <path class="icon" fill="white" fill-rule="evenodd" clip-rule="evenodd" d="M15 3.92883C10.4897 3.92883 6.83337 7.58517 6.83337 12.0955C6.83337 16.6058 10.4897 20.2622 15 20.2622C19.5104 20.2622 23.1667 16.6058 23.1667 12.0955C23.1667 7.58517 19.5104 3.92883 15 3.92883ZM9.83337 12.0955C9.83337 9.24203 12.1466 6.92883 15 6.92883C17.8535 6.92883 20.1667 9.24203 20.1667 12.0955C20.1667 14.949 17.8535 17.2622 15 17.2622C12.1466 17.2622 9.83337 14.949 9.83337 12.0955ZM8.33329 23.9288C3.82297 23.9288 0.166626 27.5852 0.166626 32.0955V35.4288C0.166626 36.2573 0.838199 36.9288 1.66663 36.9288C2.49505 36.9288 3.16663 36.2573 3.16663 35.4288V32.0955C3.16663 29.242 5.47982 26.9288 8.33329 26.9288H21.6666C24.5201 26.9288 26.8333 29.242 26.8333 32.0955V35.4288C26.8333 36.2573 27.5049 36.9288 28.3333 36.9288C29.1617 36.9288 29.8333 36.2573 29.8333 35.4288V32.0955C29.8333 27.5852 26.1769 23.9288 21.6666 23.9288H8.33329ZM31.881 25.2705C32.0881 24.4684 32.9063 23.986 33.7084 24.1931C37.3119 25.1236 39.8306 28.3727 39.8334 32.0944V32.0955V35.4288C39.8334 36.2573 39.1618 36.9288 38.3334 36.9288C37.5049 36.9288 36.8334 36.2573 36.8334 35.4288V32.0966V32.0963C36.8315 29.7419 35.2381 27.6865 32.9584 27.0979C32.1563 26.8908 31.6739 26.0726 31.881 25.2705ZM27.0387 4.19238C26.2361 3.9869 25.419 4.47091 25.2135 5.27345C25.008 6.07599 25.492 6.89315 26.2946 7.09863C28.5807 7.68398 30.1797 9.74395 30.1797 12.1038C30.1797 14.4637 28.5807 16.5237 26.2946 17.109C25.492 17.3145 25.008 18.1317 25.2135 18.9342C25.419 19.7368 26.2361 20.2208 27.0387 20.0153C30.6523 19.0901 33.1797 15.834 33.1797...

CSS

.oblique-block g image {  
  opacity: 100%;
  filter: alpha(opacity=100);  
  height: 100%;  
  z-index: 9999;
  width: 458px;
}

.oblique-block a :hover.icon image {
  z-index: 999;
  opacity: 0.3;
  filter: alpha(opacity=30);
  max-width: none;
    
	transition: 0.5s;
	-moz-transition: 0.5s;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;  
}

.oblique-block {
 width:100%;
 height:100%;
 
 }
.oblique-block text {
	font-size:14px;
	font-weight:bold;
	fill:white;
	text-anchor:middle;
}