JSFiddle - React, Tailwind, and code Playground

by roomyrooms

HTML

<div class='achievements_box'>
  <div class='achievements_box_interior'>
    <div class='achievement_contents_unowned'>
      <div class='achievement_container'>
        <img class='achievement_icon' src='https://i.ibb.co/ftrvNyR/trophysmall.png'>

        <img class='achievement_icon_frame' src='https://i.ibb.co/2dmzKpV/slotempty.png'>

        <img class='achievement_banner'>

        <div class='achievement_type'>
          <span>Per Character</span>
        </div>
        <div class='achievement_date'>
          <span>10/23/19</span>
        </div>
        <div class='achievement_title'>
          <span>Level 50</span>
        </div>
        <div class='achievement_description'>
          <span>Reach level 50 on a character.</span>
        </div>
      </div>
    </div>
    <div class='achievement_contents_owned'>
      <div class='achievement_container'>
        <img class='achievement_icon' src='https://i.ibb.co/ftrvNyR/trophysmall.png'>

        <img class='achievement_icon_frame' src='https://i.ibb.co/2dmzKpV/slotempty.png'>

        <img class='achievement_banner'>

        <div class='achievement_title'>
          <span>Level 60</span>
        </div>
        <div class='achievement_description'>
          <span>Reach level 60 on a character.</span>
        </div>
      </div>
    </div>
    <div class='achievement_contents_owned'>
      <div class='achievement_container'>
        <img class='achievement_icon' src='https://i.ibb.co/ftrvNyR/trophysmall.png'>

        <img class='achievement_icon_frame' src='https://i.ibb.co/2dmzKpV/slotempty.png'>

        <img class='achievement_banner'>

        <div class='achievement_title'>
          <span>Level 70</span>
        </div>
        <div class='achievement_description'>
          <span>Reach level 70 on a character.</span>
        </div>
      </div>
    </div>
    <div class='achievement_contents_owned'>
      <div class='achievement_container'>
        <img class='achievement_icon'...

CSS

.achievements_box {
  height: 344px;
  overflow-x: hidden;
  overflow-y: scroll;
  background-color: #000;
}

.achievements_box_interior {
  margin-top: 30px;
  padding: 5px;
  margin-left: 5px;
}

.achievement_container {
  width: 50%;
}

.achievement_contents_owned {
  transform: scale(1);
  transform-origin: top left;
  image-rendering: pixelated;
  font-family: Constantia;
  width: 100%;
  height: 64px;
  padding: 3px;
  padding-top: 10px;
  color: #fefefe;
  position: relative;
}
.achievement_contents_owned:hover {
  color: #bbb;
}
.achievement_contents_owned .achievement_banner{
  width: 0px;
  height: 0px;
  padding: 32px 194px 32px 194px;
  background-image: url('https://i.ibb.co/44FgRrk/achievebanner.png');
  border-radius: 3px;
}
.achievement_contents_owned .achievement_type{
  color: #ccc;
}
.achievement_contents_owned .achievement_date{
  color: #ccc;
}

.achievement_contents_unowned {
  transform: scale(1);
  transform-origin: top left;
  image-rendering: pixelated;
  font-family: Constantia;
  width: 100%;
  height: 64px;
  padding: 3px;
  padding-top: 10px;
  color: #777;
  position: relative;
}
.achievement_contents_unowned:hover {
  color: #aaa;
}
.achievement_contents_unowned .achievement_banner {
  width: 0px;
  height: 0px;
  padding: 32px 194px 32px 194px;
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://i.ibb.co/44FgRrk/achievebanner.png');
}
.achievement_contents_unowned .achievement_icon {
  filter: brightness(50%);
}
.achievement_contents_unowned .achievement_description {
  color: #999;
  font-weight: normal;
  text-shadow: 1px 1px #333;
}
.achievement_contents_unowned .achievement_type {
  color: #999;
  text-shadow: 1px 1px #333;
}
.achievement_contents_unowned .achievement_date {
  color: #999;
  text-shadow: 1px 1px #333;
}

.achievement_icon {
  image-rendering: auto;
  z-index: 2;
  top: -27px;
  position: absolute;
}

.achievement_icon_frame {
  width: 90px;
  height: 90px;
  left: -10px;
 ...