A simple framework tiers-list using a D2 Declarative Diagram grid layout (https://d2lang.com/tour/grid-diagrams)

tiers-list.d2

classes: {
  NONE: {style.opacity: 0}
  # EMPTY: {style.fill: "#162a41"; style.stroke: "#162a41"; style.stroke-width: 0; width: 100; height: 100}
  EMPTY: {style.fill: "#f6f6f6"; style.stroke: "#162a41"; style.stroke-width: 0; width: 100; height: 100}
  ITEM: {style.fill: "white"; style.stroke: "#162a41"; style.stroke-width: 2; width: 100; height: 100}

  RED: {style.fill: "#d14d28"; style.stroke-width: 0}
  ORANGE: {style.fill: "#ed9301"; style.stroke-width: 0}
  YELLOW: {style.fill: "#f5df65"; style.stroke-width: 0}
  GREEN: {style.fill: "#2b9464"; style.stroke-width: 0}
}

# Grid oriented in rows

# Global style (choose black or white)
style.fill: white
grid-rows: 4
grid-columns: 10
grid-gap: 5

# S Tiers list 
1-1: "S" {class: RED}
1-2: "React" {class: ITEM; icon: https://img.icons8.com/?size=50&id=bzf0DqjXFHIW&format=png&color=000000}
1-3: "Vue" {class: ITEM; icon: https://img.icons8.com/?size=50&id=rY6agKizO9eb&format=png&color=000000}
1-4: "" {class: EMPTY}
1-5: "" {class: EMPTY}
1-6: "" {class: EMPTY}
1-7: "" {class: EMPTY}
1-8: "" {class: EMPTY}
1-9: "" {class: EMPTY}
1-10: "" {class: EMPTY}

# A Tiers list 
2-1: "A" {class: ORANGE}
2-2: "Angular" {class: ITEM; icon: https://img.icons8.com/?size=50&id=6SWtW8hxZWSo&format=png&color=000000}
2-3: "" {class: EMPTY}
2-4: "" {class: EMPTY}
2-5: "" {class: EMPTY}
2-6: "" {class: EMPTY}
2-7: "" {class: EMPTY}
2-8: "" {class: EMPTY}
2-9: "" {class: EMPTY}
2-10: "" {class: EMPTY}

# B Tiers list 
3-1: "B" {class: YELLOW}
3-2: "Another" {class: ITEM; icon: https://img.icons8.com/?size=100&id=m5SoRFpjG9DK&format=png&color=000000}
3-3: "" {class: EMPTY}
3-4: "" {class: EMPTY}
3-5: "" {class: EMPTY}
3-6: "" {class: EMPTY}
3-7: "" {class: EMPTY}
3-8: "" {class: EMPTY}
3-9: "" {class: EMPTY}
3-10: "" {class: EMPTY}

# C Tiers list 
4-1: "C" {class: GREEN}
4-2: "JQuery" {class: ITEM; icon: https://img.icons8.com/?size=50&id=40253&format=png&color=000000}
4-3: "" {class: EMPTY}
4-4: "" {class: EMPTY}
4-5: "" {class: EMPTY}
4-6: "" {class: EMPTY}
4-7: "" {class: EMPTY}
4-8: "" {class: EMPTY}
4-9: "" {class: EMPTY}
4-10: "" {class: EMPTY}

tiers-list.md

D2 Declarative Diagram Tiers list

Usage

Use D2 Playground to modify it

Result

You can check the result online using Kroki.io service