JSFiddle - React, Tailwind, and code Playground

by abernier

HTML

<script id="item" type="text/template">
    <li id="${id}">${id}</li>
</script>

<ul id="list"></ul>
<nav>
    <button rel="prev">&lt;</button>
    <button rel="next">&gt;</button>
</nav>

<form><fieldset>
    <legend>$('ul').trigger('insertItem', [])</legend>
    <ol>
        <li>
            items<abbr title="required">*</abbr>
            <input name="items">
        </li>
        <li>
            position
            <input name="position" value="end">
        </li>
        <li>
            <fieldset>
                <legend>origOrder</legend>
                <label>
                    <input name="origOrder" type="radio" value="auto" checked>
                    Auto
                </label>
                <label>
                    <input name="origOrder" type="radio" value="auto">
                    true
                </label>
                <label>
                    <input name="origOrder" type="radio" value="auto">
                    false
                </label>
            </fieldset>
        </li>
    </ol>
    <p>
        <button type="submit">insertItem</button>
    </p> 
</fieldset></form>
    
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js"></script>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<script src="https://raw.github.com/gist/1664946/jQuery.fn.carouFredSel-5.5.0.js"></script>
<script type="text/coffeescript">
do ->
  i = 0

  $('#list').html($('#item').tmpl(
    ({id: String.fromCharCode(97 + i++)} for [0..10])
  )).carouFredSel(
    auto: false
    prev: 'nav [rel=prev]'
    next: 'nav [rel=next]'
    items: 3
    circular: false
    infinite: false
  )
</script>

CSS

html, body {height:100%;}
html {display:table; width:100%;}
body {display:table-cell; text-align:center; vertical-align:middle;}

form {text-align:left; font-size:small; font-family:monospace; position:absolute; right:0; bottom:0; margin:.5em;}
form > fieldset {display:inline-block; padding:1em; background-color:rgba(0,0,0,.1); border:1px outset; border-radius:.5em;}
form p {margin-bottom:auto;}
form p [type="reset"] {float:right;}

#list {display:inline-block; list-style:none; white-space:nowrap; padding-left:0;}
#list li {display:inline-block; margin:.1em; font-size:3em; width:1em; height:1em;line-height:1em; color:#666; background-color:gainsboro; border:.1em solid #ccc;}

nav button.disabled {display:initial!important; opacity:.5;}