JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
            
                <div class="link select-A">
                <div class="square1"></div>
                <a class="triangle-up" href="#"><span>A</span></a>
                <div class="square2"></div>
                </div> 

                <div class="link select-B">
                <div class="square1"></div>
                <a class="triangle-up" href="#"><span>B</span></a>
                <div class="square2"></div>
                </div> 

                <div class="link select-C">
                <div class="square1"></div>
                <a class="triangle-up" href="#"><span>C</span></a>
                <div class="square2"></div>
                </div> 

                <div class="link select-D">
                <div class="square1"></div>
                <a class="triangle-up" href="#"><span>D</span></a>
                <div class="square2"></div>
                </div> 
              
            </nav>

CSS

nav {margin-left:100px}

.link {width:180px; height:100px; overflow:hidden;margin:auto; position:relative; margin-top: 19px; float: left; margin-left: -115px;}
.triangle-up {
	width: 0;
	height: 0;
	border-left: 80px solid transparent;
	border-right: 80px solid transparent;
	border-bottom: 100px solid red;
    position:absolute;
    top:0px;
    left:10px;
}
.square1 {
    z-index: 10;
    position: absolute;
    display: inline-block;
    width: 80px;
    height: 170px;
   // background: blue;
    top: -44px;
    left: -34px;
    transform: rotate(39deg);
  -ms-transform: rotate(39deg);/* IE 9 */
  -webkit-transform: rotate(39deg); /* Safari and Chrome */
  -o-transform: rotate(39deg); /* Opera */
  -moz-transform: rotate(39deg); /* Firefox */
}
.square2 {
   z-index: 10;
  position: absolute;
  display: inline-block;
  width: 80px;
  height: 170px;
 // background: blue;
  top: -63px;
  left: 118px;
  transform: rotate(-39deg);
  -ms-transform: rotate(-39deg);/* IE 9 */
  -webkit-transform: rotate(-39deg); /* Safari and Chrome */
  -o-transform: rotate(-39deg); /* Opera */
  -moz-transform: rotate(-39deg); /* Firefox */
}
.link span {
   -webkit-transform: rotate(-50deg);
      -moz-transform: rotate(-50deg);
       -ms-transform: rotate(-50deg);
        -o-transform: rotate(-50deg);
           transform: rotate(-50deg);
   margin-left: -93px;
   padding-top: 54px;
   display: block;
}