Создайте <div> пользовательских форм для разработки RFM-сегментации

Итак, сегментация RFM выглядит так: https://www.putler.com/wp-content/uploads/2017/05/rfm-grid.png

Я хочу воссоздать его в html, где каждый блок представляет собой один сегмент. Я пытался сделать это как блок [1,1], но так как я хочу создать эффект наведения. Несколько блоков должны быть объединены вместе, чтобы получить один общий эффект.

Я пытался сделать это с помощью div, но не смог создать эффект наведения. https://i.imgur.com/S51lu0p.png

Вот код реакции

                                  <div class = "rfmBox">
                <div class = "flex-container">
                    <div>5</div>
                    <div style = {{ backgroundColor: "#FFC9CE" }} />
                    <div style = {{ backgroundColor: "#FFEDB7" }} />
                    <div style = {{ backgroundColor: "#E7F7BA" }} />
                    <div style = {{ backgroundColor: "#E7F7BA" }} />
                    <div style = {{ backgroundColor: "#E0ECBC" }} />
                </div>
                <div class = "flex-container">
                    <div>4</div>
                    <div style = {{ backgroundColor: "#FFEDB7" }} />
                    <div style = {{ backgroundColor: "#FFEDB7" }} />
                    <div style = {{ backgroundColor: "#E7F7BA" }} />
                    <div style = {{ backgroundColor: "#E7F7BA" }} />
                    <div style = {{ backgroundColor: "#E7F7BA" }} />
                </div>
                <div class = "flex-container">
                    <div>3</div>
                    <div style = {{ backgroundColor: "#FFEDB7" }} />
                    <div style = {{ backgroundColor: "#FFEDB7" }} />
                    <div style = {{ backgroundColor: "#9AF4E7" }} />
                    <div style = {{ backgroundColor: "#C1FFFA" }} />
                    <div style = {{ backgroundColor: "#C1FFFA" }} />
                </div>
                <div class = "flex-container">
                    <div>2</div>
                    <div style = {{ backgroundColor: "#CFD8E4" }} />
                    <div style = {{ backgroundColor: "#F1F2F4" }} />
                    <div style = {{ backgroundColor: "#B9E0E7" }} />
                    <div style = {{ backgroundColor: "#C1FFFA" }} />
                    <div style = {{ backgroundColor: "#C1FFFA" }} />
                </div>
                <div class = "flex-container">
                    <div>1</div>
                    <div style = {{ backgroundColor: "#CFD8E4" }} />
                    <div style = {{ backgroundColor: "#CFD8E4" }} />
                    <div style = {{ backgroundColor: "#B9E0E7" }} />
                    <div style = {{ backgroundColor: "#C0ECFD" }} />
                    <div style = {{ backgroundColor: "#FFEEEE" }} />
                </div>

                <div class = "flex-container">
                    <div />
                    <div>1</div>
                    <div>2</div>
                    <div>3</div>
                    <div>4</div>
                    <div>5</div>
                </div>
            </div>