JSFiddle - React, Tailwind, and code Playground

by David Kyle

HTML

<div class="liner">
  <div class="grid">
    <div class="file-name">
      test.docx
    </div>
    <div class="file-size">
      123.34 MB
    </div>
    <button>
      Remove
    </button>
  </div>
  <div class="grid">
    <div class="file-name">
      test.docx
    </div>
    <div class="file-size">
      123.34 MB
    </div>
    <button>
      Remove
    </button>
  </div>
</div>

CSS

body {
    background-color: #343434;
    font-family: Verdana, arial, sans-serif;
    font-size: 12px;
}

.liner {
  margin: .2rem;
  border: solid 1px #abab9a;
  padding: .2rem;
  border-radius: .2rem;
}

.grid {
  display: grid;
  grid-template-columns: 50% 30% 15%;
  grid-column-gap: 2%;
  align-self: center;
  align-items: center;
  margin-top: .3rem;
  padding: .2rem;
}

.grid:first-child {
  margin-top: 0;
}

.grid:nth-child(even) {
  background-color: rgba(255, 255, 255, .2);
  color: #efefef;
}

.grid:nth-child(odd) {
  background-color: rgba(255, 255, 255, .4);
  color: #efefef;
}