JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<button>Play the game</button>
<div class="shells">
    <div class="shell has-pea" data-position="position-a"></div>
    <div class="shell" data-position="position-b"></div>
    <div class="shell" data-position="position-c"></div>
</div>

CSS

* {
    position: relative;
}

body {
    margin: 100px 50px;
    background: #eee;
}

.shells {
    margin-top: 50px;
}

.shell {
    position: absolute;
    width: 50px;
    height: 50px;
    background: brown;
    border-radius: 25px;
    cursor: pointer;
    -webkit-transition: left 1s;
}

.shell[data-position='position-a'] {
    left: 0;
}

.shell[data-position='position-b'] {
    left: 50%;
    margin-left: -25px;
}

.shell[data-position='position-c'] {
    left: 100%;
    margin-left: -25px;
}

.shell.has-pea::before {
    display: none;
    content: '';
    width: 25px;
    height: 25px;
    border-radius: 18px;
    background: green;
    position :absolute;
    left: 50%;
    top: 50%;
    margin: -13px;
}

.shell.has-pea.reveal::before {
    display: block;
}

JavaScript

// Create 3 ciruclar shell html elements
// set css transitions on them
// apply a class of position-a, b, c
// transform to different positions
// in one shell include a pea child element
// add a eventlistener on each shell to reveal the pea
// apply a class of reveal to the element clicked
// .reveal transforms the shell to reveal the pea if it exists

$('.shell').on('click', function() {
    $(this).toggleClass('reveal');
    $('.shell').not($(this)).removeClass('reveal');
});

// create button element to rotate shells
// randomly set position classes on elements

$('button').on('click', function() {
    playGame();
});

function playGame() {
    var i;
    for (i=0; i<5; i++) {
        setTimeout(function() {
            changePositions();
        }, 300);
    }
}

// create array of positions
// shuffle array
// assign positions to each shell element

function changePositions() {
    var positions = _.shuffle(['position-a', 'position-b', 'position-c']);
    $('.shell').each(function(i) {
        $(this).attr('data-position', positions[i]);
    });
}