JSFiddle - React, Tailwind, and code Playground

by lasha

HTML

<div id="recomm_nav">
    <div id="recomm_content">
        <span class="recomm_item active">Name of Network</span>
        <span class="recomm_item">Name of Network</span>
        <span class="recomm_item">Name of Network</span>
        <span class="recomm_item">Name of Network</span>
        <span class="recomm_item">Name of Network</span>
        <span class="recomm_item">Name of Network</span>
        <span class="recomm_item">Name of Network</span>
        
        <span id="recomm_arrow"></span>
    </div>

    <div id="recomm_bottomBG"></div>
</div>

<div id="recomm_slides">
    <div class="recomm_slide active">Content 1</div>
    <div class="recomm_slide">Content 2</div>
    <div class="recomm_slide">Content 3</div>
    <div class="recomm_slide">Content 4</div>
</div>

CSS

#recomm_nav {
    width: 200px;
    float: left;
}
#recomm_content {
    border-right: 4px solid #CCEEFF;
    padding-top: 30px;
    position: relative;
}
.recomm_item {
    display:block;
    line-height: 2em;
    border-top: 1px solid #000;
    position: relative;
    z-index: 10;
}
.recomm_item:first-child {
    border-top: 0;
    background-image: none;
}
#recomm_bottomBG {
    height: 100px;
    margin-top: -45px;
    border-right: 4px solid #CC33FF;
    position: relative;
}
#recomm_arrow {
    position: absolute;
    height: 35px;
    width: 35px;
    background: #000;
    top: 0; right: -4px;
    z-index: 11;
}

#recomm_slides {
    float: left;
    width: 200px;
    border: 1px solid #000;
    position: relative;
    left: 10px;
    height: 150px;
}

.recomm_slide {
    display: none;
    position: absolute;
}

.recomm_slide.active {
    display: block;
}

JavaScript

$('#recomm_arrow').css("top", $('.recomm_item.active').position().top);

$('.recomm_item').click(function(e) {
    var $this = $(this);
    var currentItemPos = $this.position();
    
    changeContent( $this.index() );
    
    $('#recomm_arrow').animate({top: currentItemPos.top}, 300);
});

var recomm_slides = $('.recomm_slide');
function changeContent(num) {
    console.log("chose: ", num);
    recomm_slides.fadeOut();
    recomm_slides.eq(num).fadeIn(300);
}