JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="pagination clearfix">
<li class="pagination-item"><a href="#" class="pagination-link">1. Адрес заказа</a></li>
<li class="pagination-item"><a href="#" class="pagination-link">2. Оплата</a></li>
</ul>
CSS
*,
*:before,
*:after{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
}
.pagination-link,
.pagination-link:after{
transition: all .3s;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-ms-transition: all .3s;
-o-transition: all .3s;
}
* html .clearfix {zoom: 1;}
*:first-child+html .clearfix{zoom: 1;}
.clearfix:before,
.clearfix:after{
width: 100%;
height: 0;
content: '.';
display: block;
font-size: 0;
visibility: hidden;
}
.pagination{
margin: 0;
padding: 0;
}
.pagination-item{
margin: 0 0 0 44px;
padding: 0;
float: left;
list-style-type: none;
}
.pagination-item:first-child{margin-left: 0;}
.pagination-link{
background: #ccc;
padding: 14px 12px;
display: block;
font-size: 15px;
font-family: Times New Roman;
color: #333;
text-decoration: none;
border: 1px solid #333;
border-right: none;
border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
-ms-border-radius: 4px 0 0 4px;
-o-border-radius: 4px 0 0 4px;
position: relative;
}
.pagination-link:hover,
.pagination-link:hover:after{background: #333;}
.pagination-link:hover{color: #fff;}
.pagination-link:after{
background: #ccc;
width: 33px;
height: 33px;
margin-left: -16px;
content: '';
display: block;
border: 1px solid #333;
border-bottom: none;
border-left: none;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
position: absolute;
top: 6px;
left: 100%;
z-index: -1;
}