JSFiddle - React, Tailwind, and code Playground

by HerrSerker

HTML

<script src="http://fonts.googleapis.com/css?family=Cutive+Mono"></script>
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
  
<div class="cutive_block">
    E| -7/9-7---7/9-6---7/9-------------7/9-7---7/9-6---7/9----------- |
</div>
<div class="cutive_block">
    B| -7/9-7---7/9-6---7/9-9-----------7/9-7---7/9-6---7/9-9---9-9--- |
</div>
<div class="cutive_block">
    G| ---------------------8---8/9-------------------------8---8-8/9- |
</div>
<div class="cutive_block">
    D| -----------------------------9~-------------------------------- |
</div>
<div class="cutive_block">
    A| --------------------------------------------------------------- |
</div>
<div class="cutive_block">
    E| --------------------------------------------------------------- |
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Cutive+Mono);

.cutive_block {
    font-family: 'Cutive Mono', Courier, monospace;
}

.monospace_block {
    font-family: monospace;
}