JSFiddle - React, Tailwind, and code Playground

by Yaroslav Samardak

HTML

<div class="item">
  <div class="visitor">F123</div>
  <div class="card">
    <div class="info">
      info
    </div>
    <div class="workspace">24</div>
  </div>
</div>

<div class="item">
  <div class="visitor">&nbsp;A33</div>
  <div class="card">
    <div class="info">
      info
    </div>
    <div class="workspace">24</div>
  </div>
</div>

CSS

html {
  font-size: 1.8vmin;
  text-rendering: optimizeSpeed;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: system-ui;
  font-size: 1.5em;
  margin: 0;
  padding: 0.8rem;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

.item {
  height: calc(100vh / 6);
  display: flex;
  margin-bottom: 0.8rem;
  font-family: monospace;
}

.visitor {
  font-size: calc(100vh / 6);
  line-height: 1;
  color: #e0e0e0;
  /* margin-right: -0.7rem; */
  font-weight: 700;
  letter-spacing: -0.7rem;
}

.card {
  box-sizing: border-box;
  flex: 1;
  border: 1rem #e0e0e0 solid;
  border-radius: 1.5rem;
}