JSFiddle - React, Tailwind, and code Playground

HTML

<kbm-container>
    <kbm-block>7</kbm-block>
    <kbm-block>8</kbm-block>
    <kbm-block>9</kbm-block>
    <kbm-block>4</kbm-block>
    <kbm-block>5</kbm-block>
    <kbm-block>6</kbm-block>
    <kbm-block>1</kbm-block>
    <kbm-block>2</kbm-block>
    <kbm-block>3</kbm-block>
    <kbm-block zero="">0</kbm-block>
</kbm-container>

CSS

kbm-container {
    width: 350px;
    display: inline-block;
}

kbm-block {
    display: inline-block;
    width: 80px;
    height: 80px;
    margin: 5px;
    padding-top: 22px; /* pour centrer verticalement arbitrairement */
    background: #3b65a7;
    text-align: center;
    font-size: 50px;
    color: white;
    border-radius: 10px;
}

kbm-block[zero] {
    width: 275px;
}

kbm-block:active {
  background: #123456;
}