JSFiddle - React, Tailwind, and code Playground

by bumbu

HTML

<div class="body">
    
<div class="progress_title">
  <div class="title "><a href="#">3. Compose email</a></div>
  <div class="title "><a href="#">2. Choose contacts</a></div>
  <div class="title"><a href="#">1. Choose documents</a></div>
</div>

<div class="progress_title">
  <div class="title "><a href="#">3. Compose email</a></div>
  <div class="title "><a href="#">2. Choose contacts</a></div>
  <div class="title active"><a href="#">1. Choose documents</a></div>
</div>

<div class="progress_title">
  <div class="title "><a href="#">3. Compose email</a></div>
  <div class="title active"><a href="#">2. Choose contacts</a></div>
  <div class="title active"><a href="#">1. Choose documents</a></div>
</div>

<div class="progress_title">
  <div class="title active"><a href="#">3. Compose email</a></div>
  <div class="title active"><a href="#">2. Choose contacts</a></div>
  <div class="title active"><a href="#">1. Choose documents</a></div>
</div>
    
</div>

CSS

.body{
    background:#fff;
}

/* Main styles */
.progress_title{
    height:38px;
    border:1px solid #e0e0e0;
    border-radius:4px;
    margin:20px;
    overflow:hidden;
}
.title{
    float:right;
    width:33.333%;
    line-height:38px;
    padding:0;
    position:relative;
}
.title a{
    color:#c7c2ba;
    font-weight:bold;
    padding:0 0 0 33px;
    text-decoration:none;
}
.title:last-child a{
    padding:0 0 0 12px;
}

/* Active elemet */
.active{
    background:#919394;
    color:#fff;
    z-index:5;
}
.active a{
    color:#fff;
}

/* Border radius */
.title:last-child{
    border-top-left-radius:4px;
    border-bottom-left-radius:4px;
}
.title:first-child{
    border-top-right-radius:4px;
    border-bottom-right-radius:4px;
}

/* Arrows */

.title:before{
    content: "";
    display:block;
    width: 0px; 
    height: 1px; 
    border-top: 21px solid transparent;
    border-bottom: 20px solid transparent;    
    border-left: 21px solid #e0e0e0;
    position:absolute;
    top:-2px;left:2px;right:auto;
    z-index:5;
}
.title:after{
    content: "";
    display:block;
    width: 0; 
    height: 1px; 
    border-top: 19px solid transparent;
    border-bottom: 18px solid transparent;    
    border-left: 19px solid #fff;
    position:absolute;
    top:0;right:-21px;
    z-index:20;
}

.title:last-child:before{display:none;}
    
.title.active:before{
    content: "";
    display:block;
    width: 0px; 
    height: 1px; 
    border-top: 21px solid transparent;
    border-bottom: 20px solid transparent;    
    border-left: 21px solid #fff;
    position:absolute;
    top:-2px;right:-21px;left:auto;
    z-index:15;
}
.title.active:after{
    content: "";
    display:block;
    width: 0; 
    height: 1px; 
    border-top: 19px solid transparent;
    border-bottom: 18px solid transparent;    
    border-left: 19px solid #919394;
    position:absolute;
    top:0;right:-19px;
   ...