JSFiddle - React, Tailwind, and code Playground

by velthune

HTML

<div id='container'>
    <div id='team' name=''>
        <ul class='goalkeeper-list'>
            <li>Bjo</li>
        </ul>
        <ul class='defender-list'>
            <li>Smc</li>
            <li>Matt</li>
            <li>Cella</li>
        </ul>
        <ul class='midfielder-list'>
            <li>Manuel</li>
            <li>Michela</li>
            <li>Ciro</li>
            <li>Diego</li>
        </ul>
        <ul class='striker-list'>
            <li>Gila</li>
            <li>Max</li>
            <li>Michietto</li>
        </ul>
    </div>
    <div id='soccer-field'>
        <img src='http://upload.wikimedia.org/wikipedia/commons/5/59/Soccer.Field_Transparant.png' />
        <div id='team-modules'>
            <div id='m3-4-3' class='module'>
                <div id='goalkeeper' class='module-player'>Bjo</div>
                <div id='defender0' class='module-player'>Smc</div>
                <div id='defender1' class='module-player'>Matt</div>
                <div id='defender2' class='module-player'>Cella</div>
                <div id='midfielder0' class='module-player'>Dgo</div>
                <div id='midfielder1' class='module-player'>Gila</div>
                <div id='midfielder2' class='module-player'>Manuel</div>
                <div id='midfielder3' class='module-player'>Ciro</div>
                <div id='striker0' class='module-player'>Michela</div>
                <div id='striker1' class='module-player'>Michietto</div>
                <div id='striker2' class='module-player'>Max</div>
            </div>
            <div id='module m4-3-3' class='module'></div>
        </div>
    </div>
</div>

CSS

ul {
    margin: 16px;
    border-radius: 6px;
    width: 100%;
}
li {
}
ul li {
    list-style: none;
    margin: 0px;
}
.goalkeeper-list {
    background-color: rgba(1, 1, 123, 0.3);
}
.defender-list {
    background-color: rgba(67, 130, 241, 0.62)
}
.midfielder-list {
    background-color: rgba(247, 240, 83, 0.63)
}
.striker-list {
    background-color: rgba(241, 67, 88, 0.62)
}
#team {
    margin: 100px;
    float: left;
}
#soccer-field {
}
.module {
    display: none;
}
#m3-4-3 {
    display: inline;
}
.module-player {
    position: absolute;
    background-color: rgba(1, 1, 1, 0.3);
    padding: 2px;
    color: white;
    border-radius: 4px;
    top: 2000px;
}
#m3-4-3 #goalkeeper {
    left: 507px;
    top: 40px;
}
#m3-4-3 #defender0 {
    left: 372px;
    top: 120px;
}
#m3-4-3 #defender1 {
    left: 507px;
    top: 100px;
}
#m3-4-3 #defender2 {
    left: 624px;
    top: 120px;
}
#m3-4-3 #midfielder0 {
    left: 365px;
    top: 230px;
}
#m3-4-3 #midfielder1 {
    left: 449px;
    top: 210px;
}
#m3-4-3 #midfielder2 {
    left: 535px;
    top: 210px;
}
#m3-4-3 #midfielder3 {
    left: 624px;
    top: 230px;
}
#m3-4-3 #striker0 {
    left: 400px;
    top: 390px;
}
#m3-4-3 #striker1 {
    left: 489px;
    top: 400px;
}
#m3-4-3 #striker2 {
    left: 584px;
    top: 390px;
}

JavaScript

$('.module-player').each(function () {
    var $target = $(this);
    var pos = $target.position();
    var left = Math.floor((Math.random() * 1000) + 1);
    var delay = Math.floor((Math.random() * 1000) + 1);
    $target.css({
        left: left,
        top: "1400px"
    });
    setTimeout(function () {
        $target.animate({
            left: pos.left,
            top: pos.top
        }, 500);
    }, delay);
});