JSFiddle - React, Tailwind, and code Playground

HTML

<i class="type">int</i><i class="funcname">main</i><ul class="args"><li><i class="type">int</i><i class="varname">argc</i></li><li><i class="type">char</i><i class="varname">*argv[]</i></li></ul><div class="funcbody"><i class="type">int</i><i class="varname">c</i><i class="s"></i><i class="varname">c</i><i class="op">=</i><i class="funcname">getchar</i><ul class="args"></ul><i class="s"></i><i class="st">while</i><ul class="args"><li><i class="varname">c</i><i class="op">!=</i><i class="varname">EOF</i></li></ul><div class="stbody"><i class="funcname">putchar</i><ul class="args"><li><i class="varname">c</i></li></ul><i class="s"></i><i class="varname">c</i><i class="op">=</i><i class="funcname">getchar</i><ul class="args"></ul><i class="s"></i></div></div>

CSS

* {
    margin: 0;
    padding: 0;
}
div, i, ul, li {
    white-space: pre;
    display: inline;
    font-style: normal;
}
li:after {
    content: ', ';
}
li:last-child:after {
    content: '';
}
.stbody:before, .funcbody:before {
    content: ' {\A';
}
.stbody:after, .funcbody:after {
    content: '}\A';
}
.type:after {
    content: ' ';
}
.args:before {  
    content: '(';
}
.args:after {
    content: ')';
}
.st:after {
    content: ' ';
}
.s:after {
    content: ';\A';
}
.op:after, .op:before {
    content: ' ';
}