JSFiddle - React, Tailwind, and code Playground

by sqren

HTML

<div class="box-content">
    <div class="active" id="target">
        <a href="#" class="level-1">Alle</a>
        <a href="#" class="level-2">Tøj &amp; Mode</a>
    </div>
    <div class="children level-2">
        <a href="#">Mænd</a>
        <a href="#" id="element">Kvinder</a>
    </div>
</div>

CSS

.box-content {
overflow: hidden;
padding: 15px;
}

.box-content .active a {
    display: block;
    text-align: center;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    padding: 7px 10px;
    color: white;
    cursor: pointer;
    background-color: white;
    border: 1px solid #D4D4D4;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, white), color-stop(100%, #F3F3F3));
    background-image: -webkit-linear-gradient(top, white 0%, #F3F3F3 100%);
    background-image: -moz-linear-gradient(top, white 0%, #F3F3F3 100%);
    background-image: -o-linear-gradient(top, white 0%, #F3F3F3 100%);
    background-image: linear-gradient(top, white 0%, #F3F3F3 100%);
    color: black;
    text-decoration: none;
    text-align: left;
    margin-bottom: 5px;
    color: gray;
}
 .box-content .children a {
    text-align: left;
    display: block;
    text-transform: capitalize;
    padding: 4px 0 4px 0;
    color: black;
    text-indent: 20px;
}

JavaScript

// get position
var original_position = $('element').getPosition();
    
// inject into target
var clone_element = $('element').clone();
clone_element.inject(target, 'bottom').setStyle('opacity', '0');

// animate move
$('element').set('move', {
    relativeTo: clone_element,
    position: 'upperleft',
    edge: 'upperLeft'
});

$('element').get('move').start().chain(function(){
    $('element').destroy();
    clone_element.fade('in');
});