JSFiddle - React, Tailwind, and code Playground

by igos

HTML

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="pl" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="pl" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="pl" xmlns:fb="http://www.facebook.com/2008/fbml"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="pl" xmlns:fb="http://www.facebook.com/2008/fbml"> <!--<![endif]-->
<head>
	<script type="text/javascript">var NREUMQ=NREUMQ||[];NREUMQ.push(["mark","firstbyte",new Date().getTime()]);</script>

	
	
		


	





	<meta charset="utf-8" />
		<title>Podwójne życie geja-kibola. &quot;Zatłukli by mnie, gdyby wiedzieli&quot; | NaTemat.pl</title>
		<meta name="description" content="" />
		<meta property="fb:app_id" content='192967107477262' />
<meta property="fb:page_id" content="370535546308040" />
			<meta property="og:image" content="http://m.natemat.pl/d6af5c5a5e2e4339d93c3b8813d93f6c,641,0,0,0.jpg">		<meta property="og:title" content="Podwójne życie geja-kibola. &quot;Zatłukli by mnie, gdyby wiedzieli&quot;">		<meta property="og:type" content="article">		<meta property="og:description" content="Marek* jest kibolem. Dresiarzem. Nie wstydzi się tego, jak mówi – to nic złego. Wstydzi się za to czegoś innego – tego, że jest gejem. - Czasem nienawidzę siebie. Żyję w ciągłym strachu, że ktoś się dowie. W moim środowisku, gdyby się dowiedzieli, pewnie by mnie zatłukli na śmierć – opowiada mi 27-latek. Mówi też o życiu w strachu i o tym, jak trudno odciąć się od przyjaciół, nawet jeśli wiesz, że gdyby znali twoją orientację, to stałbyś się ich wrogiem.">		<meta property="og:url" content="http://natemat.pl/68521,podwojne-zycie-geja-kibola-zatlukli-by-mnie-gdyby-wiedzieli">		<meta property="og:site_name" content="NaTemat.pl">	
<meta name="viewport" content="width=1050">
<script>var serviceRootDomain = 'natemat.pl';var...

CSS

.mouseOn{
  background-color: #bcd5eb !important;
  outline: 2px solid #5166bb !important;
}

JavaScript

$("a").unbind("click");

$("a").click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    return false;
});

var domExp = new domexplorer();

prevElement = null;
document.addEventListener('mousemove',
    function(e){
        var elem = e.target || e.srcElement;
        if (prevElement!= null) {prevElement.classList.remove("mouseOn");}
        elem.classList.add("mouseOn");
        prevElement = elem;
    },true);

document.addEventListener("click",
    function(e){
        var elem = e.target || e.srcElement;
        if (prevElement!= null) {prevElement.classList.remove("mouseOn");}
        elem.classList.add("mouseOn");
        prevElement = elem;
        
        console.log(domExp.getElementXPath(elem));
    },true);



function domexplorer ()
{
// ************************************************************************************************
// XPath

/**
* Gets an XPath for an element which describes its hierarchical location.
*/
this.getElementXPath = function(element)
{
if (element && element.id)
return '//*[@id="' + element.id + '"]';
else
return this.getElementTreeXPath(element);
};

this.getElementTreeXPath = function(element)
{
var paths = [];

// Use nodeName (instead of localName) so namespace prefix is included (if any).
for (; element && element.nodeType == 1; element = element.parentNode)
{
var index = 0;
for (var sibling = element.previousSibling; sibling; sibling = sibling.previousSibling)
{
// Ignore document type declaration.
if (sibling.nodeType == Node.DOCUMENT_TYPE_NODE)
continue;

if (sibling.nodeName == element.nodeName)
++index;
}

var tagName = element.nodeName.toLowerCase();
var pathIndex = (index ? "[" + (index+1) + "]" : "");
paths.splice(0, 0, tagName + pathIndex);
}

return paths.length ? "/" + paths.join("/") : null;
};

this.getElementCSSPath = function(element)
{
var paths = [];

for (; element && element.nodeType == 1; element = element.parentNode)
{
var selector =...