JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.crafty-modules.com/crafty-DEBUG.js"></script>

JavaScript

console.clear()
Crafty.init(320,320);
Crafty.background('rgb(0,0,0)'); 

Crafty.sprite(22, "http://garrickcampsey.com/media/menuSprites.png", {
    menuSprites: [0, 0],
});

var menuMessage = function(message)
{
    var fullScreenEntity = Crafty.e("2D, DOM, Sprite, menuSprites");
        fullScreenEntity.sprite(3, 3, 308, 308);
        fullScreenEntity.attr({w:308, h:308, x:5, y:5});
    var bkgZ = fullScreenEntity.z
        
    //Create the title text boxes
    var talkTitle = Crafty.e("2D, DOM, Text")
        talkTitle.attr({x:fullScreenEntity.x+35, y:fullScreenEntity.y+30, w:240, h:300, z:bkgZ+1  })
        talkTitle.css({"font": "11pt Arial", "color": "#FFF", "text-align": "left"});
    //Fill out the text
    talkTitle.text(""+message) 
    
    //Define the ok btn
    var okBkg = Crafty.e("2D, DOM, Sprite, menuSprites");
    var okTxt = Crafty.e("2D, DOM, Sprite, menuSprites");
        okBkg.sprite(0, 0, 110, 44);
        okBkg.attr({w:110, h:44, x:fullScreenEntity.x+100, y:fullScreenEntity.y+235, z:bkgZ+1  });
        okTxt.sprite(0, 6, 44, 22);
        okTxt.attr({w:44, h:22, x:okBkg.x+33, y:okBkg.y+11, z:bkgZ+2, alpha:0.7  });
    var okClick = Crafty.e("2D, DOM, Mouse")
        okClick.attr({w:110, h:44, x:okBkg.x, y:okBkg.y, z:bkgZ+3  });
    
    okClick.bind("MouseOver", function(e)  {  okTxt.attr({ alpha:1.0 });  });
    okClick.bind("MouseOut", function(e)  {  okTxt.attr({ alpha:0.7 });  });
}
menuMessage("This is a test of a menu that accepts a passed string parameter to be displayed to the user.");