JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&family=PT+Sans+Narrow:wght@400;700&display=swap" rel="stylesheet">

<div class="kpbaza">
  <div class="kpgodnosc">Josephine Anne Kovalsky-Greenwood</div>
  <br>
  <img src="https://via.placeholder.com/500x250" style="max-width:500px">
  <div class="naglowekbela">  metryka  </div>
  <center><table>
  <tr><td><div class="danebela1a">data urodzenia</div></td><td><div class="danebela2a">
  wpisz  </div></td><td><div class="danebela1a">pochodzenie</div></td><td><div class="danebela2a">
  wpisz  </div></td></tr>
    <tr><td><div class="danebela1a">status społeczny</div></td><td><div class="danebela2a">
  wpisz  </div></td><td><div class="danebela1a">miejsce zamieszkania</div></td><td><div class="danebela2a">
  wpisz  </div></td></tr>
      <tr><td><div class="danebela1a">zawód</div></td><td> <div class="danebela2a">
  wpisz  </div></td><td><div class="danebela1a">stan cywilny</div></td><td><div class="danebela2a">
  wpisz  </div></td></tr>
        <tr><td><div class="danebela1a">waga</div></td><td><div class="danebela2a">
  wpisz  </div></td><td><div class="danebela1a">wzrost</div></td><td><div class="danebela2a">
  wpisz  </div></td></tr>
        <tr><td><div class="danebela1a">kolor oczu</div></td><td><div class="danebela2a">
  wpisz  </div></td><td><div class="danebela1a">kolor włosów</div></td><td><div class="danebela2a">
  wpisz  </div></td></tr>
  </table></center>
  <div class="naglowekbela">co potrafię?</div>
   <center><table>
   <tr>
      <td>
        <div class="danebela1">bum bum bum</div>
      </td>
      <td>
        <div class="danebela2">100/100
        </div>
      </td>
      <td>
        <div class="danebela1">bum bum bum</div>
      </td>
      <td>
        <div class="danebela2">100/100
        </div>
      </td>
    </tr>
     <tr>
      <td>
        <div class="danebela1">bum bum bum</div>
      </td>
      <td>
        <div class="danebela2">100/100
      ...

CSS

.kpbaza {
  width: 500px;
  height: auto;
  padding: 10px;
  font-size: 9pt;
  font-family: 'Arial', sans-serif;
  text-align: justify;
  background-color: #201e1b;
  color: #aca9a5;
}

.kpgodnosc {
  text-align: center;
  font-size: 21pt;
  font-family: 'PT Sans Narrow', sans-serif;
  color: #644f29;
  font-style: normal;
  letter-spacing: 1px;
}

.danebela1 {
  background-color: #644f29;
  color: #201e1b;
  width: 150px;
  padding: 2px;
  text-align: center;
  font-size: 8pt;
  text-transform: uppercase;
  border: 1px solid #644f29;

}

.danebela2a {
  font-size: 8pt;
  
}

.danebela1a {
  background-color: #644f29;
  color: #201e1b;
  width: 130px;
  padding: 2px;
  text-align: center;
  font-size: 8pt;
  text-transform: uppercase;
  border: 1px solid #644f29;

}

.danebela2 {
  border: 1px solid #644f29;
  color: #644f29;
  width: 50px;
  padding: 2px;
  text-align: center;
  font-size: 8pt;
  text-transform: uppercase;
}

.naglowekbela {
  border-bottom: 2px solid #644f29;
  width: 100%;
  font-size: 14pt;
  font-family: 'Oswald', sans-serif;
  text-align: right;
  margin-top: 10px;
  margin-bottom: 10px;
  letter-spacing: 4px;
}

.creditsv {
  font-size: 6pt;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
}