JSFiddle - React, Tailwind, and code Playground

by afelixj

HTML

<div class="wrap">
  <ul>
    <li>
      <h3>Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <a href="" class="more">More</a>
    </li>
    <li>
      <h3>Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <a href="" class="more">More</a>
    </li>
    <li>
      <h3>Title</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      <a href="" class="more">More</a>
    </li>
  </ul>
</div>

CSS

*{box-sizing: border-box;}
.wrap{
  background: url(http://lorempixel.com/400/200/nature/);
  -webkit-background-size: cover;
  background-size: cover;
  height: 300px;
  width: 600px;
  overflow: hidden;
  position: relative;
}
ul{
  margin: 0;
  padding: 0;
  position: absolute;
  bottom: 0;
  left: 0;
}
li{
  color: #fff;
  list-style: none;
  float: left;
  margin: 0 10px;
  padding: 0 30px;
  position: relative;
  width: 30%;
}
li:before, li:after{
  background: rgba(0,0,0,.5);
  content: '';
  left: 0;
  height: 50%;
  position: absolute;
  width: 100%;
}
li:before{
  top:0;
  transform: skewX(20deg);
}
li:after{
  bottom: 0;
  transform: skewX(-20deg);
}
li:nth-child(2):after, li:nth-child(2):before{
  background: rgba(255,0,0,.5);
}