JSFiddle - React, Tailwind, and code Playground

by avrahamcool

HTML

<ul class="steps"><li><div class="Icon"></div><br/><span>1.Warenkorb</span></li><li><div class="Icon"></div><span>2.Adresse</span></li><li><div class="Icon"></div><span>3.Zahlungsart</span></li><li><div class="Icon"></div><span>4.Bestätigen</span></li><li><div class="Icon"></div><span>5.Danke</span></li>
</ul>

CSS

.steps
{
 	width:100%;
 	list-style-type: none;
 	padding:0;
 	margin:0 auto;
 	background: url(http://tnsdev.cloudapp.net/dev/steps_slice.png) repeat-x;
 }

 .steps li
{
    width: calc((100% - 44px)/4);
    min-height: 70px;
    display: inline-block;
    position: relative;
}
.steps li:last-child
{
    width: 44px;
}
.steps li:last-child span
{
    left: -100%;
}
.steps li .Icon
{
    width: 44px;
    height: 44px;
    display: inline-block;
    background: url(http://tnsdev.cloudapp.net/dev/steps_icon.png) no-repeat;
}
.steps li span
{
    position: absolute;
    bottom: 0;
    left: 0;
}