JSFiddle - React, Tailwind, and code Playground

by alvaroveliz

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="alert alert-info">
Selección: <code id="web_page_filter"></code>
</div>


    <div class="container theme-showcase" role="main">

      <!-- Main jumbotron for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Theme example</h1>
        <p>This is a template showcasing the optional theme stylesheet included in Bootstrap. Use it as a starting point to create something more unique by building on or modifying it.</p>
      </div>


      <div class="page-header">
        <h1>Buttons</h1>
      </div>
      <p>
        <button type="button" class="btn btn-lg btn-default">Default</button>
        <button type="button" class="btn btn-lg btn-primary">Primary</button>
        <button type="button" class="btn btn-lg btn-success">Success</button>
        <button type="button" class="btn btn-lg btn-info">Info</button>
        <button type="button" class="btn btn-lg btn-warning">Warning</button>
        <button type="button" class="btn btn-lg btn-danger">Danger</button>
        <button type="button" class="btn btn-lg btn-link">Link</button>
      </p>
      <p>
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-primary">Primary</button>
        <button type="button" class="btn btn-success">Success</button>
        <button type="button" class="btn btn-info">Info</button>
        <button type="button" class="btn btn-warning">Warning</button>
        <button type="button" class="btn btn-danger">Danger</button>
        <button type="button" class="btn btn-link">Link</button>
      </p>
      <p>
        <button type="button" class="btn btn-sm btn-default">Default</button>
        <button type="button" class="btn btn-sm btn-primary">Primary</button>
        <button type="button" class="btn btn-sm btn-success">Success</button>
        <button type="button"...

CSS

.highlight {
  border: 1px solid black !important;
  box-shadow: inset 0 0 3px blue !important;
}

JavaScript

$.fn.cssPath = function() {
  var currentObject = $(this).get(0);        
  cssResult = "";
  while (currentObject.parentNode) {
    if(currentObject.id) {
      cssResult = currentObject.nodeName + '#' + currentObject.id + " " + cssResult;
      break;
    } else if(currentObject.className) {
      cssResult = currentObject.nodeName + '.' + currentObject.className + " " + cssResult;            
    } else {
      cssResult = currentObject.nodeName + " " + cssResult;            
    }
    currentObject = currentObject.parentNode;
  }
  return cssResult.toLowerCase();
}

$("*").mouseenter(function() {
  $(".highlight").removeClass("highlight");
  $(this).addClass("highlight");        
});

$("*").on('click',function(event){
  var value = $(this).cssPath();
  $('#web_page_filter').html(value);
  return false;
});