JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="torso">
  <div v-for="font in fonts" :style='"font-family: \"" + font + "\";"'>
    <h2 v-text="font"></h2>
    <ul>
      <li>1ˢᵗ 1<sup>st</sup></li>
      <li>2ⁿᵈ 2<sup>nd</sup>
      <li>3ʳᵈ 3<sup>rd</sup></li>
      <li>4ᵗʰ 4<sup>th</sup></li>
    </ul>
  </div>
</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Droid+Sans|Hind|Lato|Montserrat|Noto+Sans|Open+Sans|Oxygen|PT+Sans|Raleway|Roboto|Slabo+27px|Source+Sans+Pro&subset=latin-ext');
sup {
  font-size: 70%;
}

div {
  padding: 0 2rem;
  display: inline-block;
}

ul {
  padding-left: 1.5rem;
}

JavaScript

new Vue({
  el: '.torso',
  data: {
    fonts: [
      'arial',
      'helvetica',
      'Helvetica Neue',
      'Tahoma',
      'Verdana',
      
      'Droid Sans',
      'Hind',
      'Lato',
      'Monserrat',
      'Noto Sans',
      'Open Sans',
      'Oxygen',
      'PT Sans',
      'Raleway',
      'Roboto',
      'Slabo 27px',
      'Source Sans Pro'
    ],
  }
})