JSFiddle - React, Tailwind, and code Playground

by ultranaut

HTML

<div class="frame">

<div class="fade"></div>
<img src="https://a1.muscache.com/airbnb/static/landing_pages/home_v2/tiles/paris-b6a208a2e052e64e9d8a6bcebf47bb11.jpg">
</div>

CSS

.frame {
    width: 315px;
    height: 165px;
    margin: 20px;
    position: relative;
}

.fade {
    height: 100%;
    width: 100%;
    position:absolute;
    
    background: 
      -webkit-linear-gradient(left, 
        rgba(0,0,0,0.65) 0%, 
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,0) 80%,
        rgba(0,0,0,0.65) 100%
      );
}