JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<ruby>
                            <rb>
                                <section class="a">
                                    <p>This is the content of Section A, the one which appears in the DOM first. But the DOM’s got nothin’ on these mad CSS skills.</p>
                                </section>
                            </rb>
                            <rt>
                                <section class="b">
                                    <p>This is the content of Section B, the one which appears in the DOM last. But the DOM’s got nothin’ on these mad CSS skills.</p>
                                </section>
                            </rt>
                        <ruby>

CSS

.example-ruby rt {
                            font-size: inherit
                        }

                        @media (max-width: 360px) {
                            .example-ruby rt {
                                display: inline
                            }
                        }

                        .example-ruby section p {
                            padding: 1em;
                            margin-bottom: 1em
                        }

                        .example-ruby .a p {
                            border: .25em solid #453b8d
                        }

                        .example-ruby .b p {
                            border: .25em solid #ba0d83
                        }