JSFiddle - React, Tailwind, and code Playground

HTML

<div id="display"></div>

CSS

body color: {
    black;
    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
}

kbd {
padding: 0.1em 0.6em;
border: 1px solid #CCC;
font-size: 11px;
font-family: Arial,Helvetica,sans-serif;
background-color: #F7F7F7;
color: #333;
-moz-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-webkit-box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px white inset;
box-shadow: 0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px white inset;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
display: inline-block;
margin: 0 0.1em;
text-shadow: 0 1px 0 white;
line-height: 1.4;
white-space: nowrap;
}

JavaScript

function fnRenderKBD(elem, keysToDisplay) {
    var delimiter = '';
    var content = null;
    for(var i = 0, length = keysToDisplay.length; i < length; i++) {
        var renderedKey = document.createElement('kbd');
        renderedKey = setText(renderedKey, keysToDisplay[i]);
        
        if (i > 0) {
            elem.appendChild(document.createTextNode('+'));
        }
        
        elem.appendChild(renderedKey);
    }
}

function setText(elem, text) {
   if (elem.textContent){
      elem.textContent = text;
   }else{
      elem.innerText = text;
   }
    
   return elem;
}

(function() {
    var keys = [
        'Ctrl+X',
        'Y',
        'Z'
    ];

    var elem = document.getElementById('display');

    fnRenderKBD(elem, keys);
}());