JSFiddle - React, Tailwind, and code Playground

HTML

<div class="roboto">
    <span class="fw-100">Roboto 100</span>
    <span class="fw-300">Roboto 300</span>
    <span class="fw-400">Roboto 400</span>
    <span class="fw-500">Roboto 500</span>
    <span class="fw-700">Roboto 700</span>
    <span class="fw-900">Roboto 900</span>
</div>

<div class="roboto-c">
    <span class="fw-100 no-variant">Roboto Condensed 100</span>
    <span class="fw-300">Roboto Condensed 300</span>
    <span class="fw-400">Roboto Condensed 400</span>
    <span class="fw-500 no-variant">Roboto Condensed 500</span>
    <span class="fw-700">Roboto Condensed 700</span>
    <span class="fw-900 no-variant">Roboto Condensed 900</span>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900);
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700);

.roboto {
    font-family: "Roboto";
}
.roboto-c {
    font-family: "Roboto Condensed";
}

span {
    display: block;
    font-size: 2em;
}

.fw-100 { font-weight: 100; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-700 { font-weight: 700; }
.fw-900 { font-weight: 900; }

.no-variant {
    color: #b13131;
}
.no-variant::after {
    background-color: #b13131;
    color: #eee;
    content: 'Does not exist in font family';
    font-family: Arial;
    font-size: .5em;
    margin-left: .25em;
    padding: .25em;
    vertical-align: top;
}