JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="r">Reset</a>
<div id="z">
    <a href="#">Button 1</a>
    <a href="#">Button 2</a>
    <a href="#">Button 3</a>
    <a href="#">Button 4</a>
    <a href="#">Button 5</a>
    <a href="#">Button 6</a>
    <a href="#">Button 7</a>
    <a href="#">Button 8</a>
    <a href="#">Button 9</a>
</div>

CSS

#z {
    background: #8ac;
    border-radius: 10px;
    overflow: hidden;
    padding: 10px;
    width: 300px;
    position: absolute; left: 150px; top: 150px;
    transform: scale(1.1);
    -o-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transition: 0.6s ease-in;
    -o-transition: 0.6s ease-in;
    -moz-transition: 0.6s ease-in;
    -webkit-transition: 0.6s ease-in;
    -webkit-backface-visibility: hidden;
}

#z.dock {
    left: -70px; top: -10px;
    transform: scale(0.5);
    -o-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transition: 1s ease-out;
    -o-transition: 1s ease-out;
    -moz-transition: 1s ease-out;
    -webkit-transition: 1s ease-out;
    -webkit-backface-visibility: hidden;
}

#z a {
    background: #fff;
    border: 1px solid #ace;
    border-radius: 10px;
    display: block;
    float: left;
    white-space: nowrap;
    margin:10px 10px 0 0; padding:10px;
    width: 65px;
}

JavaScript

$('#z a').click(function(e){
    e.preventDefault();
    $('#z').addClass('dock');
});
$('#r').click(function(e){
    e.preventDefault();
    $('#z').removeClass('dock');
});