JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css">
<script src="https://raw.github.com/mmonteleone/pavlov/master/pavlov.js"></script>
<h1 id="qunit-header"></h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
  <p>Hello World</p>
  <p class="runtime">Hello World</p>
  <p data-m>Hello World</p>
  <p data-my="">Hello World</p>
  <p data-myt="1">Hello World</p>
  <p data-myty="11">Hello World</p>
  <p data-mytype="myvalue">Hello World</p>
  <p data-mytyped="myvalue">Hello World</p>
</div>

CSS

body { margin: 0 10px 0 0; padding: 0; }

JavaScript

(function($) {

  /* by Elijah Manor    
   * Filter results by html5 data attributes either at design-time 
   * ( HTML5 data-attr ) or at runtime ( internal jQuery data() )
   *
   * Usages
   * $( "p:dataAttr(mytype)" )   // returns all p's with data mytype attr
   * $( "p:dataAttr(my, ^=)" )   // returns all p's that start with data myty attr
   * $( "p:dataAttr(type, $=)" ) // returns all p's that ends with data myty attr
   * $( "p:dataAttr(yty, ~=)" )  // returns all p's that contains data myty attr
    */
  $.expr[ ":" ].dataAttr = function( element, index, match, array ) {
    var parameters = match[ 3 ].split( "," ),
        attr = $.trim( parameters[0] ),
        compare = $.trim( parameters[1] ) || "=", 
        data = $( element ).data(),
        matches = false;
      
    $.each( data, function( key, _ ) {
      index = key.indexOf( attr );
      
      if ( compare === "=" ) {
        matches = key === attr; 
      } else if ( compare === "^=" ) {
        matches = index === 0; 
      } else if ( compare === "$=" ) {
        matches = ~index && index === ( key.length - attr.length );  
      } else if ( compare === "~=" ) {
        matches = !!~index;
      }
      
      if ( matches ) { return false; }
    });
       
    return matches; 
  };
    
})(jQuery);

pavlov.specify.globalApi = true;
pavlov.specify( "jQuery :dataAttr Pseudo Selector", function() {

  var $fixture = $( "#qunit-fixture" );
    
  describe( "Design-time Checks", function() {

    it( "should not match an element that doesn't have the data-attr", function() {
        var $p = $( "p:dataAttr(bogus)" );
      
      assert( $p ).isDefined();        
      assert( $p.length ).isEqualTo( 0 );
    });
    
    it( "should match an element that has a data-attr", function() {
        var $p = $( "p:dataAttr(mytype)" );
      
      assert( $p ).isDefined();        
      assert( $p.length ).isEqualTo( 1 );
      assert( $p.index() ).isEqualTo( 6 );
    });

    it( "should match...