JSFiddle - React, Tailwind, and code Playground

by seevis

HTML

<link href="https://fonts.googleapis.com/css2?family=Arapey:ital@0;1&display=swap" rel="stylesheet">
<div class="tcbloc"><img src="https://i.imgur.com/Iukx56K.png"/><span class="tcnom">([color=#ff33cc]BLAIR HEYWOOD[/color]) ; lien 1.</span> Nefilim. Bystra, szybko się uczy i cieszy się specjalną łaską Razjela. Matka dwójki dzieci: Noah (7) i Sarah (1). Mężatka; z zawodu lingwistka i tłumaczka. Nie lubi brokułów. Ciepła, pogodna i miła osoba.  </div>

CSS

.tcbloc {
  width: 140px;
  font-size: 0px;
  text-align: justify;
  line-height: 11px;
  height: 210px;
  overflow: auto;
  padding: 6px;
}

.tcbloc:hover {
  transition-property: font-size;
  transition-duration: 2s;
  font-size: 10px;
}

.tcbloc img {
  width: 120px;
  border-radius: 20px;
  float: left;
  padding: 5px;
  border: 1px solid;
}

.tcbloc:hover img {
  transition-property: width, border;
  transition-duration: 2s;
  width: 30px;
  border: none;
}

.tcnom {
  font-weight: bold;
  font-style: italic;
  font-family: times;
}