JSFiddle - React, Tailwind, and code Playground

HTML

<div id="www">
    <div id="monster2">
        <img title="Łasuch" class="avatar" src="images/avatars/0/28.png" />
        <div style="background-image: url('images/cards/back004.gif') ;">17</div>
    </div>
    <div id="monster1">
        <img title="Gargamel" class="avatar" src="images/avatars/0/16.png" />
        <div style="background-image: url('images/cards/back012.gif') ;">17</div>
    </div>
    <div id="kupka">
        <img src="images/cards/2d.gif" />
        <label>Zagraj uczciwie</label>
        <input type="radio" name="act" value="1" />
        <label>Kantuj</label>
        <input type="radio" name="act" value="2" />
        <label>Sprawdź</label>
        <input type="radio" name="act" value="3" />
    </div>
    <div id="monster3">
        <img title="Tomaszek" class="avatar" src="images/avatars/0/18.png" />
        <div style="background-image: url('images/cards/back008.gif') ;">15</div>
    </div>
    <div id="player">
        <img src="images/cards/11s.gif" />
        <img src="images/cards/12d.gif" />
        <img src="images/cards/5c.gif" />
        <img src="images/cards/10h.gif" />
        <img src="images/cards/2c.gif" />
        <img src="images/cards/1s.gif" />
        <img src="images/cards/3h.gif" />
        <img src="images/cards/4s.gif" />
        <img src="images/cards/9h.gif" />
        <img src="images/cards/c2s.gif" />
        <img src="images/cards/12s.gif" />
        <img src="images/cards/gd.gif" />
        <img src="images/cards/4s.gif" />
        <img src="images/cards/13s.gif" />
        <img src="images/cards/8s.gif" />
        <img src="images/cards/5s.gif" />
        <img src="images/cards/7c.gif" />
    </div>
</div>
<div id="dialog" title="Wybierz kartę, która zostanie położona oficjalnie">
    <p>
        <img class="wybor" src="images/cards/1c.gif" value="1"></img>
        <img class="wybor" src="images/cards/2d.gif" value="2"></img>
        <img class="wybor" src="images/cards/3h.gif" value="3"></img>
        <img...

CSS

body {
    background: url('bg1.png');
    text-align: center;
    height:100%;
    padding:0;
    margin:0;
}
div #www {
    width: 100%;
    height: 100%;
    background: red;
}
div #monster1 {
    background: green;
    width: 100px;
    float: left;
    overflow: hidden;
    position: relative;
    background-color: #ccc;
}
div #monster2 {
    float: left;
    background: red;
    height: 100px;
    width: 100%;
}
div #monster3 {
    background: orange;
    float: right;
    width: 100px;
}
div #kupka {
    height: calc(100% - 100px);
    float: left;
    width: calc(100% - 200px);
    background: blue;
}
div #player {
    clear: both;
    background: green;
}
/* images */
 img .avatar {
    border: 1px solid #DDD;
    padding: 8px;
    background-color: #FFF;
}
img.float-right {
    margin: 5px 0px 5px 15px;
}
img.float-left {
    margin: 5px 15px 5px 0px;
}
code {
    margin: 5px 0;
    padding: 10px;
    text-align: left;
    display: block;
    overflow: auto;
    font: 500 1em/1.5em'Lucida Console', 'courier new', monospace;
    /* white-space: pre; */
    background: #FAFAFA;
    border: 1px solid #eee;
}