JSFiddle - React, Tailwind, and code Playground

by jklm313

HTML

<div class="stack">
    
        <a href="#" class="btn active">one</a>
        <div class="card">a</div>
        
        <a href="#" class="btn">one</a>
        <div class="card">b</div>
        
        <a href="#" class="btn">one</a>
        <div class="card">c</div>
        
        <a href="#" class="btn">one</a>
        <div class="card">d</div>

</div>

CSS

.stack {
    width:300px;
    height:400px;
    border: 1px dashed #222;
    margin: auto;
    position: relative;
    }
    .btn {
        float: left;
        clear: left;
        height: 25%;
        width: 100px;
        background: skyblue;
    box-sizing:border-box;
        }
.btn+.card+.btn {border-top: 1px dashed red}
    .card {
        position: absolute;
        right: 0;
        height: 400px;
        width: 200px;
        background: yellow;
    line-height: 400px;
    text-align: center;
    font-family: sans-serif;
    font-size: 2em;
    opacity: 0;
    top:-9999px;
}

.active+.card{
background: red;    
    opacity: 1;
    top: 0;
}

.btn:nth-of-type(3)~.active+.card {
background: green
}

JavaScript

$('a').click(function() {
    $('.active').removeClass('active');
    $(this).addClass("active");
});