JSFiddle - React, Tailwind, and code Playground

by Annemarie Köhler

HTML

<div class="wrapper">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four"></div>
  <div class="triangle"></div>
</div>

CSS

body {
  padding: 25px;
}
.wrapper {
  position: relative;
}

.wrapper .one {
  background: darkgrey;
  width: 250px;
  height: 150px;
  top: 0;
  position: absolute;
  transform: rotate(4deg);
} 

.wrapper .two {
  background: grey;
  width: 250px;
  height: 150px;
  top: 0;
  position: absolute;
  transform: rotate(2deg);
} 

.wrapper .three {
  background: lightgrey;
  width: 250px;
  height: 150px;
  top: 0;
  position: absolute;
}

.wrapper .four {
  background: red;
  width: 250px;
  height: 15px;
  top: 10px;
  position: absolute;
}

.wrapper .triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-color: #cfcfcf transparent transparent transparent;
  top: 200px;
  right: 0;
  position: absolute;
}