JSFiddle - React, Tailwind, and code Playground

by sandro_paganotti

HTML

<div class="cards">
    <a id="card1"></a>
    <div class="card" style="background: red">card1</div>
    <a id="card2"></a>
    <div class="card" style="background: green">card2</div>
    <a id="card3"></a>
    <div class="card" style="background: blue">card3</div>
</div>
<a href="#card1">go to card 1</a>
<a href="#card2">go to card 2</a>
<a href="#card3">go to card 3</a>

CSS

.cards{
    position: relative;
    height: 300px;
    overflow: hidden;
    border: 1px solid #666666;
}
.card{
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    width: 100%;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.5s;
    -moz-transition: -moz-transform 0.5s;
    -ms-transition: -ms-transform 0.5s;
    transition: transform 0.5s;
}
a:target + .card{
    z-index: 3;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}
a:target + .card ~ .card{
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);    
}

JavaScript

window.location.hash = 'card1';