JSFiddle - React, Tailwind, and code Playground

by deswolf

HTML

<div id="test">
</div>

CSS

* {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  background: black;
}

img {
  width: 50px;
  height: 50px;
}

#test {
  margin: 15px;
}

.row {
  background: #333;
  color: white;
  display: flex;
  align-items: center;
  border: 1px solid #333;
}

a, a:visited {
  color: #2de2ea;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
  font-weight: bold;
}

a:hover {
  color: white;
}

.meta {
  color: gray;
}

.mini {
  font-size: 12px;
}

.row + .row {
  margin-top: 6px;
}

.row > * {
  padding: 5px;
}

JavaScript

var data = {
  "result": [
    {
      "id": "5902fbe9-c847-474b-a020-76000e46ed85",
      "recipient": {
        "id": "817b7610-7a39-4dee-859a-76be8e60ebdf",
        "type": "user",
        "name": "Zenk3",
        "avatar": "https://assets.faceit-cdn.net/avatars/817b7610-7a39-4dee-859a-76be8e60ebdf_1550602890233.png",
        "verified": false
      },
      "reference": {
          "avatar": "https://assets.faceit-cdn.net/avatars/3280fb87-eaa9-436b-ad88-e19d0536d322_1575770686153.jpg",
          "id": "3280fb87-eaa9-436b-ad88-e19d0536d322",
          "name": "ddeev",
          "type": "user",
          "verified": false
        },
      "status": "read",
      "type": "user_elo_reverted",
      "version": 1,
      "count": 1,
      "interactors": [
        {
          "id": "817b7610-7a39-4dee-859a-76be8e60ebdf",
          "type": "user",
          "name": "Zenk3",
          "avatar": "https://assets.faceit-cdn.net/avatars/817b7610-7a39-4dee-859a-76be8e60ebdf_1550602890233.png",
          "verified": false
        }
      ],
      "data": {
          "matches_played": 1,
          "rating_delta": 25,
          "reason": "cheating"
        },
      "created_at": "1646521683952"
    },
    {
      "id": "e6332a73-0e0c-4171-94b9-04cc9cd24759",
      "recipient": {
        "id": "817b7610-7a39-4dee-859a-76be8e60ebdf",
        "type": "user",
        "name": "Zenk3",
        "avatar": "https://assets.faceit-cdn.net/avatars/817b7610-7a39-4dee-859a-76be8e60ebdf_1550602890233.png",
        "verified": false
      },
      "reference": {
          "avatar": "https://distribution.faceit-cdn.net/images/45db16db-de30-436e-80e9-645e9951f924.jpeg",
          "id": "72d48635-fc5c-4b55-8c9b-21f057032ea8",
          "name": "Alika5266",
          "type": "user",
          "verified": false
        },
      "status": "read",
      "type": "user_elo_reverted",
      "version": 1,
      "count": 1,
      "interactors": [
        {
          "id":...