JSFiddle - React, Tailwind, and code Playground

by JakobJingleheimer

HTML

<svg class="sev-defs">
    <linearGradient id="text-gradient" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" />
        <stop offset="68%"/>
    </linearGradient>
</svg>

<ul class="list-inline">
    <li><svg class="link"><a xlink="#!/foo"><text y="0.9em">Foo</text></a></svg></li>
</ul>

CSS

body {
    background-color: #333;
    padding: 20px;
}

.sev-defs {
    height: 0;
    width: 0;
}

svg #text-gradient stop:first-child {
    stop-color: #ffffff;
    stop-opacity: 1;
}
svg #text-gradient stop:last-child {
    stop-color: #d9ff8a;
    stop-opacity: 1;
}

svg {
    font-size: 80px;
    height: 1em;
    width: 100%;
}

svg, .list-justified {
    display: inline-block;
}
.list-justified {
    width: 100%;
}
.list-justified li {
    display: table-cell;
    vertical-align: middle;
    width: 1%;
}

svg a text {
    fill: url(#text-gradient);
}