JSFiddle - React, Tailwind, and code Playground

by Yann Brelière

HTML

<div>
    <ul id="paas_tabs" class="tabs navigation">
        <li class="current"> <a href="?type=phpmysql">PHP</a>

        </li>
        <li> <a href="?type=phppgsql">Node.js</a>

        </li>
        <li> <a href="?type=nodejspgsql">Python</a>

        </li>
    </ul>
</div>
<div>
    <ul id="paas_tabs2" class="tabs navigation">
        <li class="current"> <a href="?type=phpmysql">MySQL</a>

        </li>
        <li> <a href="?type=phppgsql">PgSQL</a>

        </li>
        <li> <a href="?type=nodejspgsql">MongoDB</a>

        </li>
    </ul>
</div>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg-line" version="1.1">
    <path style="fill:none;stroke:#e2e2e2;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 0,0 v0 h0 v0" id="path-line" />
</svg>

SCSS

#svg-line {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    width: 600px;
}


ol, ul {
    list-style: none outside none;
}
ul.tabs, dl.tabs {
    display: inline-block;
    vertical-align: top;
    font-size: 0px;
    float: none;
    margin: 0px;
    margin-top: 20px;
}
ul.tabs > li, dl.tabs > dt {
    display: inline-block;
    vertical-align: top;
    font-size: 1.3rem;
    margin-left: 0px;
    padding-bottom: 7px;
    line-height: 25px;
    text-align: center;
    list-style-type: none;
}
ul.tabs > li.current {
    background: pink;
}
ul.tabs > li a {
    color: rgb(255, 255, 255);
    background-color: rgb(51, 51, 51);
}
ul.tabs > li a, dl.tabs > dt a {
    transition-property: background-color, color;
    transition-duration: 0.25s;
    display: block;
    color: rgb(0, 0, 0);
    background-color: rgb(234, 235, 232);
    background-repeat: no-repeat;
    outline: medium none rgb(0, 0, 0);
    padding: 4px 8px;
    text-decoration: none;
    height: 25px;
    width: 90px;
}
ul.tabs > li > *, dl.tabs > dt > * {
    line-height: 25px;
}
ul.tabs > li.current a, ul.tabs > li a:active:hover {
    background-color: rgb(226, 226, 226);
    color: rgb(0, 0, 0);
}

JavaScript

$(document).on('click', '.tabs li a', function(e) {
    e.preventDefault();
    
    
    // select clicked tab
    
    $(this).parents('li').addClass('current')
        .siblings('li').removeClass('current');
    
    
    // draw the line
    
    var $start = $('#paas_tabs li.current');
    var $stop = $('#paas_tabs2 li.current');
    var pos = $start.offset();
    var height = $start.height();
    var width = $start.width();
    var left = $('#paas_tabs').position().left;
    var start = {
        'left': pos.left + width / 2,
        'top': pos.top + height
    };
    var $path = $('#path-line');
    var ml = start.left;
    var v = ($stop.position().top - start.top) / 2;
    var h = $stop.position().left - pos.left;
    var newD = 'm ' + ml + ',0 v ' + v + ' h ' + h + ' v ' + v;
    //console.log(pos.left);
    //console.log(start);
    //console.log(v);
    //console.log(h);
    //console.log(left);
    //console.log(start.top);
    //console.log(newD);
    $('#svg-line').css({
        'left': left,
        'top': start.top
    });
    //$path.attr('d', newD);
    
    
    // animate the awesome!
    // http://jakearchibald.com/2013/animated-line-drawing-svg/
    animate({'rewind': true});
    
    $path.attr('d', newD);
    
    //animate({'rewind': false});
    
    function animate() {
        var path = $path.get(0);
        var length = path.getTotalLength();
        console.log(length);
        // Clear any previous transition
        path.style.transition = path.style.WebkitTransition = 'none';
        // Set up the starting positions
        var animateLength = length - v;
        path.style.strokeDasharray = animateLength + ' ' + animateLength;
        console.log(path.style.strokeDasharray);
        path.style.strokeDashoffset = length;
        // Trigger a layout so styles are calculated & the browser
        // picks up the starting position before animating
        path.getBoundingClientRect();
        // Define our transition
       ...