Ясен пень, что с помощью библиотеки Three.js (threejs.org). Видно ведь, что эти коробки – модели.

Можно использовать чистый PHP, а можно использовать библиотеки, фреймворки и CMS. Можно хранить маршруты статично в файле, а можно динамично в БД. Можно HTML-контент выводить строками в коде, а можно писать код между HTML-контентом. Можно придерживаться подхода MVC, а можно не придерживаться. Можно подключать JS-скрипты статично в HTML-контенте, а можно динамично в других JS-скриптах. За реальный проект можно считать сайт крупнейшего в стране интернет-магазина, а можно считать и интернет-магазин Танечки, сделанный на коленке.

Столько неопределённости и столько желания, чтобы кто-то дал ответы на все вопросы. Увы, оно так не работает. В 21 веке можно воспользоваться поисковиком, а чтобы быть как все, в тренде, можно воспользоваться ChatGPT.

.container {
     border: 1px solid red;
     width: 200px;
     font-weight: 700;
     font-size: 24px;
     padding: 0 0 5px 0;
     background: gray;
}

.container * {
     display: inline;
}

.container span {
     margin-right: 6px;
     width: 32px;
     height: 24px;
     background: #FFFFFF;
     border-radius: 10px;
     font-size: 20px;
     align-items: center;
     justify-content: center;
     color: #000000;
     display: inline-flex;
}

А вообще, пора начинать сортировать селекторы и свойства хотя бы по алфавиту, а не делать из всего этого одну большую помойку.