JSFiddle - React, Tailwind, and code Playground

HTML

<html>  
    <head>  
        <title>WEB cleaver</title>  
        <script type="text/javascript" src="js/raphascript.js"></script> 
        <script type="text/javascript" src="js/raphael-2.1.js"></script>  
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>  
        <style type="text/css">  
            #canvas_container {  
                width: 1055px;
                height:1015px; 
                border: 1px solid #aaa;
            }  
        </style>  
    </head>  
    <body>  
        <div id="canvas_container"></div>  
    </body>  
</html>

CSS

body {
    background-color :  grey  ;
}

JavaScript

window.onload = function() {
    var paper = new Raphael(document.getElementById('canvas_container'), 800, 200);
    var marginbox = 40;
    var margininter = 10;
    var posy = 10;
    var posx = 60;
    var menuitem = [];
    var menuwidth = [];
    var menuxanim = [];
    var i;
    
    var menutextattr = {
        font: '12px Verdana',
        'font-size': 12,
        'text-anchor': 'start',
        cursor: 'pointer'
    };
    var menuattr = {
        gradient: '90-#526c7a-#64a0c1',
        opacity: 1,
        cursor: 'pointer'
    };
    // just change the textmenu fields for complete dynamic animations change
    var textmenu = {
        "1": "go to google",
        "2": "yahoo",
        "3": "I like Apple better",
        "4": "IBM"
    };
    var linkmenu = {
        "1": {
            href: "http://www.google.com",
            target: "_blank"
        },
        "2": {
            href: "http://www.yahoo.com",
            target: "_blank"
        },
        "3": {
            href: "http://www.apple.com",
            target: "_blank"
        },
        "4": {
            href: "http://www.ibm.com",
            target: "_blank"
        }
    };


    for (var i = 1; i <= 4; i += 1) {
        texttemp = paper.text(posx, posy, textmenu[i]).attr(menutextattr).hide();
        textwidth = texttemp.getBBox().width;
        menuwidth = textwidth + marginbox;
        menuxanim[i] = menuwidth / 4 + margininter
        var menureftemp = paper.rect(posx, posy, menuwidth, 20, 5).attr(menuattr).hide();
        menux = menureftemp.getBBox().width / 2;
        menuy = menureftemp.getBBox().height / 2;
        menuinterpos = menux + menuwidth + 2
        menuitem[i] = paper.set();
        menuitem[i].push(
        paper.rect(posx, posy, menuwidth, 20, 5).attr(menuattr).attr(linkmenu[i]), paper.text(posx + marginbox / 2, posy + menuy, textmenu[i]).attr(menutextattr).attr(linkmenu[i]));
        posx = posx + menux * 2 + margininter
    }
    menuitem[1].hover(

   ...