Цветные прямоугольнички это псевдоэлементы с абсолютом и z-index. Хотя можно и гридами.
И сами блоки в которых заголовок нужного уровня и текст. Смещать их можно отступами или сеткой грида или как-нибудь еще.
Всё это сложено в большой, например, грид.
С чем именно возникли сложности? Покажите ваши попытки на jsfiddle.net