JSFiddle - React, Tailwind, and code Playground

by mariomc

HTML

<p>Check the browser network panel as you interact.</p>
<a href="http://ink.sapo.pt" target="_blank">Click me!</a>

<br>
    
<button >Click me!</button>
<br>
<input id="kpi1" type="radio" value="" />
<label for="kpi1">Click me</label>
<br>
<button class="multiple">Multiple KPIs</button>

CSS

*:after {
    /* Uncomment the lines below to hide the tracking images */
    /*
    visibility: hidden;
    position: absolute;
    overflow: hidden;
    clip: rect(0 0 0 0);
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    */
}
a:hover:active:after {
    content: url(http://lorempixel.com/20/20/cats/1/?kpi1);
}
button:active:focus:after {
    content: url(http://lorempixel.com/20/20/cats/1/?kpi3);
}
input:checked:after {
    content: url(http://lorempixel.com/20/20/cats/1/?kpi4);
}
.multiple:active:focus:after {
    content:'TESTING';
    background: url(http://lorempixel.com/20/20/cats/1/?kpi5) top left no-repeat, url(http://lorempixel.com/20/20/cats/2/?kpi6) top right no-repeat;
}