JSFiddle - React, Tailwind, and code Playground

HTML

<div class="album_list">
    <div class="inner">
        
        <div class="album_row tabs">
            <a class="album_item tab_trigger" data-tab="album-1" href="#">
                <img src="http://placehold.it/90x50" alt="">
            </a>
            <a class="album_item tab_trigger" data-tab="album-1" href="#">
                <img src="http://placehold.it/90x50" alt="">
            </a>
            <a class="album_item tab_trigger" data-tab="album-1" href="#">
                <img src="http://placehold.it/90x50" alt="">
            </a>
            <a class="album_item tab_trigger" data-tab="album-1" href="#">
                <img src="http://placehold.it/90x50" alt="">
            </a>
        </div>
        <div class="album_row tabs">
            <a class="album_item tab_trigger" data-tab="album-1" href="#">
                <img src="http://placehold.it/90x50" alt="">
            </a>
            <a class="album_item tab_trigger" data-tab="album-1" href="#">
                <img src="http://placehold.it/90x50" alt="">
            </a>
            <a class="album_item tab_trigger" data-tab="album-1" href="#">
                <img src="http://placehold.it/90x50" alt="">
            </a>
            <a class="album_item tab_trigger" data-tab="album-1" href="#">
                <img src="http://placehold.it/90x50" alt="">
            </a>
        </div>
        <div class="album_row tabs">
            <a class="album_item tab_trigger" data-tab="album-1" href="#">
                <img src="http://placehold.it/90x50" alt="">
            </a>
            <a class="album_item tab_trigger" data-tab="album-1" href="#">
                <img src="http://placehold.it/90x50" alt="">
            </a>
            <a class="album_item tab_trigger" data-tab="album-1" href="#">
                <img src="http://placehold.it/90x50" alt="">
            </a>
            <a class="album_item tab_trigger" data-tab="album-1" href="#">
                <img...

CSS

.album_list {
    background-color: #999;
    padding: 20px 0;
}
.inner {
    border: 1px solid #fff;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 400px;
    padding: 20px 12px;
    position: relative;
    width: 100%;
    text-align: center;
}
.album_row {
    overflow: hidden;
}
.album_item {
    float: left;
    margin: 0 0.5%;
    width: 24%;
}
.photo_list {
    background-color: #F94545;
    display: none;
    margin: 20px 0 40px;
    position: absolute;
    height: 150px;
    width: 100%;
    text-align: center;
}

JavaScript

$(".photo_list").hide();
 
    $('.album_list .tab_trigger').on('click',function(e) {
        e.preventDefault();
		var coverPos = Math.round($(this).parent().offset().top),
			coverHeight = $(this).outerHeight(true);


        $('.photo_list').hide();
        $('.album_list .tab_trigger').attr('id',''); 
        $(this).attr('id','current'); 
        var tabCont = $('#' + $(this).attr('data-tab'));

        var tabHeight = tabCont.outerHeight(true);

		$('.album_row').css('margin-bottom', 0);
		$(this).parent().css('margin-bottom', tabHeight);

        $('#' + $(this).attr('data-tab')).css('top',coverPos + coverHeight).fadeIn();


    });