JSFiddle - React, Tailwind, and code Playground

by tnajdek

HTML

<div class="ninja ninja-shuriken"></div>
<div class="ninja ninja-nunchaku"></div>
<div class="ninja ninja-dagger"></div>
<div class="ninja ninja-kick"></div>
<div class="ninja ninja-quarterstaff"></div>

CSS

.ninja {
        width:228px;
        height:237px;
        background-repeat: no-repeat;
        background-position: center center;
        background-size:100%;
        float:left;
    }
    .ninja-shuriken {
        background-image: url('http://doppnet.com/wp-content/uploads/2012/09/ninjas_sprites.svg#ninja-shuriken');
    }

    .ninja-nunchaku {
        background-image: url('http://doppnet.com/wp-content/uploads/2012/09/ninjas_sprites.svg#ninja-nunchaku');
    }

    .ninja-dagger {
        background-image: url('http://doppnet.com/wp-content/uploads/2012/09/ninjas_sprites.svg#ninja-dagger');
    }

    .ninja-quarterstaff {
        background-image: url('http://doppnet.com/wp-content/uploads/2012/09/ninjas_sprites.svg#ninja-quarterstaff');
    }

    .ninja-kick {
        background-image: url('http://doppnet.com/wp-content/uploads/2012/09/ninjas_sprites.svg#ninja-kick');
    }