JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flag-holder">
    <div class="flag-spacer"></div>
    <div class="flag-wrapper">
        <div class="flag tan">
            <div class="chord-notes-container chord-tan">
                <div class="note-color note-F-sharp">
                    <div class="note-wrapper note-F-sharp note-F-sharp4">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">F♯</span>
                        </div>
                    </div>
                </div>
                <div class="note-color note-A">
                    <div class="note-wrapper note-A-sharp note-A4">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">A</span>
                        </div>
                    </div>
                </div>
                <div class="note-color note-D">
                    <div class="note-wrapper note-D note-D5">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">D</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="flag-wrapper">
        <div class="flag gray">
            <div class="chord-notes-container chord-gray">
                <div class="note-color note-C-sharp">
                    <div class="note-wrapper note-C-sharp note-C-sharp4">
                        <div class="note"></div>
                        <div class="note-text">
                            <span class="note-text-span">C♯</span>
                        </div>
                    </div>
                </div>
                <div class="note-color note-E">
                    <div class="note-wrapper note-C-sharp note-E4">
                        <div class="note"></div>
                       ...

SCSS

body {
    background-color: #212121;
}

div.flag-spacer {
    width: 100%;
    flex-grow: 1;
}

div.flag-holder {
    width: 80dvw;
    height: 80dvh;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: stretch;
}

div.flag-wrapper {
    width: calc(33% - 0.6em);
    margin-left: 0.25em;
    margin-right: 0.25em;
    display: flex;
    max-height: 40vh;
}

div.flag {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: relative;
    border: 1px solid black;
}

div.flag.gray {
    background: gray;
}

div.flag.tan {
    background: #F0E68C;
}

div.chord-notes-container {
    color: #000;
    font-weight: bold;
    justify-content: space-around;
    align-items: center;
    width: calc(min(100%, 15em));
    height: calc(min(10rem, 95%));
}

div.chord-notes-container {
    display: flex;
    user-select: none;

    div.note-color {
        width: 2em;
        height: 100%;
        display: flex;
        flex-grow: 1;
        align-items: center;
        justify-content: center;
        position: relative;
        border-top: 1px solid;
        border-bottom: 1px solid;

        &.note-A {
            background-color: pink;
        }

        &.note-B {
            background-color: purple;
        }

        &.note-C {
            background-color: red;
        }

        &.note-C-sharp {
            background-color: brown;
        }

        &.note-D {
            background-color: orange;
        }

        &.note-E {
            background-color: yellow;
        }

        &.note-F {
            background-color: green;
        }

        &.note-F-sharp {
            background-color: #87CEFA;
        }

        &.note-G {
            background-color: blue;
        }


        // This makes the notes appear diagonal, from bottom left to top right
        &:nth-child(1) {
            align-items: flex-end;
           ...