JSFiddle - React, Tailwind, and code Playground

by JamesKyle

HTML

<div>
    <span>
        { "Built": [
            { "for":
                "<a href="#">Equality</a>"
            },
            { "in": [
                "<a href="#">Boston</a>",
                "<a href="#">Cambridge</a>" ]
            },
            { "with": [
                "<a href="#">Ruby on Rails</a>",
                "<a href="#">Stylus</a>" ]
            }
        ] }
    </span>
</div>

<div>
    <span>
        <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>
    </span>
</div>

CSS

body {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    width: 100%; height: 100%;
    padding: 0; margin: 0;
    
    display: table;
    
    background: #d8d8d8;
    border: .5em solid #d8d8d8;
}

div {
    display: table-cell;
    vertical-align: middle;
    padding: 2em;
    margin: 2em;
    width: auto;
    text-align: center;
    
    background: #f2f2f2;
    -webkit-border-radius: 1.5em;
       -moz-border-radius: 1.5em;
            border-radius: 1.5em;
}

span {
    display: inline-block;
    white-space: pre-wrap;
    text-align: left;
    
    font: 100% Monaco;
    line-height: inherit;
    opacity: .999999;
    color: rgba(0, 0, 0, .85);
    text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
    
}
a {
    color: #36c;
}

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