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;
}