JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<center>
  <table>
    <tr>
      <div class="czc1"> Ian Wood - burmistrz miasta rode</div>
    </tr>
    <td>
      <div class="a1npctabela"> <img src="http://i.imgur.com/JXXAcdA.png"></div>
    </td>
    <td>

      <div class="a3npctabela">

        UMIEJĘTNOŚCI:
        <br> Inteligencja: 45/100
        <br> Kondycja: 15/100
        <br> Reakcja: 25/100
        <br> Celność: 10/100
        <br> Spostrzegawczość: 15/100
        <br> Charyzma: 20/100
      </div>

      <div class="a2npctabela">
        <center>Ian Wood | Stanley Tucci
          <br>55 lat | przyjezdny</center>
        <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.
        <br> 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.
        <br>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 trudnościami, jakimi są po prostu... obywatele. Nie daje jednak po sobie tego poznać.
        <br>Rzadko kiedy można na niego trafić. Zwłaszcza jeśli chce się załatwić coś bezpośrednio u mężczyzny. Jego nieobecność bywa frustrująca. A najczęściej szansą na spotkanie z nim są okoliczności powiązane z miasteczkiem.
      </div>

    </td>
  </table>
</center>

CSS

.czc1 {
  color: teal;
  font-family: Verdana;
  font-size: 18px;
  text-transform: uppercase;
  text-align: left;
  letter-spacing: -2px;
  margin-left: 280px;
  margin-bottom: -12px;
}

.a1npctabela {
  height: 318px;
  width: 198px;
  border: 1px #c9c9c9 solid;
}

.a2npctabela {
  width: 270px;
  height: 203px;
  overflow-y: auto;
  margin: 3px;
  border: 1px #c9c9c9 solid;
  font-size: 12px;
  font-family: Verdana;
  text-align: justify;
}

.a3npctabela {
  width: 240px;
  height: 110px;
  padding-left: 30px;
  margin: 3px;
  border: 1px #c9c9c9 solid;
  font-size: 10px;
  font-family: Verdana;
  text-align: left;
}