JSFiddle - React, Tailwind, and code Playground

HTML

<div class='warp'>
    <div class='a' data-zidx="110" data-fcolor="gray">A</div>
    <div class='b' data-zidx="100" data-fcolor="green">B</div>
</div>

CSS

div.warp {
    margin: auto;
    position: realtive;
    color:white;
}
div.a {
    position: absolute;
    left: 10px;
    top: 0px;
    width: 50px;
    height: 40px;
    background-color: blue;
    color: attr(data-fcolor);
    z-index: attr(data-zidx);
}

div.b {
    position: absolute;
    left: 15px;
    top: 10px;
    width: 50px;
    height: 40px;
    background-color: red;
    color: attr(data-fcolor color);
    z-index:  attr(data-zidx integer);
}

div.b::before {
    content: attr(data-fcolor) " + ";
}