JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<a href="www.facebook.com"><div class="container">  
  <img src="http://lorempixel.com/1920/480/"> 
</div></a>

CSS

body {
  background: #000;
}

.container {
  max-width: 1920px;  
  background-image: -moz-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
  background-image: -webkit-linear-gradient(270deg, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 95% );
  
}
 
img {
  max-width: 100%;
  position: relative;
  z-index: -1;
  pointer-events: none;
  
}