JSFiddle - React, Tailwind, and code Playground

HTML

<div class="numbers">000000123</div>

<div class="numbers">000051457</div>

<div class="numbers">0012345as</div>

CSS

.zero {
    border: 2px solid #333;
    border-radius: 3px;
    margin: 1px;
}
.digit {
    border: 2px solid #333;
    border-radius: 3px;
    margin: 1px;
    background: #333;
    color: #fff;
}
.numbers {
    margin:10px auto;
}

JavaScript

(function ($) {
    $.fn.borderable = function () {
        return this.each(function () {
            var digits = $(this).text();

            $(this).text('');

            var html = $.map(
            (digits + '').split(''),

            function (n) {
                return n == '0' ?
                    '<span class="zero">' + n + '</span>' :
                    '<span class="digit">' + n + '</span>';
            });

            $(this).append(html.join(''));
        });
    };
})(jQuery);

$('.numbers').borderable();