JSFiddle - React, Tailwind, and code Playground

by Bateman

HTML

<div class="header">
  Hero calc
</div>

<div class="example">
  <div class="effect-badge">DEF</div>
</div>

<div class="container">

  <div class="hero">
    <div class="hero__name">
      ESF

      <span class="hero__level">70 lvl</span>
    </div>

    <div class="hero-talents">
      <div class="hero-talents__talent">+4 DEF</div>
      <div class="hero-talents__talent">+24 AP</div>
      <div class="hero-talents__talent">+20 RESIST</div>
      <div class="hero-talents__talent">+12 CC</div>
      <div class="hero-talents__talent">+24 CD</div>
    </div>

    <div class="hero-gears">
      <div class="gear">
        <div class="gear__name">
          head
          <span class="gear__level">60 lvl</span>
        </div>
        <div class="gear__effect">
          <span class="gear__effect-name">DEF gear</span>
          <span class="gear__effect-value">+21 DEF</span>
        </div>
        <div class="gear__effect">
          <span class="gear__effect-name">CC high</span>
          <span class="gear__effect-value">+15 CC</span>
        </div>
        <div class="gear__effect">
          <span class="gear__effect-name">CD high</span>
          <span class="gear__effect-value">+35 CD</span>
        </div>
        <div class="gear__effect">
          <span class="gear__effect-name">ATT high</span>
          <span class="gear__effect-value">+250 ATT</span>
        </div>
      </div>
      <div class="gear">
        <div class="gear__name">chest</div>
        <div class="gear__effect"></div>
        <div class="gear__effect"></div>
        <div class="gear__effect"></div>
        <div class="gear__effect"></div>
      </div>
      <div class="gear">
        <div class="gear__name">arms</div>
        <div class="gear__effect"></div>
        <div class="gear__effect"></div>
        <div class="gear__effect"></div>
        <div class="gear__effect"></div>
      </div>
      <div class="gear">
        <div class="gear__name">legs</div>
        <div...

CSS

* {
  box-sizing: border-box;
}

html {
  font-family: Verdana;
}

body {
  font-size: 15px;
  color: #333;
  line-height: 1.5;
}

.header {
  padding: 16px 24px;
  font-size: 1.5rem;
  background: #ccc;
}

.container {
  /* max-width: 768px; */
  /* margin: auto; */
  margin: 16px 24px;
}

.example {
  margin: 16px;
  padding: 16px;
}

.hero {}

.hero__name {
  font-size: 1.25rem;
}

.hero__level {
  font-size: 1rem;
  color: #777;
}

.hero-talents {
  margin: 16px 0;
}

.hero-talents__talent {
  /* padding: 4px 0; */
}

.gear {
  margin-bottom: 16px;
}

.gear__name {
  text-transform: uppercase;
  /* margin-bottom: 16px; */
}

.gear__level {
  text-transform: none;
  color: #777777;
  font-size: .75rem;
}

.gear__effect {
  margin-left: 16px;
}

.gear__effect-name {
  display: inline-block;
  width: 80px;
}

.gear__effect-value {
  color: #777777;
}