<div class="keyboard">
<div class="row"><div class="key">
<span class="Backquote on">
<span class="case down">ё</span>
<span class="case up">Ё</span>
</span>
<span class="Backquote off">
<span class="case down">`</span>
<span class="case up">~</span>
</span>
</div><div class="key">
<span class="Digit1 on">
<span class="case down">1</span>
<span class="case up">!</span>
</span>
<span class="Digit1 off">
<span class="case down">1</span>
<span class="case up">!</span>
</span>
</div><div class="key">
<span class="Digit2 on">
<span class="case down">2</span>
<span class="case up">"</span>
</span>
<span class="Digit2 off">
<span class="case down">2</span>
<span class="case up">@</span>
</span>
</div><div class="key">
<span class="Digit3 on">
<span class="case down">3</span>
<span class="case up">№</span>
</span>
<span class="Digit3 off">
<span class="case down">3</span>
<span class="case up">#</span>
</span>
</div><div class="key">
<span class="Digit4 on">
<span class="case down">4</span>
<span class="case up">;</span>
</span>
<span class="Digit4 off">
<span class="case down">4</span>
<span class="case up">$</span>
</span>
</div><div class="key">
<span class="Digit5 on">
<span class="case down">5</span>
<span class="case up">%</span>
</span>
<span class="Digit5 off">
<span class="case down">5</span>
<span class="case up">%</span>
</span>
</div><div class="key">
<span class="Digit6 on">
<span class="case down">6</span>
<span class="case up">:</span>
</span>
<span class="Digit6 off">
<span class="case down">6</span>
<span class="case up">^</span>
</span>
</div><div class="key">
<span class="Digit7 on">
<span class="case down">7</span>
<span class="case up">?</span>
</span>
<span class="Digit7 off">
<span class="case down">7</span>
<span class="case up">&</span>
</span>
</div><div class="key">
<span class="Digit8 on">
<span class="case down">8</span>
<span class="case up">*</span>
</span>
<span class="Digit8 off">
<span class="case down">8</span>
<span class="case up">*</span>
</span>
</div><div class="key">
<span class="Digit9 on">
<span class="case down">9</span>
<span class="case up">(</span>
</span>
<span class="Digit9 off">
<span class="case down">9</span>
<span class="case up">(</span>
</span>
</div><div class="key">
<span class="Digit0 on">
<span class="case down">0</span>
<span class="case up">)</span>
</span>
<span class="Digit0 off">
<span class="case down">0</span>
<span class="case up">)</span>
</span>
</div><div class="key">
<span class="Minus on">
<span class="case down">-</span>
<span class="case up">_</span>
</span>
<span class="Minus off">
<span class="case down">-</span>
<span class="case up">_</span>
</span>
</div><div class="key">
<span class="Equal on">
<span class="case down">=</span>
<span class="case up">+</span>
</span>
<span class="Equal off">
<span class="case down">=</span>
<span class="case up">+</span>
</span>
</div><div class="key backspace">
<span class="Backspace on">
<span class="case down">Backspace</span>
<span class="case up">Backspace</span>
</span>
<span class="Backspace off">
<span class="case down">Backspace</span>
<span class="case up">Backspace</span>
</span>
</div>
</div>
и так далее
const keys = [
[
{ on: [ 'ё', 'Ё' ], off: [ '`', '~' ], name: 'Backquote' },
{ on: [ '1', '!' ], off: [ '1', '!' ], name: 'Digit1' },
...
],
...
];
document.querySelector('.keyboard').innerHTML = keys.map(row => `
<div class="row">${row.map(n => `
<div class="key">
<span class="${n.name} on">
<span class="case down">${n.on[0]}</span>
<span class="case up">${n.on[1]}</span>
</span>
<span class="${n.name} off">
<span class="case down">${n.off[0]}</span>
<span class="case up">${n.off[1]}</span>
</span>
</div>`).join('')}
</div>`).join('');