JSFiddle - React, Tailwind, and code Playground

keyboard test

by Csaba Hellinger

HTML

<div class="keyboard">
    <div class="row">
        <div class="key">A</div>
        <div class="key">B</div>
        <div class="key">C</div>
        <div class="key">D</div>    
    </div>
    <div class="row">
        <div class="key">E</div>
        <div class="key colspan2">Space</div>
        <div class="key">F</div>    
    </div>    
</div>

CSS

body {
    margin: 0;
    background-color: skyblue;
}

.keyboard {
    display: inline-block;
    background: pink;
    padding: 5px 0 0 5px;
    box-sizing: content-box;
    font-size: 0;
}

.row {
}

.key {
    display: inline-block;
    background: gray;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    font-size: 1rem;
    margin: 0 5px 5px 0;
}

.colspan2 {
    width: 65px;
}