JSFiddle - React, Tailwind, and code Playground

by muthusamy

HTML

<link rel="stylesheet" href="http://www.defie.co/testing/twitter-bootstrap-558bc52/docs/assets/css/bootstrap-responsive.css">
<link rel="stylesheet" href="http://www.defie.co/testing/twitter-bootstrap-558bc52/docs/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://www.defie.co/testing/twitter-bootstrap-558bc52/docs/examples/main_files/cube_gallery.css">
<script src="http://www.defie.co/testing/twitter-bootstrap-558bc52/docs/examples/main_files/jquery.js"></script>
<script src="http://www.defie.co/testing/twitter-bootstrap-558bc52/docs/examples/main_files/cube_gallery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Cape Town</title>
	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile-1.3.0-beta.1.css">
	<link rel="stylesheet" href="../_assets/css/jqm-demos.css">
	<script src="../../../js/jquery.js"></script>
	<script src="../_assets/js/jquery.mobile.demos.js"></script>
    <!--    
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
-->
	<script>
		// Bind to "mobileinit" before you load jquery.mobile.js
		// Set the default transition to slide
		$(document).on( "mobileinit", function() {
			$.mobile.defaultPageTransition = "slide";
		});	
	</script>
	<script src="../../../js/jquery.mobile-1.3.0-beta.1.js"></script>
	<script>
		$( document ).on( "pageinit", "[data-role='page'].demo-page", function() {
			var page = "#" + $( this ).attr( "id" ),
				// Get the filename of the next page that we stored in the data-next attribute
				next = $( this ).jqmData( "next" ),
				// Get the filename of the previous page that we stored in the data-prev attribute
				prev = $( this ).jqmData( "prev" );
			
			// Check if we did set the...

JavaScript

//collapse page navs after use
$(function(){
	$('body').delegate('.content-secondary .ui-collapsible-content', 'click',  function(){
		$(this).trigger("collapse");
	});
});

// display the version of jQM
$(document).on( 'pageinit', function() {
	var version = $.mobile.version || "dev",
		words = version.split( "-" ),
		ver = words[0],
		str = (words[1] || "Final"),
		html = ver,
		foothtml = "Version " + ver;

	if( str.indexOf( "rc" ) == -1 ){
		str = str.charAt( 0 ).toUpperCase() + str.slice( 1 );
	} else {
		str = str.toUpperCase().replace(".", "");
	}

	if ( $.mobile.version && str ) {
		html += " <b>" + str + "</b>";
		foothtml += " " + str;
	}

	$( ".type-home .ui-content p.jqm-version" ).html( html );
	$( ".footer-docs p.jqm-version" ).html( foothtml );
});

// Turn off AJAX for local file browsing
if ( location.protocol.substr(0,4)  === 'file' ||
     location.protocol.substr(0,11) === '*-extension' ||
     location.protocol.substr(0,6)  === 'widget' ) {

  // Start with links with only the trailing slash and that aren't external links
  var fixLinks = function() {
    $( "a[href$='/'], a[href='.'], a[href='..']" ).not( "[rel='external']" ).each( function() {
      this.href = $( this ).attr( "href" ).replace( /\/$/, "" ) + "/index.html";
    });
  };

  // fix the links for the initial page
  $(fixLinks);

  // fix the links for subsequent ajax page loads
  $(document).on( 'pagecreate', fixLinks );

  // Check to see if ajax can be used. This does a quick ajax request and blocks the page until its done
  $.ajax({
    url: '.',
    async: false,
    isLocal: true
  }).error(function() {
    // Ajax doesn't work so turn it off
    $( document ).on( "mobileinit", function() {
      $.mobile.ajaxEnabled = false;

      var message = $( '<div>' , {
        'class': "ui-footer ui-bar-e",
        style: "overflow: auto; padding:10px 15px;",
        'data-ajax-warning': true
      });

      message
        .append( "<h3>Note: Navigation may not work if viewed...