JSFiddle - React, Tailwind, and code Playground

by Chombito

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>American Poets From Wikipedia</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.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.1/jquery.mobile-1.1.1.min.js"></script>
<link rel="stylesheet" href="_css/yellow.css" />
<link rel="stylesheet" href="_css/structure.css" />
<link rel="stylesheet" href="_css/mystyles.css" />
<script src="_js/myscript.js"></script>


<title>American Poets</title>
</head>
    <body>
        <div data-role="page" data-transition="pop" data-theme="e" data-title="A List of American Poets" id="poet-list">
            <div data-role="header">
                <h1>American Poets From Wikipedia</h1>
            </div><!-- /header -->

            <div data-role="content">
                <ul data-role="listview" id="result">
                </ul>
            </div><!-- /content -->
    
            <div data-role="footer">
                <a href="#" id="prev" data-role="button">Prev 20</a>
                <a href="#" id="next" data-role="button">Next 20</a>
            </div><!-- /footer -->
        </div><!-- /page -->
        
        <div id="poet-details" data-role="page" data-transition="pop" data-theme="e" data-title="Details about Poet">
  <div data-role="header">
      <h1>Details About the Poet</h1>
  </div><!--header -->

  <div data-role="controlgroup" data-type="vertical" data-id="nav">
     <a href="#poet-list"
     data-transition="slide"
     data-role="button"
     data-icon="back"
     data-iconpos="right">Return to Poet List</a>

 </div><!-- nav -->
<div data-role="content" id="result_details">


</div><!-- content-->
</div><!--page-->
    </body>
</html>

JavaScript

var query = "PREFIX foaf: <http://xmlns.com/foaf/0.1/> \
    PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>\
    PREFIX dcterms: <http://purl.org/dc/terms/>\
    PREFIX dbpedia-owl: <http://dbpedia.org/ontology/>\
    PREFIX dbprop: <http://dbpedia.org/property/>\
    PREFIX dbcat: <http://dbpedia.org/resource/Category:>\
    PREFIX skos: <http://www.w3.org/2004/02/skos/core#> \
    SELECT DISTINCT ?poet ?poet_name ?surname ?poet_wiki_link ?abstract \
    WHERE \
    {  ?poet dcterms:subject dbcat:American_poets ;\
        foaf:name ?poet_name ;\
        foaf:surname ?surname ;\
        dbpedia-owl:abstract ?abstract ;\
        foaf:isPrimaryTopicOf ?poet_wiki_link .\
      FILTER ( lang(?abstract) = \"de\" )\
    } ORDER BY ?surname \
      LIMIT 20 OFFSET %offset%";
  
  var parseResults = function(data){
      var i = 0, 
          len = data.results.bindings.length,
          domEntry, poet,
          $result = $("#result");            
      
      // empty old stuff
      $result.empty();
      // fill in
      for(i = 0; i < len; i++){
          poet = data.results.bindings[i];
          poet_name = poet.poet_name.value;
          domEntry = '<li><a href="#poet-details"';
          domEntry += ' onclick="getPoetDetails('+ poet_name + ')">';
          domEntry += poet_name;
          domEntry += '</a></li>';
          $result.append( $(domEntry) );
      }
      
        // refresh style
      $result.listview('refresh');
      
      // hide loader
      $.mobile.hidePageLoadingMsg();
  };
  
  var getPoets = function(skip){
      // show loader
      $.mobile.showPageLoadingMsg();
      
      if( skip == null || typeof skip == "undefined" ) skip = 0;
      
      var prepQuery = query.replace("%offset%", skip);
      var url = "http://dbpedia.org/sparql?default-graph-uri=http%3A%2F%2Fdbpedia.org&query=" + escape(prepQuery) + "&format=json";
  
    $.getJSON(url, parseResults);
  }
  
  //
  $(document).ready(function(){
      var skip = 0;
      
 ...