JSFiddle - React, Tailwind, and code Playground

by Josh Krauth-Harding

HTML

<div class="card">
<div class="icon">icon</div>
  <h1>Title</h1>
  <p class="tags">tag 1, tag 2</p>
  <p class="author">author</p>
  <p>Type</p>
</div>
<div class="card"></div>
<div class="card"></div>

CSS

body {
  background-color: #e8d9d8;
  margin: 0;
  padding: 0;
}

.card {
  background-color: white;
  border: 1px solid;
  margin: 1em auto;
  display: grid;
  grid-template-columns: 0.5fr 2fr 1fr;
  grid-template-rows: auto auto;
}

.icon {
  background-color: lightblue;
  height: 36px;
  width: 36px;
  place-self: center;
  grid-area: 1 / 1 / 3 / 2;
}

.tags {
  align-self: end;
}