JSFiddle - React, Tailwind, and code Playground

by Viruthagiri

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<html>
 <head>
     </head>
<form action="#"
enctype="multipart/form-data" method="post">
<p>
Image:<br>
<input type="file" name="image" class="imagefile" size="40">
</p>
<p>
Image Description:<br>
<textarea rows="10" name="description" id="desc" class="description"></textarea>
</p>
<p>
Disabled:<br>
<input type="text" name="disabled" class="disabled" size="30">
</p>
<div>
<input type="submit" class="btn btn-large" value="Submit">
</div>
</form>
    <div id="counter"></div>
    <div class="blankspace"/>
    <div id="counter2"></div>

  </html>

CSS

form {
margin:30px;
}
ul.cd{float:left;list-style-type:none;margin:0;padding:0}
li.t{background:url(file:///C:/Users/GIRIDHARAN/Downloads/jquery-flipcounter-master/jquery-flipcounter-master/img/digits-top.png) 0 0 no-repeat;width:53px;height:39px}
li.b{background:url(file:///C:/Users/GIRIDHARAN/Downloads/jquery-flipcounter-master/jquery-flipcounter-master/img/digits-bottom.png) 0 0 no-repeat;width:53px;height:64px}
li.s{background:url(file:///C:/Users/GIRIDHARAN/Downloads/jquery-flipcounter-master/jquery-flipcounter-master/img/comma.png) 2px 75px no-repeat;width:12px;height:100px}

JavaScript

/*! jQuery.counter.js (jQuery Character and Word Counter plugin)
 v2.2 (c) Wilkins Fernandez
 MIT License
 */
(function($) {
    $.fn.extend({
        counter : function(options) {
            var defaults = {
                type : 'char', // {char || word}
                count : 'down', // count {up || down} from or to the goal number
                goal : 140, // count {to || from} this number
                text : true, // Show description of counter, 
                translation: '',
                msg : ''
            }, $countObj = '', countIndex = '', noLimit = false,
            // Pass {} as first argument to preserve defaults/options for comparision
            options = $.extend({}, defaults, options), methods = {
                /* Adds the counter to the page and binds counter to user input fields */
                init : function($obj) {
                    var objID = $obj.attr('id'), counterID = objID + '_count';

                    // Check if unlimited typing is enabled
                    methods.isLimitless();

                    // Insert counter after text area/box
                    $('<div/>').attr('id', objID + '_counter').html("<span id=" + counterID + "/> " + methods.setMsg()).insertAfter($obj);
                    // Set $countObj jQuery object
                    $countObj = $('#' + counterID);

                    // Bind methods to events
                    methods.bind($obj);
                },
                // Bind everything!
                bind : function($obj) {
                    $obj.bind("keypress.counter keydown.counter keyup.counter blur.counter focus.counter change.counter paste.counter", methods.updateCounter);
                    $obj.bind("keydown.counter", methods.doStopTyping);
                    $obj.trigger('keydown');
                },
                // Enables uninterrupted typing (just counting)
                isLimitless : function() {
                    if(options.goal === 'sky') {
         ...