JSFiddle - React, Tailwind, and code Playground

HTML

<body>

<section class="utilities">
    <article class="login">
        <header>
            <h1>Module Header</h1>
        </header>
        <p>Module Description</p>
        <img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />
    </article>
</section>

<section class="test">
    <article class="login">
        <header>
            <h1>Module Header</h1>
        </header>
        <p>Module Description</p>
        <img src="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png" />
    </article>
</section>
    
</body>

CSS

body {
    font: 62.5%/1.5 sans-serif;
}
section, article {
    display: inline-block;
    zoom: 1;
    *display: inline;
}
section {
    padding: .5em;
    border: solid 1px blue;
}

section.utilities > article {
    font-size: 1em;
}

section.test > article {
    font-size: 2.5em;
}

article.login {
    width: 10em; height: 5em;
    padding: .5em;
    background-color: red;
    background-image:url('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png');
    background-repeat: no-repeat;
    background-size: 1.6em .9em;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png', sizingMethod='scale');
}
article.login img {
    width: 3.2em; height: 1.8em;
}