JSFiddle - React, Tailwind, and code Playground

by inpixelitrust

HTML

<div id="container">    
<h1> Données navigateur</h1>
<div class="data"> <output > </output> </div>
<h1> Style media query</h1>

<p> <pre><code> 
#container{
background:rgba(111, 78, 152, 0.9); /*violet */
padding:10px 5px;
color:rgb(1, 1, 1);
}

@media all and (min-width:500px) and (max-width:699px) {
    #container{
        background: rgba(255, 0, 0, 0.9); /* rouge */        
        font-family: serif;
    }
}
@media all and (min-width:700px) {
   #container{
        background: rgba(0, 0, 255,0.9); /*bleu */
        color: white;
        font-family: serif;
    }
}


    </code></pre></p>

<h1> Un peu de texte</h1>
<p>Cupcake ipsum dolor sit amet sesame snaps chupa chups. Cupcake pastry tootsie roll. Halvah I love icing danish I love candy canes macaroon cake. Sugar plum tart jelly beans lemon drops sweet roll I love lollipop. Biscuit gingerbread chocolate danish powder apple pie chupa chups I love. Soufflé pudding toffee pastry pastry. Soufflé jelly-o carrot cake sugar plum. Jelly-o gummi bears powder chocolate cake tart bonbon. Faworki candy canes icing pie. Chocolate bar chocolate cake marshmallow. Fruitcake biscuit danish I love marshmallow. Carrot cake gingerbread caramels brownie jujubes sugar plum. Powder chupa chups jujubes gummies lollipop. Biscuit chocolate cake sugar plum sweet.</p>
</div>

CSS

body {
  padding: 0;
  margin:0;
  font-family: Tahoma, Verdana, serif;
   background:url(http://www.inpixelitrust.fr/caweb/grid.png) no-repeat;
  font-size:1em;
}

h1 {
  font-size: 1.3em;
  color:#fff;
  margin-top:30px;
}

#container{
background:rgba(111, 78, 152, 0.9); /*violet */
padding:10px 5px;
color:rgb(1, 1, 1);
text-shadow: 0px 1px 1px rgb(2, 2, 2);
margin:5px;
}

pre, output {font-size: 1.2em; font-family: monospace; white-space: pre-wrap; display: block;}


@media all and (min-width:500px) and (max-width:699px) {
    #container{
        background: rgba(255, 0, 0, 0.9); /* rouge */        
        font-family: serif;
    }
}
@media all and (min-width:700px) {
   #container{
        background: rgba(0, 0, 255,0.9); /*bleu */
        color: white;
        font-family: serif;
    }
}

JavaScript

function report() { document.getElementsByTagName('output')[0].innerHTML = 'screen.width:'+screen.width+'<br>screen.height:'+screen.height+'<br>window.innerWidth:'+window.innerWidth+'<br>window.innerHeight:'+window.innerHeight+'<br>window.outerWidth:'+window.outerWidth+'<br>window.outerHeight:'+window.outerHeight+'<br>document.documentElement.<br> clientWidth:'+document.documentElement.clientWidth+'<br>document.documentElement.<br> clientHeight:'+document.documentElement.clientHeight+'<br>window.devicePixelRatio:'+window.devicePixelRatio; }
window.addEventListener('load', report, false);
window.addEventListener('resize', report, false);
window.addEventListener('orientationchange', report, false);
window.addEventListener('deviceorientation', report, false);
window.addEventListener('MozOrientation', report, false);