JSFiddle - React, Tailwind, and code Playground

by moob

HTML

<section>
<ul>
<li><div>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</div></li>
<li><div>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</div></li>
<li><div>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</div></li>
<li><div>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</div></li>
</ul>
</section>

CSS

* {box-sizing:border-box; margin:0; padding:0;}
section {
    width:100vw;
    overflow:auto;
}
ul {
    display:block;
    margin:0;
    padding:0;
    list-style-type:none;
    width:220vw;
    margin:0 -5vw;
}
li {
   margin:0 0 0 -.25em;
    padding:0; 
    display:inline-block;
    background:#666;
    width:55vw;
    height:200px;
    overflow:hidden;
    color:#fff;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
}
li div {
    margin:0 -50px;
    padding:20px 100px;
	-webkit-transform: skew(-20deg);
	   -moz-transform: skew(-20deg);
	     -o-transform: skew(-20deg);

  min-height:100%;
}
li:nth-child(odd) div {
      background: url(https://placeimg.com/600/400/arch);
  background-size: cover;
}