JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<article>
    <p>ALICE was beginning to get very tired of sitting by her sister on the bank and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?'
    </p><p>
So she was considering, in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.
    </p>
</article>

CSS

article{ margin: 2em;}
p{ padding: 1em; line-height: 1.3; }

@media (min-width: 30em) and (max-width: 44em){
    article{ 
        width: 25em;
        margin: 2em auto;
        background-color: #FFAAAA; 
    }
}

@media (min-width: 44em){
    p{
        display: inline-block;
        width: 50%;
        box-sizing: border-box;
        background-color: #AAFFAA; 
    }
}