JSFiddle - React, Tailwind, and code Playground

by jontsk

HTML

<div style="width: 800px; height: 115px auto; margin: 0 auto; position: relative;">
<div style="height: 50px; text-align: left; margin: 0 0 0 5px; font-size: 25px;">
<p><strong>Ануб'арак</strong></p>
</div>
<div style="width: 800px; height: 75px; margin: 0 auto;">
<div style="width: 75px; height: 75px; border: 2px solid #484569;"><img style="border-right: 2px solid #484569;" src="http://media.heroesnexus.com/attachments/0/149/anubarak.png" alt="" width="75" height="75" /></div>
<div>
<div style="width: 714px; height: 400px; text-align: left; padding: 0 0 0 10px; margin: -79px 0 0 77px; border: 2px solid #484569;">
<div style="width: 714px; height: 20px; text-align: left; padding: 0 0 0 10px; margin: -10px 0 0 -10px;">
<p>Умения</p>
<div style="width: 77px; height: 2px; position: absolute; background: #484569; margin: -12px 0 0 0;">&nbsp;</div>
</div>
<div style="margin: 16px 0 0 0;">
<div><img style="border: 2px solid #484569;" src="http://media.heroesnexus.com/attachments/0/149/anubarak.png" alt="" width="35" height="35" /></div>
<div style="margin: -34px 0 0 42px;"><span style="border: 1px solid #2f2f48; color: #b2cdd6; background: #1B1B29; padding: 4px;">Regenerating Carapace</span></div>
<div style="float: right; border-bottom: 1px solid #2f2f48; margin: -38px 5px 0 0; width: 480px; height: 39px; font-size: 11px; text-align: left;">описание умения описание умения описание умения описание умения описание умения описание умения описание умения описание умения</div>
</div>
</div>
</div>
</div>
</div>