JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<ul class="movies">
    <li>
        <img...

CSS

body {
 padding: 20px;   
}

.movies {
    
}

.movies li {
    width: 184px;
    height: 273px;
    list-style: none;
    display: block;
  float: left;  
  position: relative;
    border-radius: 3px;
    border: 1px solid #fff;
    box-shadow: 0 0 3px rgba(0,0,0,0.5);
}
.movies li .image {
    position: absolute;
   border-radius: 3px;
}
.movies li .shade {
   width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.5)), to(rgba(255,255,255,0)));   
}