JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<script src="https://www.dropbox.com/s/078wncqkvf1904k/GNL.otf"></script>
<br>
<button> click</button>

<div>
    <div>
        <div class="r4">fdjklf;jdksl;afjkdls;ajfkdl;1231543251616164738290174893021</div>
    </div>
</div>

CSS

@font-face {
  font-family: "GNL";
  src: url(GNL.otf) format("opentype");
}

.r4 {
    font-family: "GNL";
    font-size: 16px;
    font-weight: 300;
}

.stuff {
    -moz-font-feature-settings:"lnum" 1, "tnum" 1; 
    -ms-font-feature-settings:"lnum" 1, "tnum" 1; 
    -o-font-feature-settings:"lnum" 1, "tnum" 1; 
    -webkit-font-feature-settings:"lnum" 1, "tnum" 1; 
    font-feature-settings:"lnum" 1, "tnum" 1;
}

.active {
    border: 1px solid #ff0000;
}

button {
    outline: none;
}

JavaScript

$("button").on("click", function(e) {
    $(".r4").toggleClass("stuff");
    $("button").toggleClass("active");
});