JSFiddle - React, Tailwind, and code Playground

by okke

HTML

<p class=logo>
<span class=fn>Auke</span> <span class=ln>Zwart</span>
</p>

CSS

.logo {
    color: #000;
    font-family: sans-serif;
    font-size: 40px;
    font-weight: bold;
    text-transform: lowercase;
}
.fn:before, .fn:after,
.ln:before, .ln:after {
    color: #ccc;
    font-weight: normal;
    font-family: monospace;
}
.fn:before {
    content: "#";
}
.fn:after {
    content: " {";
}
.ln:before {
    content: "lastname:";
}
.ln:after {
    content: " }";
}