JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="flex-container">
<li class="flex-item">
<a href="javascript:void(0);"><img src="/images/bild1.jpg" width="120" height="120" border="0" /></a>
Login
</li>
<li class="flex-item">
<a href="javascript:void(0);"><img src="/images/bild1.jpg" width="120" height="120" border="0" /></a>
Geburtstage
</li>
<li class="flex-item">
<a href="javascript:void(0);"><img src="/images/bild1.jpg" width="120" height="120" border="0" /></a>
Jubilare
</li>
<li class="flex-item">
<a href="javascript:void(0);"><img src="/images/bild1.jpg" width="120" height="120" border="0" /></a>
Eintritte
</li>
<li class="flex-item">
<a href="javascript:void(0);"><img src="/images/bild1.jpg" width="120" height="120" border="0" /></a>
News
</li>
</ul>
CSS
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.flex-item {
padding: 5px;
width: 120px;
height: 150px;
margin-top: 10px;
border: solid 1px #000;
color: red;
text-align: center;
}