JSFiddle - React, Tailwind, and code Playground

by rulin shyu

HTML

<div class="div1"></div>
<div class="div2"></div>

CSS

:root {
    --text: attr(class);
    --div-size: 100px;
    --main-color: #c06;
    --linear-gradient: linear-gradient(to top, var(--main-color), transparent);
}

div {
    display: inline-block;
    width: var(--div-size);
    height: var(--div-size);
    background: var(--div-background-color, #000);
}

.div1 { --div-background-color: var(--linear-gradient); }
.div2 { --div-background-color: var(--undefined-color); }



div::after {
    content: var(--text);
    display: block;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: var(--div-size);
}

div.div2::after { --text: "yoyoyo"; }