JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<dl>
    <dt><q>Built</q></dt>
    <dd>
        <ul>
            <li>
                <dl>
                    <dt><q>for</q></dt>
                    <dd><q><a href="#">Equality</a></q></dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt><q>in</q></dt>
                    <dd>
                        <ul>
                            <li><q><a href="#">Boston</a></q></li>
                            <li><q><a href="#">Cambridge</a></q></li>
                        </ul>
                    </dd>
                </dl>
            </li>
            <li>
                <dl>
                    <dt><q>with</q></dt>
                    <dd>
                        <ul>
                            <li><q><a href="#">Ruby on Rails</a></q></li>
                            <li><q><a href="#">Stylus</a></q></li>
                        </ul>
                    </dd>
                </dl>
            </li>
        </ul>
    </dd>
</dl>

CSS

dl, dt, dd, ul, li, q, a {
    display: inline;
    font: inherit;
    color: inherit;
    margin: 0; padding: 0;
    list-style: none;
    text-decoration: none;
}

dl::before, dl::after,
dt::before, dt::after,
dd::before, dd::after,
ul::before, ul::after,
li::before, li::after,
 q::before,  q::after,
 a::before,  a::after {
    content: "";
    display: inline;
}

dl { display: block; }

dl dl {
    margin-left: 1em;
}

dl::before { content: "{" }
dl::after  { content: "}" }

dt::after  { content: ":" }

ul::before { content: "[" }
ul::after  { content: "]" }

li::after  { content: "," }
li:last-child::after { content: "" }

q::before  { content: '"' }
q::after   { content: '"' }