JSFiddle - React, Tailwind, and code Playground

by nicocube

HTML

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Dice Project proto</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
        <script>
            $(function() {$.mobile.showPageLoadingMsg()})
            $(document).on("pageinit",function() {})
            $(document).on("pageinit","#tapis", function () {
                var $rollzone=$('#rollzone');
                var $content = $('#tapis-content');
                var width=$(this).css('width');
                $rollzone.css('height',$(this).css('height'));
                $rollzone.css('width',width);
                $(document).on('devicemotion','#rollzone *',function() {
                    $(this).animate({
                        left: '+='+width-$(this).css('width'),
                    },5000)
                })
                $.mobile.hidePageLoadingMsg ()
            })
            $(document).on("pageinit","#popup", function () {
                $('#dice').on('click','img',function() {
                    $('#rollzone').append($(this).clone())
                })   
            })
        </script>
</head> 
<body> 

<div data-role="page" id="tapis">

    <div data-role="header" id="tapis-header">
        <h1>Dice</h1>
    </div>

    <div data-role="content" id="tapis-content">    
        <a href="#popup" data-role="button" data-rel="dialog" data-transition="pop">+</a>

        <div id="rollzone">
        
        </div>
    </div>

    <div data-role="footer" id="tapis-header">
        <h1>Ad goes here</h1>
    </div>
</div>

<div data-role="page" id="popup">

    <div data-role="header" data-theme="e">
        <h1>Bag</h1>
    </div><!-- /header -->

    <div data-role="content"...