JSFiddle - React, Tailwind, and code Playground

by chucknelson

HTML

<div id="main-container">
    <p class="title">List of Items with SPAN Tags</p>
    <ul id="my-list">
        <li><span>Item 1</span></li>
        <li><span>Item 2</span></li>
        <li><span>Item 3</span></li>
        <li><span>Item 4 is a really long item because you never know when you'll have to paste some crazy thing from a website and then you just need to deal with it! The list item should expand to handle this.</span></li>
        <li><span>Item 5</span></li>
    </ul>
</div>

CSS

#main-container {
    width: 100%;
}

p {
    margin: 0;
}

p.title {
    background-color: #eee;
}

ul {
    margin: 0;
    padding-left: 0;
    list-style-type: none;
}

li {
    min-height: 3em;
    border-bottom: 1px solid #ccc;
    cursor: pointer;
}

li span {
    display: inline-block;
}

li span {
    -webkit-transition: inherit;
    padding: 1em 0;
    /*text-align: center;*/
}

li:first-child {
    border-top: 1px solid #ccc;
}

li:first-child {
    border-top: 1px solid #ccc;
}

.animated {
    -webkit-transition: all 0.3s linear;
}

.flipped {
    -webkit-transform: rotateX(180deg);
    border-top: 1px solid #ccc;
    min-height: 1.5em;
    background-color: #555;
}

.flipped span {
    -webkit-transition: inherit;
    -webkit-transform: scaleX(0.8) scaleY(-0.8);
    padding: 0;
    color: #eee;
}

.flipped:not(:first-child) {
    border-bottom: none;   
}

.complete * {
    text-decoration: line-through;
}

JavaScript

//List with sorting and flip animations
$(function() {
    $('ul').on('click', 'li', function(event) {
        $(this).addClass('animated');
        $(this).toggleClass('flipped');
        $(this).toggleClass('complete');
    });
    
    $('ul').on('webkitTransitionEnd', 'li', function(event) {
        $(this).removeClass('animated');
    });
    
    $('ul').sortable({
        start: function(event, ui) {
        },        
        stop: function(event, ui) {
        },
        update: function(event, ui) {
        }
    });
});