JSFiddle - React, Tailwind, and code Playground

HTML

<p>
    <span class="ruby">
        <span class="rubyBase">first ruby base</span> <span class="rubyBase">second ruby base</span>
        <span class="rubyText">first ruby annotation</span><span class="rubyText">second ruby annotation</span>
    </span>
</p>
<p>
    <span class="ruby">
        anonymous ruby base <span class="rubyBase">explicit ruby base</span>
        <span class="rubyText">first ruby annotation</span><span class="rubyText">second ruby annotation</span>
    </span>
</p>
<p>
    <span class="ruby">
        <span class="rubyBase">explicit ruby base</span> anonymous ruby base
        <span class="rubyText">first ruby annotation</span><span class="rubyText">second ruby annotation</span>
    </span>
</p>

CSS

.ruby {
    display: ruby;
}
.rubyBase {
    display: ruby-base;
    border: 1px dashed blue;
}
.rubyText {
    display: ruby-text;
    border: 1px dashed red;
}
p {
    width: 5em;
    border: 3px double;
    padding: 0.5em;
}
}