JSFiddle - React, Tailwind, and code Playground

by thelifeisyours

HTML

<div id="header">
  <a id="title" class="column" href="#">
    <div>Imgur Medals</div>
  </a>
</div>

<div id="main" class="row">
<div id="medals" class="row">
  <div class="column">
    <img src="https://s.imgur.com/images/medal/copper.png" />
    <div class="description">Copper</div>
  </div>
  
  <div class="column">
    <img src="https://s.imgur.com/images/medal/bronze.png" />
    <div class="description">Bronze</div>
  </div>
  
  <div class="column">
    <img src="https://s.imgur.com/images/medal/iron.png" />
    <div class="description">Iron</div>
  </div>
  
  <div class="column">
    <img src="https://s.imgur.com/images/medal/silver.png" />
    <div class="description">Silver</div>
  </div>
  
  <div class="column">
    <img src="https://s.imgur.com/images/medal/gold.png" />
    <div class="description">Gold</div>
  </div>
  
  <div class="column">
    <img src="https://s.imgur.com/images/medal/imgurite.png" />
    <div class="description">Imgurite</div>
  </div>
  </div>
</div>

CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  width:100%;
}

body {
  background: #141518;
  color: #f2f2f2;
  font-family: 'Open Sans',sans-serif;
}

a {
  color: #f2f2f2;
  text-decoration: none;
}

#header {
  width: 100%;
  height: 3em;
  background: #202020;
  border-bottom: solid 1px rgba(0,0,0,0.7);
  box-shadow: 2px 0px 7px 1px rgba(0,0,0,0.7);
  z-index: 999;
  display: flex;
  flex-flow: row;
  justify-content: start;
}

#title {
  align-items: center;
  text-align: center;
  font-size: 1.4em;
}

#main {
  height: 100%;
}

.row {
  display: flex;
  flex-flow: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.column {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: space-between;
  margin: 0.5em;
}

.description {
  font-size: 1.2em;
  font-weight: 666;
  margin: 0.5em;
}