JSFiddle - React, Tailwind, and code Playground

by Chris Sullins

HTML

<p><a href="#" class="toggle">Use <span class="state">text</span> figures</a></p>

<table>
    <tr><td>0.57</td><td>0.56</td><td>0.22</td></tr>
    <tr><td>0.11</td><td>0.67</td><td>0.68</td></tr>
    <tr><td>0.49</td><td>0.89</td><td>0.69</td></tr>
    <tr><td>0.17</td><td>0.97</td><td>0.62</td></tr>
    <tr><td>1.00</td><td>0.92</td><td>0.78</td></tr>
    <tr><td>0.24</td><td>0.15</td><td>0.77</td></tr>
    <tr><td>0.64</td><td>0.29</td><td>0.28</td></tr>
    <tr><td>0.42</td><td>0.36</td><td>0.93</td></tr>
    <tr><td>0.63</td><td>0.05</td><td>0.18</td></tr>
    <tr><td>0.72</td><td>0.13</td><td>0.73</td></tr>
    <tr><td>0.52</td><td>0.65</td><td>0.33</td></tr>
    <tr><td>0.38</td><td>0.59</td><td>0.35</td></tr>
    <tr><td>0.80</td><td>0.88</td><td>0.95</td></tr>
</table>

CSS

body { font-family: Minion Pro; }
p { margin-bottom: 1em; }
td { padding-right: 1em; }

.text-figures {
    -moz-font-feature-settings: "onum=1";
    -webkit-font-feature-settings: "onum=1";
    font-feature-settings: "onum=1";
}

JavaScript

$(function() {
    $('.toggle').click(function() {
        var target = $(document.body), cls = 'text-figures';
        target.toggleClass(cls);
        $(this).find('.state').text(target.hasClass(cls) ? 'lining' : 'text');
        return false;
    });
});