JSFiddle - React, Tailwind, and code Playground

by ultranaut

HTML

<div class="frame"></div>

CSS

.frame {
    margin: 20px;
    width: 315px;
    height: 165px;
    
    background-image: url(http://bit.ly/YEG3KR);
    background-image: -webkit-gradient(linear, left top, right top, 
        color-stop(0%,rgba(0,0,0,0.9)), 
        color-stop(20%,rgba(0,0,0,0)), 
        color-stop(80%,rgba(0,0,0,0)), 
        color-stop(100%,rgba(0,0,0,0.9))
      ),
      url(http://bit.ly/YEG3KR);
    background-image: -webkit-linear-gradient(left, 
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,0) 80%,
        rgba(0,0,0,0.9) 100%
      ),
      url(http://bit.ly/YEG3KR);
    background-image: -moz-linear-gradient(left, 
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,0) 80%,
        rgba(0,0,0,0.9) 100%
      ),
      url(http://bit.ly/YEG3KR);    
    background-image: -ms-linear-gradient(left, 
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,0) 80%,
        rgba(0,0,0,0.9) 100%
      ),
      url(http://bit.ly/YEG3KR);   
    background-image: -o-linear-gradient(left, 
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,0) 80%,
        rgba(0,0,0,0.9) 100%
      ),
      url(http://bit.ly/YEG3KR);
    background-image: linear-gradient(left, 
        rgba(0,0,0,0.9) 0%, 
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,0) 80%,
        rgba(0,0,0,0.9) 100%
      ),
      url(http://bit.ly/YEG3KR);
}