JSFiddle - React, Tailwind, and code Playground

by Daniel Tan

HTML

<p class="dotted-underline"><code>color: green;</code> inherited from <code>&lt;body&gt;</code>
<p class="dotted-underline"><code>color: red;</code> not inherited
<p class="dotted-underline"><code>color</code> not inherited; <code>border-bottom-color</code> uses <code>color</code> inherited from <code>&lt;body&gt;</code>

CSS

body {
    color: green;
}

p {
    font-size: 150%;
    margin: 0.5em;
    border-bottom: dotted 0.1em;
}

p + p {
    color: red;
}

p + p + p {
    border-bottom-color: inherit;
}