JSFiddle - React, Tailwind, and code Playground

by Blake Plumb

HTML

<h1 class="pageheading"><a href="http://suu.edu/cose/agns/"><img alt="Walter Maxwell Gibson College of Science &amp; Engineering" src="http://suu.edu/cose/images/h1-cose.jpg"></a></h1>

CSS

@media (max-width: 767px){
h1.pageheading a{
        display: block;
        background-repeat: no-repeat;
        background-size: cover;
    }
    h1.pageheading a[href*="http://suu.edu/cose/*"] img{
        position: relative;
        z-index: -1; 
    }
    h1.pageheading a[href="http://suu.edu/cose/"] {
        background-image: url("http://suu.edu/cose/images/h1-cose.jpg");
    }
    h1.pageheading a[href="http://suu.edu/cose/agns/"] {
        background-image: url("http://suu.edu/cose/agns/images/h1-agns-mobile.jpg");
    }
    h1.pageheading a[href="http://suu.edu/cose/biology/"] {
        background-image: url("http://suu.edu/cose/biology/images/h1-biology-mobile.jpg");
    }
    h1.pageheading a[href="http://suu.edu/cose/ie/"] {
        background-image: url("http://suu.edu/cose/ie-build/images/h1-ie-mobile.jpg");
    }
    h1.pageheading a[href="http://suu.edu/cose/math/"] {
        background-image: url("http://suu.edu/cose/math/images/h1-math-mobile.jpg");
    }
    h1.pageheading a[href="http://suu.edu/cose/nursing/"] {
        background-image: url("http://suu.edu/cose/nursing/images/h1-nursing-mobile.jpg");
    }
    h1.pageheading a[href="http://suu.edu/cose/physci/"] {
        background-image: url("http://suu.edu/cose/physci-build/images/h1-physci-mobile.jpg");
    }
    h1.pageheading a[href="http://suu.edu/cose/csis/"] {
        background-image: url("http://suu.edu/cose/csis/images/h1-csis-mobile.jpg");
    }
    h1.pageheading a[href="http://suu.edu/cose/etcm/"] {
        background-color
    }
}