JSFiddle - React, Tailwind, and code Playground

by Lalji Tadhani

HTML

<h1></h1>
    <p>I am a web designer. </p>
    <p>I am a graphic designer.</p>
    <p>I am an editorial designer.</p>

<section class="colorBoxes">
<div></div>
<div></div>
<div></div>
<div></div>
</section>

CSS

@media (min-width: 375px) {
    body{
        background: black;
        color: yellow;
        font-family: Helvetica, sans-serif;
    }
}
@media (min-width: 667px) {
    body {
        background: cyan;
        color: red;
        font-family: Gills Sans, sans-serif;
    }
}
@media (min-width: 768px) {
    body{
        background: purple;
        color: white;
        font-family: "Georgia", serif;
    }
}
@media (min-width: 1024px) {
    body {
        background: pink;
        color: cornsilk;
        font-family: Gills Sans Extrabold, sans-serif;
    }
}
@media (min-width: 1200px) {
    body {
        background: orange;
        color: #742f37;
        font-family: "Caslon", serif;
    }
}