JSFiddle - React, Tailwind, and code Playground

CSS

span {
    background: #ccc;
    display: block;
    float: left; 
    margin: 2px;
    width: 30px;
    height: 20px;
    border: 1px solid #000;
    text-align: center;font-family: arial;
}
.fixed {
    background: red;
}

JavaScript

var sizesJSON = '{"7":["9149","9139","10455","17208"],"7.5":["9140","9150","10456","17209"],"8":["2684","9141","10457","17210"],"8.5":["9142","10444","10458","17211"],"9":["2685","9143","10459","17212"],"9.5":["10443","9144","10460","17213"]}';

var sizes = $H(JSON.decode(sizesJSON.replace(/\./g, "_")));

sizes.each(function(val, key) {
    new Element("span").set("html", key).inject(document.body);
});

new Element("br", {
    styles: {
        clear: "both"
    }
}).inject(document.body);
var sizes = $H(JSON.decode(sizesJSON));

sizes.each(function(val, key) {
    new Element("span").set("html", key).inject(document.body);
});

new Element("br", {
    styles: {
        clear: "both"
    }
}).inject(document.body);

var sizesJSON = '{"s7":["9149","9139","10455","17208"],"s7.5":["9140","9150","10456","17209"],"s8":["2684","9141","10457","17210"],"s8.5":["9142","10444","10458","17211"],"s9":["2685","9143","10459","17212"],"s9.5":["10443","9144","10460","17213"]}';

var sizes = $H(JSON.decode(sizesJSON));

sizes.each(function(val, key) {
    new Element("span").addClass("fixed").set("html", key).inject(document.body);
});