JSFiddle - React, Tailwind, and code Playground

by André Albson

HTML

<h1>Here is my Text</h1>

CSS

@import url(http://fonts.googleapis.com/css?family=Exo:100,200,300,400,500,600,700,800,900);

h1 {
    font-weight:100;
    font-size: 62px;
    font-family: Exo;
    margin:20px 10px;
    cursor:pointer;
    color: #000;
    
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

JavaScript

$(function() {

    var Text = $('h1');

    Text.click(function() {
        if(Text.css('font-weight') == '100') {
            
            Text.css({'font-weight':200});
            setTimeout(function(){ Text.css({'font-weight':300})}, 30)
            setTimeout(function(){ Text.css({'font-weight':400})}, 60)
            setTimeout(function(){ Text.css({'font-weight':500})}, 90)
            setTimeout(function(){ Text.css({'font-weight':600})},120)
            setTimeout(function(){ Text.css({'font-weight':700})},150)
            setTimeout(function(){ Text.css({'font-weight':800})},180)
            setTimeout(function(){ Text.css({'font-weight':900})},210)
        
        } else if (Text.css('font-weight') == '900') {
        
            Text.css({'font-weight':800});
            setTimeout(function(){ Text.css({'font-weight':700})}, 30)
            setTimeout(function(){ Text.css({'font-weight':600})}, 60)
            setTimeout(function(){ Text.css({'font-weight':500})}, 90)
            setTimeout(function(){ Text.css({'font-weight':400})},120)
            setTimeout(function(){ Text.css({'font-weight':300})},150)
            setTimeout(function(){ Text.css({'font-weight':200})},180)
            setTimeout(function(){ Text.css({'font-weight':100})},210)
            
        }
    });
    
});