JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="list">
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <li>six</li>
    <li>seven</li>
    <li>eight</li>
    <li>nine</li>
    <li>ten</li>
</ul>

CSS

html, body {
    font-family: font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.list {
    position: absolute;
    left: 80px;
    top: 100px;
}

.list li {
    text-transform: uppercase;
    border-bottom: 1px dashed #666;
    background: #2b2b2b;
    font-size: 10px;
    padding: 10px;
    width: 200px;
    color: #fff;
}

.list span {
    display: block;
}

@-webkit-keyframes unfold {
    0% { -webkit-transform: rotateX(180deg); }
    50% { -webkit-transform: rotateX(-30deg); }
    100% { -webkit-transform: rotateX(0deg); }
}

@-webkit-keyframes swing {
    0% { -webkit-transform: perspective(1200) rotateY(30deg) rotateX(0deg); }
    30% { -webkit-transform: perspective(1200) rotateY(30deg) rotateX(-30deg); }
    60% { -webkit-transform: perspective(1200) rotateY(30deg) rotateX(15deg); }
    100% { -webkit-transform: perspective(1200) rotateY(30deg) rotateX(0deg); }
}

JavaScript

var speed = 0.8;
var overlap = 0.6;

var $container = $( '.list' );
var $items = $container.find( 'li' );

$container.css(prefix({
    'transform-style': 'preserve-3d',
    'transform-origin': '50% 0%',
    'transform': 'perspective(1000) rotateY(30deg)',
    'animation': 'swing ' + ($items.length * speed * (1 - overlap) * 1.6) + 's ease-in-out 1 normal forwards'
}));

// create slices
var $parent = $('<span/>');
$container.append( $parent );

for ( var i = 0; i < $items.length; i++ ) {
    
    $child = $('<span/>');
    $child.append( $items[i] );
    $parent.append( $child );
    $parent = $child;
}

$containers = $container.find( 'span' );

function unfold() {
    
    $containers.each(function( index, el ) {
    
        var $item = $(this);
        var offset = index - 2;
        
        if ( index > 1 ) {
            
            $item.css( 'z-index', index ); // necessary?
        
            $item.css( prefix({
                'backface-visibility': 'visible',
                'transform-style': 'preserve-3d',
                'transform-origin': '50% 0%',
                'transform': 'perspective(1000) rotateX(180deg)',
                'animation': 'unfold ' + speed + 's ease-out ' + (offset * speed * (1 - overlap)) + 's 1 normal forwards'
            }) );
        }
        
    });
}

// CSS3 vendor prefix helper
function prefix( obj ) {

    var key, val;

    for ( key in obj ) {

        val = obj[ key ];

        obj[ '-webkit-' + key ] = val;
        obj[ '-moz-' + key ] = val;
        obj[ '-ms-' + key ] = val;
        obj[ '-o-' + key ] = val;
    }

    return obj;
}

// start
unfold();