JSFiddle - React, Tailwind, and code Playground

by meridius

HTML

<div class="desk">
	<div class="figure">        
        <div class="type sprites-sachy sprite-WKing"></div>
        <div class="special sprites-sachy sprite-halo"></div>
    </div>
</div>


<!-- RULES / GOALS
    The .desk class has to remain absolutely positioned.
    The .type has to be rendered infront of .special
    Both .type and .special has to be horizontally centered with .desk
    Top edges of .type and .special has to be aligned and horozontally centerred.
    Bottom edge of .type has to be on bottom edge of .desk
    I don't care how many INNER divs will be added to the div.desk to make it work.
-->

CSS

.desk { /* this class must not be touched */
    position: absolute; 
    top: 129px; 
    left: 202px;    
    border: 1px solid #FF0000; 
    width: 65px;    
    height: 65px;
    padding: 0;
    float: left;
}
.figure {
    bottom: 0;
    left: 50%;
    position: absolute;
}
.type {
    margin-left:-50%;
    z-index:2;
}
.special {
    position: absolute;
    top: 0;
    transform: translate(-50%, 0);
    border: 1px solid #008000;
    z-index: -1;
}





.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{ background-position: 0 -648px; width: 44px; height: 118px; } 
.sprite-GKnight{ background-position: 0 -771px; width: 44px; height: 61px; } 
.sprite-GPawn{ background-position: 0 -837px; width: 44px; height: 61px; } 
.sprite-GQueen{ background-position: 0 -903px; width: 44px; height: 98px; } 
.sprite-GRook{ background-position: 0 -1006px; width: 44px; height: 64px; } 
.sprite-WBishop{ background-position: 0 -1075px; width: 44px; height: 90px; } 
.sprite-WKing{ background-position: 0 -1170px; width: 44px; height: 118px; } 
.sprite-WKnight{ background-position: 0 -1293px; width: 44px; height: 61px; } 
.sprite-WPawn{ background-position: 0 -1359px; width: 55px; height: 76px; } 
.sprite-WQueen{ background-position: 0 -1440px; width: 44px; height: 98px; } 
.sprite-WRook{ background-position: 0 -1543px; width: 55px; height: 80px; } 
.sprite-halo{ background-position: 0 -1700px; width: 78px;...

JavaScript

$(".desk").draggable();