JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<center>
  <div class="calosc">
    <div class="in">Charlene Adria Davies</div>
    <center>
      <table class="tablekaduza" cellspacing="10" align="center">
        <td background="http://i.imgur.com/yT0WNT7.png" class="td1duze">
          <table class="tabelamala" align="center" valign="middle" cellspacing="10">
            <tr>
              <td class="tdmale">30</td>
            </tr>
            <tr>
              <td class="tdmale">30 VII 1984</td>
            </tr>
            <tr>
              <td class="tdmale">Filadelfia, PA, USA</td>
            </tr>
            <tr>
              <td class="tdmale">rezydentka</td>
            </tr>
            <tr>
              <td class="tdmale">Anestezjologia i IT</td>
            </tr>
            <tr>
              <td class="tdmale">Emma Stone</td>
            </tr>
          </table>
        </td>
        <td class="td2duze" valign="top">
          <div class="bio">biografia</div>
          <center>
            <div class="pole">Zanim jeszcze została stażystką - przebywała w co większych miastach wschodniego wybrzeża Ameryki. Ot, jakby miała przeczucie, że za prędko tutaj nie wróci na znacznie dłużej niż dwa, zwykłe tygodnie. I w gruncie rzeczy nie myliła się - jej starania o staż w medycznym centrum świata jakoś młodej Davies się opłaciły. Nie zakładała, że będzie łatwo. Ba, wykluczyła to już na samym początku, spodziewając się znacznie szybciej najgorszego. Brała pod uwagę, że zawsze może nastąpić pstryknięcie, poprzez które zniechęci się do tego, co wówczas robiła. I mimo że już dawno był przyzwyczajona do takowej myśli - ona nadal potrafiła ją wprowadzić w długie dni milczenia. Podczas nich Charlene zwykła zastanawiać się; nie tylko nad zawodowym życiem, ale też nad prywatnym, towarzyskim, każdym jego aspektem. Jakby chciała ocenić czy ma szansę na to, aby w przyszłości zlikwidować takowe, nieprzyjemne uczucie.
              <br> Do dzisiaj nikomu nie potrafiłaby odpowiedzieć, dlaczego właściwie...

CSS

.calosc {
  width: 540px;
  padding: 2px;
  background-color: #DCD6C3;
  border-top: 2px solid #000;
  border-bottom: 2px solid #000;
}

.in {
  font-size: 25px;
  font-family: Oswald;
  color: #ffffff;
  text-shadow: 0px 0px 6px #B2A786;
  margin-bottom: 5px;
  margin-top: 10px;
}

.tablekaduza {
  cellspacing: 10px;
  width: 540px;
}

.tabelkamala {
  width: 190px;
}

.td1duze {
  width: 195px;
  height: 320px;
}

.td2duze {
  width: 300px;
  height: 310px;
  padding: 2px;
  background-color: #CDC4A9;
  text-align: justify;
}

.tdmale {
  width: 180px;
  background-color: #ffffff;
  text-align: center;
  color: #363A50;
  padding: 0px 0px 0px 0px;
  font-family: Unica One;
  font-size: 14px;
  text-transform: uppercase;
  height: 30px;
  border-top: 2px solid #363A50;
  border-bottom: 2px solid #363A50;
}

.tabelamala {
  opacity: 0;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.tabelamala:hover {
  opacity: 0.95;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.pole {
  width: 290px;
  height: 130px;
  background-color: #fff;
  overflow: auto;
  padding: 2px 5px 2px 5px;
  font-size: 12px;
  text-align: justify;
  font-family: Calibri;
  color: #363A50;
}

.bio {
  text-align: right;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 2px;
  font-family: Unica One;
  margin-right: 4px;
  color: #616472;
}

.cc {
  text-align: left;
  text-transform: uppercase;
  font-size: 15px;
  font-family: Unica One;
  letter-spacing: 2px;
  margin-left: 4px;
  color: #616472;
  margin-top: 5px;
}