JSFiddle - React, Tailwind, and code Playground

Screen Ruler Perfectly Accurate Screen Resolution Tool

by Jennifer Perrin

HTML

<div class='content'>
    <h1>The Ruler Is The Most Accurate Means Of Measurement</h1>
    <h3>Notice The Top / Left Borders Of This Page</h3>
    <p>
        Simply add it to your CSS or &lt;head&gt; like so:
        <pre><code>
body {
    background: #f0f0f0; 
    url(http://jennperrin.com/dev/ruler.png) 
    top left no-repeat;
}

&lt;link rel="stylesheet" type="text/css" href="http://jennperrin.com/dev/ruler.css" /&gt;
        </code></pre>
    </p>
    <h3>Purpose:</h3>
    <ul>
        <li>Super quick mobile / desktop prototyping and resolution testing</li>
        <li><b>You have total control:</b> Resize to any resolution you want - no more fussing with presets, and no distracting UI</li>
        <li>Media Query Perfection</li>
        <li>My favorite: Added convenience while developing in CodePen Editor Mode</li>
    </ul>
    
    <h3>Ruler Variables:</h3>
    <ul>
        <li>5px Step</li>
        <li><span class='red'>Red</span> stand for the most common mobile device resolutions.</li>
        <li><span class='green'>Green</span> stand for the most common desktop and laptop resolutions.</li>
    </ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro);
body {
    margin:0;
    font-family:'Source Code Pro';
    background-repeat: no-repeat;
    background-image:...