JSFiddle - React, Tailwind, and code Playground

HTML

<h1>a</h1>
<h2>Anchor Element</h2>

<span class="example add">
    <h3>Common Uses:</h3>
    
    <span class="element">a <span class="attribute">href</span>=<span class="value">”http://website.com”</span></span>Visit Website<span class="element">/a</span>
<br/>
<span class="element">a <span class="attribute">href</span>=<span class="value">”#top”</span></span>Back to Top<span class="element">/a</span>
</span>


<span class="example">
    <h3>Common Uses:</h3>
    <pre class="prettyprint html">
        <a href="http://website.com">Visit Website</a>
        <a href="#top">Back to Top</a>
    </pre>
</span>

CSS

body {
  padding: 20px;
  font-family: consolas, monaco, monospace;
  font-size: 100%;
}

h1 {
  font-size: 3em;
  line-height: 1em;
}

h1:before {
  content: "<"
}

h1:after {
  content: ">"
}

h2 {
  font-size: 1.6em;
  color: #666;
}

.example {
  display: block;
  margin: 1em 0em;
  padding: 0.6em;
  background: #eee;
  border: 0.4em solid #eee;
}

.example:hover {
  background: #f5f5f5;
}

.example h3 {
  margin-bottom: 0.3em;
}

pre.prettyprint {
  margin: 0em;
  padding: 0em;
  whitespace: pre-line !important;
}

.element {
  color: #9b2c90
}

.attribute {
  color: #b15714
}

.value {
  color: #2736b1
}

.add .element:before {
  content: "<"
}

.add .element:after {
  content: ">"
}

JavaScript

$(document).ready(function() {

  $('pre.prettyprint.html').each(function() {

    $(this).css('white-space', 'pre-line');

    var code = $(this).html();

    var html - element = $(code).find('a, abbr, acronym, address, area, article, aside, audio, b, base, bdo, bdi, big, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, img, input, ins, kbd, keygen, label, legend, li, link, map, mark, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, samp, script, section, select, small, source, span, strong, summary, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, time, tr, track, tt, ul, var, video, wbr');

    /* OR */

    var html - element - 2 = $(code).find( /* Any instance of text inbeween two < > */ );

    var html - attribute = $(code).find('abbr, accept-charset, accept, accesskey, actionm, align, alink, alt, archive, axis, background, bgcolor, border, cellpadding, cellspacing, char, charoff, charset, checked, cite, class, classid, clear, code, codebase, codetype, color, cols, colspan, compact, content, coords, data, datetime, declare, defer, dir, disabled, enctype, face, for, frame, frameborder, headers, height, href, hreflang, hspace, http-equiv, id, ismap, label, lang, language, link, longdesc, marginheight, marginwidth, maxlength, media, method, multiple, name, nohref, noresize, noshade, nowrap, object, onblur, onchange,onclick ondblclick onfocus onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, onunload, profile, prompt, readonly, rel, rev, rows, rowspan, rules, scheme, scope, scrolling, selected, shape, size, span, src, standby, start, style, summary, tabindex, target, text, title, type, usemap, valign, value,...