JSFiddle - React, Tailwind, and code Playground

by adamschwartz

HTML

<div><em>Shrink the browser width past the length of this line and observe the poem below</em></div>

<p>
    Line breaks can be specified
    <br/>
    for large displays
    <br/>
    and on smaller ones
    <br/>
    the words can flow naturally...
</p>

CSS

</style>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {
    font-family: "Gill Sans", sans-serif;
    -webkit-font-smoothing: antialiased;
}

div {
    width: 552px;
    padding-bottom: 3px;
    border-bottom: 2px solid
}

p {
    font-size: 2em;     
}

@media (max-width: 568px) {
    div, br {
        display: none
    }

    p {
        margin-top: 0
    }
}