JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>target</title>
<style>
* {margin:0;padding:0;}
.target {
  background:#eee;border:#999 1px solid;
  margin:10px auto;padding:5px;width:200px;
}
.target dt a {
  background:#000;color:#fff;display:block;
  font:bold 13px georgia,arial;margin:2px 0;
  padding:3px 5px;text-decoration:none;
}
.target dt a:hover {background:#905;color:#fff;}
.target :target dt a {background:#080;color:#fff;cursor:text;}
.target dd {background:#fff;padding:0 5px;overflow:hidden;height:0;}
.target :target dd {height:auto;}
.target dd a {color:#000;display:block;padding:2px 5px;text-decoration:none;}
.target dd a:hover {color:#a00;}
</style>
<!-- for IE7 -->
<!--[if lt IE 8]>
<script>
function findTargetStyle(id) {
    for(var i=0, sl=document.styleSheets.length, ss; i < sl; i++) {
        ss = document.styleSheets[i];
        for (var j=0, rl=ss.rules.length, r, tmpRule; j < rl; j++) {
            r = ss.rules[j];
            if (/\.pseudo-target#\S+/.test(r.selectorText)) {
                tmpRule = {
                    selector: r.selectorText.replace(/\.pseudo-target#\S+/, '.pseudo-target#'+id),
                    cssText: r.style.cssText
                }
                ss.removeRule(j);
                ss.addRule(tmpRule.selector, tmpRule.cssText, j);
            }
            else
            if (/\:unknown/.test(r.selectorText)) {
                tmpRule = {
                    selector: r.selectorText.replace(/\:unknown/, '.pseudo-target#'+id),
                    cssText: r.style.cssText
                }
                ss.removeRule(j);
                ss.addRule(tmpRule.selector, tmpRule.cssText, j);
            }
        }
    }
}

function changeTarget() {
  setTimeout(function() {
    var targetId = location.hash.replace('#','');
    var lastTarget = (window.targetedDl && window.targetedDl.id) || '';
    if (targetId != lastTarget) {
      if(document.getElementById(targetId) &&...