JSFiddle - React, Tailwind, and code Playground

by Andrey Izman

HTML

<div class="row border">
  <div class="col">
    <div id="user-information">
      <div data-components="kekka-user-information" id="ember12" class="ember-view"><div class="columns">
    <div class="column-unshrink separator-pageitems beside narrow"></div>
    <div class="column-unshrink ">
        <div data-components="pdr-image-view" id="ember13" class="icon-profile default-profile ember-view" styled="background-image: url(//psn-rsc.prod.dl.playstation.net/psn-rsc/avatar/EP1018/CUSA00135_00-AV00000000000022_3F62FA3EF2B7D763A3C1_l.png);"></div>
    </div>
    <div class="column-unshrink separator-pageitems beside narrow"></div>
    <div class="row-flex rows-center fitting-width">
            <div class="profile-text-title max-two-lines" dir="ltr">Test Test</div>
            <div class="profile-text-main max-two-lines">TestTest</div>
            <div class="profile-text-sub max-two-lines">[email protected]</div>
    </div>
    <div class="column-unshrink separator-pageitems beside narrow"></div>
</div></div>
    </div>
    <div id="loading1" class="loading-screen hidden">
      <svg class="loading-indicator__triangle loading-indicator--shape-size-regular">
        <path class="loading-indicator--triangle-fill" d="M11.7 1L0 22 24 22 11.7 1ZM11.8 6.1L19.6 19.4 4.3 19.4 11.8 6.1Z"></path>
      </svg>
      <svg class="loading-indicator__circle loading-indicator--shape-size-regular">
        <path class="loading-indicator--circle-fill" d="M12 1C5.9 1 1 5.9 1 12 1 18.1 5.9 23 12 23 18.1 23 23 18.1 23 12 23 5.9 18.1 1 12 1ZM12 20.1C7.5 20.1 3.9 16.5 3.9 12 3.9 7.5 7.5 3.9 12 3.9 16.5 3.9 20.1 7.5 20.1 12 20.1 16.5 16.5 20.1 12 20.1Z"></path>
      </svg>
      <svg class="loading-indicator__cross loading-indicator--shape-size-regular">
        <path class="loading-indicator--cross-fill" d="M22 4.1L19.9 2 11.9 10 4.1 2.1 2 4.2 9.8 12 2.1 19.8 4.1 21.9 11.9 14.1 19.9 22 21.9 19.9 14 12 22 4.1"></path>
      </svg>
      <svg class="loading-indicator__square...

SCSS

body {
  font-size: 1.2rem;
  line-height: 2rem;
  font-family: Arial, helvetica, sans-serif;
}
body.dark-theme {
  color: #ddd;
}

.row {
  display: block;
  float: left;
}
.row .col {
  display: inline-block;
  vertical-align: top;
  float: left;
  min-height: 100px;
  min-width: 240px;
  position: relative;
}
.row .col .loading-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.row .col + .col {
  border-left: 1px solid #3caefb;
}
.clear {
  display: table;
  clear: both;
}
.icon-profile {
  background-image: url(/images/playstation-logo.jpg);
    background-image: url(http://metamorphz.d/playstation-logo.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  height: 70px;
  width: 70px;
  margin: 0 10px 0 0;
}

.column-unshrink {
  flex-shrink: 0;
}
.fitting-width {
  width: 100%;
}
.row-flex  {
  flex: 1 1 auto;
}
.max-two-lines {
  word-break: break-all;
  max-height: 3rem;
  overflow: hidden;
  line-height: 1.5rem;
  font-size: 16px;
}
.text {
  line-height: 1.5rem;
  font-size: 16px;
}
.columns {
  flex: 1 1 0px;
  padding-left: 0;
  padding-right: 0;
  display: flex;
}
.separator-pageitems {
  display: none;
}

.profile-text-title, .bold {
  font-weight: bold;
}
.border {
  border: 1px solid #3caefb;
}
#user-information {
  padding: 15px;
}
#total-info {
  line-height: 1.5rem;
  padding: 15px 15px 10px 15px;
  min-width: 220px;
}
#navigate-banner {
  max-width: 280px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  line-height: 1.5rem;
  padding: 15px 15px 10px 15px;
}

#navigate-banner svg {
  width: 46px;
}

#navigate-banner .text {
  padding-left: 15px;
}

.btn {
  -webkit-appearance: button;
  outline: 0;
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: .25rem .5rem;
  font-size:...