JSFiddle - React, Tailwind, and code Playground
HTML
<ul>
<li>
<h1 align="center">
Überschrift
</h1>
<figure>
<img class="img" src="http://via.placeholder.com/150x150" />
<figcaption>
<a href="#">TEST</a>
</figcaption>
</figure>
<figure>
<img class="img" src="http://via.placeholder.com/150x150" />
<figcaption>
<a href="#">TEST</a>
</figcaption>
</figure>
<figure>
<img class="img" src="http://via.placeholder.com/150x150" />
<figcaption>
<a href="#">TEST</a>
</figcaption>
</figure>
</li>
<li>
<h1 align="center">
Überschrift
</h1>
<figure>
<img class="img" src="http://via.placeholder.com/150x150" />
<figcaption>
<a href="#">TEST</a>
</figcaption>
</figure>
<figure>
<img class="img" src="http://via.placeholder.com/150x150" />
<figcaption>
<a href="#">TEST</a>
</figcaption>
</figure>
<figure>
<img class="img" src="http://via.placeholder.com/150x150" />
<figcaption>
<a href="#">TEST</a>
</figcaption>
</figure>
</li>
<li>
<h1 align="center">
Überschrift
</h1>
<figure>
<img class="img" src=http://via.placeholder.com/150x150 />
<figcaption>
<a href="#">TEST</a>
</figcaption>
</figure>
<figure>
<img class="img" src="http://via.placeholder.com/150x150" />
<figcaption>
<a href="#">TEST</a>
</figcaption>
</figure>
<figure>
<img class="img" src="http://via.placeholder.com/150x150" />
<figcaption>
<a href="#">TEST</a>
</figcaption>
</figure>
</li>
</ul>
CSS
@font-face {
font-family: 'meine-schrift';
src: url('Cracked Code.ttf') format('truetype');
}
@font-face {
font-family: 'meine-schrift2';
src: url('TheLightFont.ttf') format('truetype');
}
ul {
list-style: none;
}
li {
float: left;
}
figure {
background: yellow;
}
figcaption {
text-align: center;
}
.img {
height: 100px;
width: 100px;
}
body {
background-color: grey;
}