JSFiddle - React, Tailwind, and code Playground

by Slezi

HTML

<div class="manual-frame-size">
    <button class="normal-button manual-first"></button>
    <button class="normal-button manual-second"></button>
    <button class="normal-button manual-third"></button>
    <button class="normal-button manual-fourth"></button>
    <button class="normal-button manual-fifth"></button>
    <button class="normal-button manual-sixth"></button>
    <button class="normal-button manual-seventh"></button>

    <button class="es-button ais-b"></button>
    <button class="es-button cis-d"></button>
    <button class="es-button dis-es"></button>
    <button class="es-button fis-ges"></button>
    <button class="es-button gis-cis"></button>
</div>

CSS

.manual-frame-size {
        width: 280px;
        height: 200px;
        position: relative;
        margin: 0;
        padding: 0;
    }

    .normal-button {
        height: 100%;
        width: 14.2%;
        overflow: visible;
        position: absolute;
        margin: 0;
        padding: 0;
        background-color: white;
        border-style: solid;
        border-color: gray;
        border-width: thin;
    }

    .es-button {
        position: absolute;
        height: 70%;
        width: 11%;
        margin: 0;
        padding: 0;
        background-color: black;
        border: none;
    }
    
    .manual-first {
      left: 0px;
    }
    
    .manual-second {
      left: 14.2%;
    }
    
    .manual-third {
      left: 28.4%;
    }
    
    .manual-fourth {
      left: 42.6%;
    }
    
    .manual-fifth {
      left: 56.8%;
    }
    
    .manual-sixth {
      left: 71%;
    }
    
    .manual-seventh{
      left: 85.2%;
    }
    
    .ais-b {
        left: 7.05%;
    }
    .cis-d {
        left: 21.25%;
    }
    .dis-es {
        left: 50%;
    }
    .fis-ges {
        left: 65.2%;
    }
    .gis-cis {
        left: 80%;
    }