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="inwbaza">
  <table>
    <tbody>
      <tr>
        <td colspan="2" rowspan="2">
                     <img src="https://via.placeholder.com/150x150" class="inwbazaikona">
        </td>
        <td colspan="2">
          <div class="inwnazwa">Josephine Anne Kovalsky-Greenwood</div>
        </td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="inwbazaprawoup">czterdzieści i cztery <br>
          Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Lorem Ipsum jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. 

          </div>
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <div class="inwsrodek"><div class="belainwsrodek">czterdzieści i cztery </div>
            Jest dostępnych wiele różnych wersji Lorem Ipsum, ale większość zmieniła się pod wpływem dodanego humoru czy przypadkowych słów, które nawet w najmniejszym stopniu nie przypominają istniejących. Jeśli masz zamiar użyć fragmentu Lorem Ipsum, lepiej mieć pewność, że nie ma niczego „dziwnego” w środku tekstu. Wszystkie Internetowe generatory Lorem Ipsum mają tendencje do kopiowania już istniejących bloków, co czyni nasz pierwszym prawdziwym...

CSS

.inwbaza {
  background-image: url('https://i.servimg.com/u/f24/20/22/08/14/dark_w10.png');
  background-color: black;
  width: 520px;
  height: 450px;
  padding: 4px;
  text-align: justify;
  font-size: 10pt;
  font-family: 'Arial', sans-serif;
  color: #aca9a5;
}

.inwbazaikona {
  border: 8px solid #201e1b;
}



.inwbazaprawoup {
  width: 334px;
  height: 112px;
  overflow-y: auto;
  padding: 6px;
  font-size: 8pt;
  margin-left: -90px;
  background-color: #201e1b;
}

.inwnazwa {
  width: 340px;
  text-align: center;
  letter-spacing: -1px;
  font-size: 16pt;
  font-family: 'PT Sans Narrow', sans-serif;
  color: orange;
  margin-left: -90px;
  padding: 4px;

}

.inwtab {
  text-align: justify;
  font-size: 10px;
  width: 247px;
  height: 106px;
  overflow-y: auto;
  padding: 4px;
  background-color: #201e1b;

}

.inwsrodek {
  width: 506px;
  height: 140px;
  padding: 4px;
  overflow-y: auto;
  font-size: 9pt;
  background-color: #201e1b;
  margin-bottom: 4px;

}

.belainwsrodek {
  text-decoration: underline;
  text-decoration-style: 1px solid;
  text-decoration-color: #787062;
  letter-spacing: 2px;
  padding: 2px;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  color: #644f29;
  font-weight: bold;
  font-size: 10pt;
}

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