JSFiddle - React, Tailwind, and code Playground

by roomyrooms

HTML

<div id='legacy_container'>

  <div id='legacy_window'>
    
    <div class='legacy_item'>
      <img class='legacy_item_image' src='https://i.gyazo.com/90379f6fa88687775a46f6dbd6d508fd.png'>
      <img class='legacy_item_image_border' src='https://i.gyazo.com/f7b4c1c2ad8c99fd69ec85747d8e0484.png'>
      <div class='legacy_item_details'>
        <div class='legacy_item_price'>20 Tokens</div>
        <div class='legacy_item_name'>Special Chat</div>
        <div class='legacy_item_desc'>Get access to an exclusive OOC chat!</div>
      </div>
    </div>
    
    <div class='legacy_item'>
      <img class='legacy_item_image' src='https://i.gyazo.com/3a59bc2a47e1e945ed7454cb35f31620.png'>
      <img class='legacy_item_image_border' src='https://i.gyazo.com/f7b4c1c2ad8c99fd69ec85747d8e0484.png'>
      <div class='legacy_item_details'>
        <div class='legacy_item_price'>20 Tokens</div>
        <div class='legacy_item_name'>Bronze Medal</div>
        <div class='legacy_item_desc'>Show off your commitment with a bronze medal!</div>
      </div>
    </div>
    
    <div class='legacy_item'>
      <img class='legacy_item_image' src='https://i.gyazo.com/20024c5882b27e22ae415f0b6b7ae239.png'>
      <img class='legacy_item_image_border' src='https://i.gyazo.com/f7b4c1c2ad8c99fd69ec85747d8e0484.png'>
      <div class='legacy_item_details'>
        <div class='legacy_item_price'>60 Tokens</div>
        <div class='legacy_item_name'>Silver Medal</div>
        <div class='legacy_item_desc'>Show off your commitment with a silver medal!</div>
      </div>
    </div>
    
    <div class='legacy_item'>
      <img class='legacy_item_image' src='https://i.gyazo.com/d843cae3ed94997b3ba0d849161b3a4f.png'>
      <img class='legacy_item_image_border' src='https://i.gyazo.com/f7b4c1c2ad8c99fd69ec85747d8e0484.png'>
      <div class='legacy_item_details'>
        <div class='legacy_item_price'>150 Tokens</div>
        <div class='legacy_item_name'>Gold Medal</div>
        <div...

CSS

#legacy_container {
  width: 368px;
  max-height: 288px;
}

#legacy_window { 
  background-color: #151515;
  width: 100%;
  max-height: 288px;
  border-radius: 5px;
  overflow-y: scroll;
}

.legacy_item {
  border: 2px solid #3d3d3d;
  box-sizing: border-box;
  width: 100%;
  min-height: 52px;
  margin-bottom: -2px;
  text-shadow: 1px 1px black;
}
.legacy_item:hover {
  background-color: #555;
}
.legacy_item_image_border {
  width: 48px;
  height: 48px;
  margin-left: 0px;
  image-rendering: pixelated;
  margin-left: -52px;
}
.legacy_item_image {
  width: 48px;
  height: 48px;
  object-fit: none;
  image-rendering: pixelated;
}
.legacy_item_details {
  display: inline-block;
  vertical-align: top;
  width: calc(100% - 54px);
}
.legacy_item_price {
  color: #eee;
  font-size: 14px;
  margin-top: 1px;
  padding-right: 5px;
  padding-left: 4px;
  font-family: Verdana;
  display: inline;
  float: right;
  background-color: #333;
  border-radius: 5px;
}
.legacy_item_name {
  color: #eee;
  font-size: 14px;
  margin-top: 1px;
  font-family: Verdana;
  text-decoration: underline;
}
.legacy_item_desc {
  color: #eee;
  font-size: 12px;
  font-family: Verdana;
}