JSFiddle - React, Tailwind, and code Playground

by nottrobin

HTML

<p class="light italic">Ubuntu Light Italic</p>
<p class="light">Ubuntu Light</p>
<p class="regular">Ubuntu Regular</p>
<p class="regular italic">Ubuntu Regular Italic</p>

CSS

body {
    font-size: 48px;
    font-family: "Ubuntu";
}
p {
    margin: 0;
}

.light {
    font-weight: 300;
}
.italic {
    font-style: italic;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: url(http://themes.googleusercontent.com/static/fonts/ubuntu/v5/e7URzK__gdJcp1hLJYAEag.woff) format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://themes.googleusercontent.com/static/fonts/ubuntu/v5/mZSs29ggGoaqrCNB3kDfZQ.woff) format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  src: local('Ubuntu Medium'), local('Ubuntu-Medium'), url(http://themes.googleusercontent.com/static/fonts/ubuntu/v5/I5PmmDkYShUQg-ah7wh25w.woff) format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  src: local('Ubuntu Bold'), local('Ubuntu-Bold'), url(http://themes.googleusercontent.com/static/fonts/ubuntu/v5/trnbTfqisuuhRVI3i45C5w.woff) format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 300;
  src: local('Ubuntu Light Italic'), local('Ubuntu-LightItalic'), url(http://themes.googleusercontent.com/static/fonts/ubuntu/v5/j-TYDdXcC_eQzhhp386SjT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  src: local('Ubuntu Italic'), local('Ubuntu-Italic'), url(http://themes.googleusercontent.com/static/fonts/ubuntu/v5/GZMdC02DTXXx8AdUvU2etw.woff) format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 500;
  src: local('Ubuntu Medium Italic'), local('Ubuntu-MediumItalic'), url(http://themes.googleusercontent.com/static/fonts/ubuntu/v5/NWdMogIO7U6AtEM4dDdf_T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 700;
  src: local('Ubuntu Bold Italic'), local('Ubuntu-BoldItalic'),...