JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<html>
<head>
    <title>Project Rafalko</title> 
    <link href="style.css" rel="stylesheet" media="screen"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
       <div id="homepage">
               <div id="content"></div>
       </div>
</body>
</html>

JavaScript

#homepage {
    width: 100%;
    height: 100%;
}

#content {
    width: 100%;
    height: 100%;
    background:#000099;
}


/* All Portrait */
@media all and (orientation:portrait) {
    #homepage {
        border: 5px solid #006600;
    }
}

/* Portrait Narrow (iPhone) */
@media all and ( orientation:portrait ) and ( max-device-width: 480px ) {
    #homepage {
    }

    #content {
        background: #003300;
    }
}

/* Portrait Wide (iPad) */
@media all and ( orientation:portrait) and ( max-device-width: 480px ) and ( device-width: 768px ) and ( device-height: 1024px ) {
    #homepage {

    }
    #content {
        background:#009900;
    }
}

/* All Landscape */

@media all and ( orientation:landscape ) {
    #homepage {
        border: 5px solid #660000;
    }
}


/* Landscape Narrow (iPhone) */
@media all and ( orientation:landscape ) and ( max-device-width: 480px) {
    
    #homepage {

    }

    #content {
        background: #330000;
    }

}

/* Landscape Wide (iPad) */
@media all and ( orientation: landscape ) and ( device-width: 768px ) and ( device-height: 1024px ) {

    #homepage {

    }

    #content {
        background:#990000;
    }

}