В приведённом примере самый сложный момент – обрезание внутренним краем цифры «0» красной плашки для рублей, которая правее перекрывает ту же цифру. Этот же эффект с другой цифрой, например, «5», не сработает. Поэтому это дизайн, картинка, а не вёрстка.
Можно сделать через
две перекрывающиеся плашки:
- короткую, под первой цифрой «0», которая заканчивается точно под цифрой, не вылезая левее (в этом месте наиболее вероятно ошибиться и накосячить).
- длинную, которая начинается где-то с середины первого нуля поверх первой плашки, точно той же высоты, и идет поверх нулей далеко направо.
Ну и поверх неё текст «рублей».
Надёжнее и качественнее всего делать это как картинку. Растровую, или лучше векторную в SVG. Причём цифры не текстом, а кривыми.
Вёрсткой с абсолютным позиционированием, указанием
line-height и, в идеале, подгрузкой шрифта – тоже решается, но есть риск, что где-то что-то съедет.
сейчас хотелось бы как в оригинале поверх картинки сделать полупрозрачный цвет, чтобы картинка оставался, но и оттенок оставался 
