JSFiddle - React, Tailwind, and code Playground

by Wally Glenn

HTML

<h3 class="tahoma">Tahoma</h3>

<ul class="tahoma">
   <li style="font-weight: 100 !important;">100 - Thin</li>
   <li style="font-weight: 200 !important;">200 - Extra Light (Ultra Light)</li>
   <li style="font-weight: 300 !important;">300 - Light</li>
   <li style="font-weight: 400 !important;">400 - Normal</li>
   <li style="font-weight: 500 !important;">500 - Medium</li>
   <li style="font-weight: 600 !important;">600 - Semi Bold (Demi Bold)</li>
   <li style="font-weight: 700 !important;">700 - Bold</li>
   <li style="font-weight: 800 !important;">800 - Extra Bold (Ultra Bold)</li>
   <li style="font-weight: 900 !important;">900 - Black (Heavy)</li>
 </ul>
 
 <!-- p class="nunito">Nunito has no 100, 300, 500, 700, or 900 font weight.</p -->
 
 <h3 class="arial">Arial</h3>

<ul class="arial">
   <li style="font-weight: 100 !important;">100 - Thin</li>
   <li style="font-weight: 200 !important;">200 - Extra Light (Ultra Light)</li>
   <li style="font-weight: 300 !important;">300 - Light</li>
   <li style="font-weight: 400 !important;">400 - Normal</li>
   <li style="font-weight: 500 !important;">500 - Medium</li>
   <li style="font-weight: 600 !important;">600 - Semi Bold (Demi Bold)</li>
   <li style="font-weight: 700 !important;">700 - Bold</li>
   <li style="font-weight: 800 !important;">800 - Extra Bold (Ultra Bold)</li>
   <li style="font-weight: 900 !important;">900 - Black (Heavy)</li>
 </ul>
 
 <p class="arial">Arial on the other hand, does not have a 100, 200, 300, 500, 700 or 900 font weight. 
 
 This is why some of the font weights on the jsfiddle page look the same.</p>

CSS

.tahoma {
  font-family: 'tahoma'
}

.arial {
  font-family: 'Arial'
}