JSFiddle - React, Tailwind, and code Playground

by Tenderfeel

HTML

<div id="playground">
<a id="card-1" href="#card-1"></a>
<input type="text" id="card-2" />
<div class="fx" data-id="card-1"></div>
<div class="fx" data-id="card-2"></div>

<a id="card-3" href="#card-3"></a>
<input type="text" id="card-4" />
<div class="fx" data-id="card-3"></div>
<div class="fx" data-id="card-4"></div>

<a id="card-5" href="#card-5"></a>
<input type="text" id="card-6" />
<div class="fx" data-id="card-5"></div>
<div class="fx" data-id="card-6"></div>
    </div>

SCSS

html,body {
    margin:0;
    padding:0;
}
#playground {
    position:relative;
}

a, input, .fx {
    width:30px;
    height:50px;
    border:solid 1px black;
    display:block;
    position:absolute;
}

a:target {
    background:blue;
}

* {
    -webkit-appearance:none;
}

a,input {
    background:#efefef;
    z-index:1;
    cursor:pointer;
}
.fx {
    background:gray;
    position:absolute;
    z-index:0;
}

input {
  outline:none; 
-webkit-user-select:none;    
}
:focus{
    background:red;
}

@for $i from 1 through 6 {
#card-#{$i} {
    left:30px * $i;
}
[data-id="card-#{$i}"] {
    left:30px * $i;
}
}

#card-1:target ~ #card-2:focus~ .fx[data-id="card-1"],
#card-1:target ~ #card-2:focus~ .fx[data-id="card-2"]{
    z-index:2;
}