JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="medal">
  <div class="honors">
    <span></span><span></span><span></span><span></span><span></span><span></span>
  </div>
</div>

CSS

html{
  height:100%;
}
body{
  height:100%;
  background-color:#000;
}
.medal{
  background-image: url(https://aninoob.com/ANINOOB.api/image.library/spaceship/wings.png?111);
  background-repeat:no-repeat;
  background-position:center top;
  width:356px;
  height:300px;
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-178px;
  margin-top:-150px;
}
.medal>.honors{
  position:relative;
  width:270px;
  height:auto;
  margin-left:auto;
  margin-right:auto;
  margin-top:107px;
  background-color:rgba(240,200,50,0.1);
  padding:5px;
  line-height: 10px;
}
.medal>.honors>span{
  position:relative;
  display:inline-block;
  width:19%;
  margin:.5%;
  height:10px;
  background-color:#ff0000;
}