JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="steps">
<li class="step1 first">
<div class="icon basket"></div>
1.Warenkorb
</li>
<li class="step2">
<div class="icon registration"></div>
2.Adresse
</li>
<li class="step3">
<div class="icon payment"></div>
3.Zahlungsart
</li>
<li class="step4">
<div class="icon order"></div>
4.Bestätigen
</li>
<li class="step5 last">
<div class="icon thankyou last"></div>
5.Danke
</li>
<div style="clear:both"></div>
</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:20%;
float:left;
}
.steps li .icon {
background:url(http://tnsdev.cloudapp.net/dev/steps_icon.png) no-repeat;
height:44px;
width:44px;
}
.steps li.first {
}