JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<div>
    <h1>
            Ü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>
  </div>
  <div>
    <h1>
            Ü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>
  </div>
  <div>
    <h1>
            Ü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>
    </div>

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');
}

figure {
  background: yellow;
  width: 100px;
}

figcaption {
  text-align: center;
}

.img {
  height: 100px;
  width: 100px;
}

body {
  background-color: grey;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

div {
  display: flex;
  flex-direction: column;
  align-istems: center;
}