JSFiddle - React, Tailwind, and code Playground

by meridius

HTML

<div class="tovarna">
    <div class="druhy">
        <div class="druhy_inner">
            <div class="prev">
                <input type="button" value="&lt;" name="prev">
            </div>
            <div class="druh">
                <div class="figurka_typ sprites-sachy sprite-BKing"></div>
            </div>
            <div class="next">
                <input type="button" value="&gt;" name="next">
            </div>
        </div>
    </div>
    <div class="barvy">
        <div class="bila"></div>
        <div class="seda"></div>
        <div class="cerna"></div>
    </div>
    <div class="tlacitko">
        <input type="button" value="Vytvořit" name="vytvorit">
    </div>
</div>

CSS

.tovarna {
	position:absolute;
	top:0;
	right:0;
	border:1px solid black;
	padding:1em;
	margin:0.5em;
	background:#E9E9E9;
}
.tovarna input {
	margin-left:auto;
}
.tovarna > div:not(:last-child) {
	margin-bottom:1em;
}
.tovarna .ozdoby {
	clear:both;
	width:100%;
}

.tovarna .druhy {
	position:relative;
	border:1px solid black;
	overflow-x:hidden;
	height:125px;	/* height of the highest figure + reasonable span */
	width:100%;
}
.tovarna .druhy_inner {
	width:125px;	/* width of the widest figure + width of prev and next buttons + reasonable span */
}

.tovarna .druhy .druh {
	bottom:0;
	left:50%;
	position:absolute;
}
.tovarna .druhy .druh .figurka_typ {
	margin-left:-50%;
	z-index:1;	/* to not to cover prev button */
}

.tovarna .druhy .prev,
.tovarna .druhy .next {
	position:absolute;
	z-index:2;
}
.tovarna .druhy .prev input,
.tovarna .druhy .next input {
	margin-top:-50%;
}
.tovarna .druhy .prev {
	left:0;
	top:50%;
}
.tovarna .druhy .next {
	right:0;
	top:50%;
}



.tovarna .barvy {
	width:100%;
	height:2.5em;
	border:1px solid black;
	position:relative;
}
.tovarna .barvy > div {
	height:100%;
	position:absolute;
	top:0;
	width:50%;
}
.tovarna .barvy .bila {
	background:white;
}
.tovarna .barvy .seda {
	background:gray;
	width:33.33%;
	left:33.33%;
	z-index:2;
}
.tovarna .barvy .cerna {
	background:black;
	right:0;
}









.sprites-sachy { background: url(http://i.imgur.com/6pdQ8xi.png) no-repeat top left; }
.sprite-BBishop{ background-position: 0 0; width: 44px; height: 90px; } 
.sprite-BKing{ background-position: 0 -95px; width: 44px; height: 118px; } 
.sprite-BKnight{ background-position: 0 -218px; width: 44px; height: 61px; } 
.sprite-BPawn{ background-position: 0 -284px; width: 55px; height: 76px; } 
.sprite-BQueen{ background-position: 0 -365px; width: 44px; height: 98px; } 
.sprite-BRook{ background-position: 0 -468px; width: 55px; height: 80px; } 
.sprite-GBishop{ background-position: 0 -553px; width: 44px; height: 90px; } 
.sprite-GKing{...