JSFiddle - React, Tailwind, and code Playground

by webspicer

HTML

<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<div data-role="page">
    
    <div role="main" class="ui-content">
        <ul data-role="listview">
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
            <li>Item 5</li>
        </ul>
    </div>
	
</div>

CSS

/*! jQuery Mobile 1.4.2 | Git HEAD hash: 9d9a42a <> 2014-02-28T17:32:01Z | (c) 2010, 2014 jQuery Foundation, Inc. | jquery.org/license...

JavaScript

$.fn.extend
({
    createBtn: function() 
	{
        var elmWidth = $("li", $(this)).width(),
            listType = $(this).listview("option", "inset") ? true : false,
            btnWidth = elmWidth < 300 && listType ? "35%" : elmWidth > 300 && !listType ? "25%" : "20%";
			
        $("li", $(this)).each(function() 
		{
            var text = $(this).html();
			
            $(this).html
			(
				$("<div/>", 
				{
					class: "wrapper"
				}).append($("<div/>", 
				{
					class: "item"
				}).text(text)).append($("<div/>", 
				{
					class: "del"
				}).text("Delete").width(btnWidth)).css
				({
					left: "0%"
				}).on("swipeleft vclick tap", function(e) 
				{
					$(this).revealBtn(e, btnWidth);
				}) 
			);
        });
    },
    revealBtn: function(e, x) 
	{
        var check = this.check(x), swipe = e.type;
		
        if (check == "closed") 
		{
            swipe == "swipeleft" ? this.open(e, x, "right") : setTimeout(function() 
			{
                this.revertback(e);
            }, 0);
            e.stopImmediatePropagation();
        }
		
        if (check == "right" || check == "left") 
		{
            swipe == "swipeleft" ? this.open(e, x, "right") : setTimeout(function() 
			{
                this.revertback(e);
            }, 0);
            e.stopImmediatePropagation();
        }
		
        if (check !== "closed" && e.isImmediatePropagationStopped() && (swipe == "vclick" || swipe == "tap")) 
		{
            this.revertback(e);
        }
    },
    revertback: function (e) 
	{
        var check = this.check();
        this.css
		({
            transform: "translateX(0)"
        });
		
		$(this).find('.item').css("padding-left", "1%");
		
    },
    open: function (e, x, dir) 
	{
        var posX = dir == "left" ? x : "-" + x;
		
        $(this).css
		({
            transform: "translateX(" + posX + ")"
        });
			
		$(this).find('.item').css("padding-left", "21%");
		 
    },
    check: function (x) 
	{
        var matrix =...