JSFiddle - React, Tailwind, and code Playground

HTML

<div class="firstArrow"> 1 </div>
   <div class="secondArrow"> 2 </div>
   <div class="thirdArrow"> 3 </div>

CSS

.firstArrow {
    position: relative;
    background: red;
    text-align: center;
    margin-right: 10px;
    margin-left: 0px;
    height: 50px;
    width: 330px;
    float: left;
    z-index: 3;

  }

  .firstArrow: before {
    content: '';
    position: absolute;
    width: 20px;
    height: 50%;
    left: 100%;
    top: 0;
    background: linear-gradient(
      to right top,
      red 50%,
      transparent 50%
    );
  }

  .firstArrow: after {
    content: '';
    position: absolute;
    width: 20px;
    height: 50%;
    left: 100%;
    bottom: 0;

    background: linear-gradient(
      to right bottom,
      red 50%,
      transparent 50%
    );
  }

  .secondArrow {
    position: relative;
    background: blue;
    margin-right: 10px;
    padding-left: 50px;
    padding-top: 7px;
    left: -20px;
    float: left;
    z-index: 2;

    height: 50px;
    width: 330px;

  }
  .secondArrow: before {
    content: '';
    position: absolute;
    width: 20px;
    height: 50%;
    left: 100%;
    top: 0;
    background: linear-gradient(
      to right top,
      blue 50%,
      transparent 50%
    );
  }

  .secondArrow:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 50%;
    left: 100%;
    bottom: 0;
    background: linear-gradient(
      to right bottom,
      blue 50%,
      transparent 50%
    );
  }
  .thirdArrow {
    position: relative;
    background: green;
    text-align: center;

    padding-top: 7px;
    height: 50px;
    width: 330px;
    left: -40px;
    float: left;
    z-index: 1;
  }

  .thirdArrow:after {
    content: '';
    position: absolute;
    width: 20px;
    height: 50%;
    left: 100%;
    bottom: 0;
    background: linear-gradient(
      to right bottom,
      green 50%,
      transparent 50%
    );
  }
  .thirdArrow:before {
    content: '';
    position: absolute;
    width: 20px;
    height: 50%;
    left: 100%;
    top: 0;
    background: linear-gradient(
      to right top,
      green 50%,
     ...