JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div>
<h1>HTML5 Tags</h1>

<dl class="change">
    <dt>a</dt>
    <dd><a href="http://www.w3schools.com/html5/tag_a.asp" target="_blank">http://www.w3schools.com/html5/tag_a.html</a></dd>
</dl>

<dl>
    <dt>abbr</dt>
    <dd><a href="http://www.w3schools.com/html5/tag_abbr.asp" target="_blank">http://www.w3schools.com/html5/tag_abbr.html</a></dd>
</dl>

<dl class="change">
    <dt>address</dt>
    <dd><a href="http://www.w3schools.com/html5/tag_address.asp" target="_blank">http://www.w3schools.com/html5/tag_address.html</a></dd>
</dl>

<dl>
    <dt>area</dt>
    <dd><a href="http://www.w3schools.com/html5/tag_area.asp" target="_blank">http://www.w3schools.com/html5/tag_area.html</a></dd>
</dl>

<dl class="new">
    <dt>article</dt>
    <dd><a href="http://www.w3schools.com/html5/tag_article.asp" target="_blank">http://www.w3schools.com/html5/tag_article.html</a></dd>
</dl>

<dl class="new">
    <dt>aside</dt>
    <dd><a href="http://www.w3schools.com/html5/tag_aside.asp" target="_blank">http://www.w3schools.com/html5/tag_aside.html</a></dd>
</dl>

<dl class="new">
    <dt>audio</dt>
    <dd><a href="http://www.w3schools.com/html5/tag_audio.asp" target="_blank">http://www.w3schools.com/html5/tag_audio.html</a></dd>
</dl>

<dl class="change">
    <dt>b</dt>
    <dd><a href="http://www.w3schools.com/html5/tag_b.asp" target="_blank">http://www.w3schools.com/html5/tag_b.html</a></dd>
</dl>

<dl>
    <dt>base</dt>
    <dd><a href="http://www.w3schools.com/html5/tag_base.asp" target="_blank">http://www.w3schools.com/html5/tag_base.html</a></dd>
</dl>

<dl class="new">
    <dt>bdi</dt>
    <dd><a href="http://www.w3schools.com/html5/tag_bdi.asp" target="_blank">http://www.w3schools.com/html5/tag_bdi.html</a></dd>
</dl>

<dl>
    <dt>bdo</dt>
    <dd><a href="http://www.w3schools.com/html5/tag_bdo.asp" target="_blank">http://www.w3schools.com/html5/tag_bdo.html</a></dd>
</dl>

<dl>
    <dt>blockquote</dt>
    <dd><a...

CSS

div {
    width: 80%;
    margin: 0 auto;
    padding: 2em 0;
    border-right: 1px solid #ccc;
    border-left: 1px solid #ccc;
}


h1 {
    position: relative;
    margin: 0 -20px 15px;
    padding: 0 33px;
    line-height: 2;
    color: #222;
    background-color: #474747;
    text-shadow: 0px 2px 3px #555;
    box-shadow: 0px 2px 3px 0px #ccc;
}
h1:before,
h1:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -10px;
    width: 0;
    height: 0;
    border-top: 10px solid #999;
}
h1:before {
    left: 0;
    border-left: 20px solid #fff;
}
h1:after {
    right: 0;
    border-right: 20px solid #fff;
}

dl {
    margin: -1px -1px 0;
    padding: 0 1em;
    border: 1px solid #ccc;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;
    background-color: #fff;
}
dl:first-of-type {
    border-top: 1px solid #ccc;
}
dl[open],
dl:hover {
    margin: -1px -10px 0;
    border: 1px solid #ccc;
    background-color: #eee;
}
dl[open]:nth-child(even) {
    background-color: #ddd;
}
dl dt {
    cursor: pointer;
}
dl:not([class]) dt {
    padding-left: 70px;
}
.new dt:before {
    content: "[NEW]";
    display: inline-block;
    width: 60px;
    padding-right: 10px;
    font-size: 11px;
    color: red;
    text-align: right;
}
.change dt:before {
    content: "[CHANGE]";
    display: inline-block;
    width: 60px;
    padding-right: 10px;
    font-size: 11px;
    color: purple;
    text-align: right;
}
dl dd {
    display: none;
}

/* counter */
dl {
    position: relative;
}
h1 {
    counter-reset: tags;
}
dl:after {
    counter-increment: tags;
    content: counter(tags);
    position: absolute;
    bottom: 0;
    right: 0.5em;
}

JavaScript

$(function(){
    $("dt").live(
    "click",
    function() {
        if($(this).closest("dl").is("[open]")) {
           $(this).closest("dl").removeAttr("open");
           $(this).next().slideUp();
        }
        else {
        $(this).closest("dl").attr("open","open");
        $(this).next().slideDown();
            }
    }
    );
});