JSFiddle - React, Tailwind, and code Playground

by Tomas Sarduy

HTML

<div class="arrow-container">
  <div class="arrow arrow-bottom"> </div>
</div>
<div class="arrow-container">
  <div class="arrow arrow-up"> </div>
</div>
<div class="arrow-container">
  <div class="arrow arrow-left"> </div>
</div>
<div class="arrow-container">
  <div class="arrow arrow-right"> </div>
</div>

CSS

.arrow{
    width: 0;
    height: 0;
    border-radius: 50px;
    display: inline-block;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
}

    .arrow:after{
        content: "";
        width: 0;
        height: 0;
        position: absolute;
    }


.arrow-bottom{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-bottom: 50px solid #333;
}
    .arrow-bottom:after{
         top: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-bottom: 50px solid #fff;
         left: -50px;
    }

.arrow-up{
     border-left: 50px solid transparent;
     border-right: 50px solid transparent;
     border-top: 50px solid #333;
}
    .arrow-up:after{
         bottom: 5px;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
         border-top: 50px solid #fff;
         left: -50px;
    }

.arrow-left{
     border-bottom: 50px solid transparent;
     border-right: 50px solid #333;
     border-top: 50px solid transparent;
}
    .arrow-left:after{
         border-bottom: 50px solid transparent;
         border-right: 50px solid #fff;
         border-top: 50px solid transparent;
         left: 5px;
         top: -50px;
    }

.arrow-right{
    border-bottom: 50px solid transparent;
     border-left: 50px solid #333;
     border-top: 50px solid transparent;
}
    .arrow-right:after{
         border-bottom: 50px solid transparent;
         border-left: 50px solid #fff;
         border-top: 50px solid transparent;
         right: 5px;
         top: -50px;
    }


.arrow-container{
    position: relative;
    float: left;
    margin-left: 20px;
    height: 150px;
    width: 100px;
}