JSFiddle - React, Tailwind, and code Playground
HTML
<div class="fon"><img src="http://i.imgur.com/zdRfoba.png" width="275" height="110" alt="Фон">
<div class="photo"><img src="http://i.imgur.com/1LSW9ym.png" width="100" height="98" alt="Фото">
<div class="position"><img src="http://i.imgur.com/LJxt7Dn.png" width="4" height="18" alt="Позиция" >
<div class="shov"><img src="http://i.imgur.com/mqa6UHr.png" width="48" height="2" alt="Шов" > </div>
<div class="national"><img src="http://i.imgur.com/Bx85lkv.png" width="26" height="14" alt="Нация" ></div>
<div class="club"><img src="http://i.imgur.com/whlO4eU.png" width="40" height="40" alt="Клубешник" ></div>
<div class="karto4ka1">Ignasi</div>
<div class="karto4ka2">Miquel</div>
<div class="karto4ka3">CB</div>
<div class="karto4ka4">87</div>
</div>
</div></div>
CSS
.fon {
background-color: #666;
height: 110px;
width: 275px;
position: relative;
}
.photo {
height: 98px;
width: 100px;
position: absolute;
right: 180px;
top: 11px;
}
.position {
height: 14px;
width: 4px;
position: absolute;
right: -8px;
top: 64px;
}
.shov {
height: 2px;
width: 48px;
position: absolute;
right: -44px;
top: -20px;
}
.national {
height: 14px;
width: 26px;
position: absolute;
right: -64px;
top: 0px;
}
.club {
height: 40px;
width: 40px;
position: absolute;
right: -166px;
top: -11px;
}
.karto4ka1 {
position : absolute;
top : -59px;
right : -8;
width : 100%;
font-family: "play";
font-size: 19px;
}
.karto4ka2 {
position : absolute;
top : -39px;
right : -8;
width : 100%;
font-family: "play";
font-size: 21px;
}
.karto4ka3 {
position : absolute;
top : 2px;
right : -7px;
width : 100%;
font-family: "play";
font-size: 20px;
}
.karto4ka4 {
position : absolute;
top : -64px;
right : -136px;
width : 100%;
font-family: "play";
font-size: 30px;
}