JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Yanone+Kaffeesatz" />

<center>
  <div class="ramka"><img src="http://i.imgur.com/VCg1KhB.png" style="padding: 0px; width: 500px;">

    <div class="pole3">Ian Wood</div>STANLEY TUCCI
    DATA URODZENIA: 11.11.2170 (55)
    ZAWÓD: Burmistrz Rode
    POCHODZENIE: Nowy Jork
    ZNAKI SZCZEGÓLNE: okulary, błysk łysej glacy <table>

      <tr>
        <td>
          <div class="tabumstat">UMIEJĘTNOŚCI:
            Inteligencja: 0/100
            Kondycja: 0/100
            Reakcja: 0/100
            Celność: 0/100
            Spostrzegawczość: 0/100
            Charyzma: 0/100
          </div>
        </td>
        <td style="width:6px;">
          <td>
            <div class="tabumstat">
              CIEKAWOSTKI:
              -
               -
               -
            </div>
          </td>
      </tr>
    </table>
    <div class="charakterystyka">CHARAKTER I HISTORIA POSTACI
      <br> Urodził się poza granicami Rode, choć nazwisko Wood parokrotnie przewinęło się przez karty dokumentów sporządzanych wcześniej w kolonii karnej, zanim ta stała się pełnoprawnym miastem. Trzeci z rodzeństwa. Pierwszy brat został postrzelony przez
      policjanta, drugi razem z siostrą prowadzą spokojne życie w metropolii. Burmistrz jest nieszczególnie wylewny w sprawach swojego życia prywatnego. Powszechnie wiadomo, że ma żonę i dwójkę dzieci, którzy uczęszczają do szkoły w Waszyngtonie. Zresztą
      jego rodzina mieszka tam, na obrzeżach miasta, podczas gdy on większość czasu spędza w Rode; dojeżdża, choć krążą pogłoski, że buduje się na przedmieściach niespiesznie. Uchodzi nie tylko za zabieganego człowieka, ale też i wymagającego. Może nie
      jest dyktatorem i wbrew pozorom wiele brakuje, aby go w ten sposób określić, to jednak jest osobą zdecydowaną. Ma wielkie plany, aby rozbudować miasteczko i uczynić je przyjaznym, mimo powszechnej opinii. Zmaga się jednak z...

CSS

.gowno {
  width: 505px;
  height: 150px;
  overflow: auto;
  background-color: #131311;
  padding: 5px;
  font-size: 13px;
  text-align: justify;
  font-family: 'Calibri';
  color: #5D5B58;
  text-align: justify;
  letter-spacing: 1px;
}

.pole3 {
  padding: 5px;
  margin-bottom: 8px;
  font-size: 45px;
  text-align: center;
  font-family: 'Yanone Kaffeesatz';
  color: #8E8A86;
  letter-spacing: 1px;
}

.ramka {
  width: 500px;
  padding: 0px;
  background-color: #1F1E1D;
  border-top: 5px solid #131311;
  border: 1px solid #131311;
  font-family: 'Calibri';
  color: #696664;
  font-size: 14px;
}

.pole2 {
  width: 480px;
  background-color: #272625;
  padding: 5px;
  font-size: 14px;
  text-align: justify;
  font-family: 'Calibri';
  color: #696664;
  text-align: justify;
  letter-spacing: 1px;
}

.charakterystyka {
  width: 480px;
  background-color: #1F1E1D;
  padding: 5px;
  font-size: 14px;
  text-align: justify;
  font-family: 'Calibri';
  color: #696664;
  text-align: justify;
  letter-spacing: 1px;
}

.tabumstat {
  width: 205px;
  height: 130px;
  padding: 10px;
  background-color: #272625;
  overflow-y: auto;
  font-size: 14px;
  text-align: justify;
  font-family: 'Calibri';
  color: #696664;
  text-align: justify;
  letter-spacing: 1px;
}