JSFiddle - React, Tailwind, and code Playground

by Marco Iamonte

HTML

<div id="happy">
    
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Coda:800,400);

body {
    background: #10A7E5;
}

#happy {
    position: absolute;
    width: 100%;
    height: auto;
    padding: 1%;
    font-family: 'Coda', cursive;
}

.happYFont {
    color: #fff;
    font-family: 'Coda', cursive;
}

JavaScript

var ManuelCheminod = function (age, div, happyString) {
    this.age = age;
    this.div = div;
    this.HappyString = happyString;
};

var happyString = "<span class=\"happYFont\" style=\"font-size: @fontSize%\">Haaappy Birthday to YAAAAAAAAH, <br /></span>";
var MCH = new ManuelCheminod(34, "#happy", happyString);

for (var i = 1; i <= MCH.age; i++ ) {
    $(MCH.div).append(MCH.HappyString.replace("@fontSize",i*10));
}

$(MCH.div).append("<span class=\"happYFont\" style=\"font-size: 15vw\">Haaappy Birthday to YAAAAAAAA!!!!! <br /></span><br /><span class=\"happYFont\"><u><b>By Cognato & (array) All!</b></u></span>");