JSFiddle - React, Tailwind, and code Playground

by guydog28

HTML

<a href="welcome.html"><img  alt="Homepage" src="http://newyorkfairandlovely.com/images/NYFL_Homepage.jpg" 
        data-src-600px="http://newyorkfairandlovely.com/images/NYFL_Homepage-600px.jpg"
     data-src-800px="http://newyorkfairandlovely.com/images/NYFL_Homepage-800px.jpg"
	 data-src-1024px="http://newyorkfairandlovely.com/images/NYFL_Homepage-1024px.jpg"/>
	 </a>
	
<div style="width:100%; background-color:#9362ae;">
<nav>
	 <a href="http://newyorkfairandlovely.com/store/about-us">ABOUT US</a>
	 <a href="http://newyorkfairandlovely.com/store/">STORE</a>
</nav>
</div>

CSS

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}
@-ms-viewport {
    width: extend-to-zoom;
    zoom: 1.0;
}
@media only screen and (max-width: 1224px), (min-device-width: 1024px) and (max-device-width: 1824px) {
    /* Tablet Landscape */
    @media screen and (max-width: 1060px) {
        #primary {
            width:67%;
        }
        #secondary {
            width:30%;
            margin-left:3%;
        }
    }
    /* Tabled Portrait */
    @media screen and (max-width: 1024px) {
        #primary {
            width:100%;
        }
        #secondary {
            width:100%;
            margin:0;
            border:none;
        }
        img {
            max-width: 100%;
        }
        @media (min-device-width:600px) {
            img[data-src-600px] {
                content: attr(data-src-600px, url);
            }
        }
        @media (min-device-width:800px) {
            img[data-src-800px] {
                content: attr(data-src-800px, url);
            }
        }
        @media (min-device-width:1024px) {
            img[data-src-1024px] {
                content: attr(data-src-1024px, url);
            }
        }
    }
    html {
        font-size:100%;
    }
    @media (min-width: 640px) {
        body {
            font-size:1em;
        }
    }
    @media (min-width:960px) {
        body {
            font-size:1.2em;
        }
    }
    @media (min-width:1100px) {
        body {
            font-size:1.5em;
        }
    }
}
nav {
    position: absolute;
    left: 0;
    background-color: #9362ae;
    float: left;
    width: 100%;
    margin: 0 auto;
    max-width: 1600px;
    font-family:"Source Sans Pro", Helvetica, sans-serif;
}
nav a {
    margin-right: 20px;
    font-size: 18px;
    text-decoration: none;
    color: #fff;
}
nav a:hover {
    color: #fff;
    text-decoration: underline;
}