JSFiddle - React, Tailwind, and code Playground

by scyrizales

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<div data-role="page" id="page-wrapper">
   <div id="ad-content-wrapper" data-role="content" data-theme="c">
      <p><strong>
         <span >Articles</span>
         </strong>
      </p>
      <ul id="hp-latest-articles"  data-inset="true" data-divider-theme="c" data-content-theme="c" data-theme="c" data-autodividers="true" data-role="listview" >
         <li date="November 2012" >
            <a href="ArticleDetails.aspx?Language=en-US&amp;PageID=19&amp;ArticleID=266" >
               <img  src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">
               <h2>A Article title will go here</h2>
               <p>21 November 2012</p>
            </a>
         </li>
         <li date="November 2012" >
            <a href="ArticleDetails.aspx?Language=en-US&amp;PageID=19&amp;ArticleID=264" class="ui-link-inherit" data-ajax="false">
               <img  src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">
               <h2>A Article title will go here</h2>
               <p>10 November 2012</p>
            </a>
         </li>
         <li date="October 2012">
            <a href="ArticleDetails.aspx?Language=en-US&amp;PageID=19&amp;ArticleID=260" class="ui-link-inherit" data-ajax="false">
               <img  src="http://nuclearpixel.com/content/icons/2010-02-09_stellar_icons_from_space_from_2005/earth_128.png">
               <h2>B Article title will go here</h2>
               <p>28 October 2012</p>
            </a>
         </li>
         <li date="October 2012" >
            <a...

JavaScript

$(document).on("pageinit", "#page-wrapper", function () {
	        $("#hp-latest-articles").listview({
	            autodividers: true,
	            autodividersSelector: function (li) {
	                var out = li.attr('date');
	                return out;
	            }
	        }).listview('refresh');
	    });

        $("#page-wrapper").trigger("pageinit");



$( document ).on( "pageinit", function() {
  $.mobile.listview.prototype.options.autodividersSelector = function( element )       {
    return (element.attr('date'))       

  };
});