JSFiddle - React, Tailwind, and code Playground
by jontsk
HTML
<div style="width: 800px; height: 125px; 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; border: 2px solid #484569;">
<div style="width: 75px; height: 75px;"><img style="border-right: 2px solid #484569;" src="http://media.heroesnexus.com/attachments/0/149/anubarak.png" alt="" width="75" height="75" /></div>
<div style="width: 714px; height: 20px; text-align: left; padding: 0 0 0 10px; margin: -85px 0 0 75px;">
<div>
<p>Не добавленные умения</p>
<div style="width: 177px; height: 2px; position: absolute; background: #484569; margin: -12px 0 0 0;"> </div>
</div>
</div>
<div style="margin: 20px 0 0 55px;">
<ul>
<li style="margin-bottom: 10px; margin-top: 4px; color: #b2cdd6; list-style-type: none;"><span style="border: 1px solid #2f2f48; background: #1B1B29; padding: 4px;">Impale</span> <span style="border: 1px solid #2f2f48; background: #1B1B29; padding: 4px;">Burrow-Charge</span> <span style="border: 1px solid #2f2f48; background: #1B1B29; padding: 4px;">Spawn Beetles</span> <span style="border: 1px solid #2f2f48; background: #1B1B29; padding: 4px;">Carrion Swarm</span> <span style="border: 1px solid #2f2f48; background: #1B1B29; padding: 4px;">Protrusion</span> <span style="border: 1px solid #2f2f48; background: #1B1B29; padding: 4px;">Regenerating Carapace</span></li>
</ul>
</div>
</div>
</div>