JSFiddle - React, Tailwind, and code Playground

HTML

<div id="slider">
    <div id="logo"><a href="idrugov.ru/img/portfolio/over00.png"><img src="img/portfolio/over00.png" max-height="512"></a></div>
</div>
<div id="portfolio">
    <a href="idrugov.ru/img/portfolio/vk01.jpg"><img src="idrugov.ru/img/portfolio/vk01.jpg" height="64"></a>
    <a href="idrugov.ru/img/portfolio/vk02.png"><img src="idrugov.ru/img/portfolio/vk02.png" height="64"></a>
    <a href="idrugov.ru/img/portfolio/vk03.jpg"><img src="img/portfolio/vk03.jpg" height="64"></a>
    <a href="idrugov.ru/img/portfolio/vk04.png"><img src="img/portfolio/vk04.png" height="64"></a>
    <a href="img/portfolio/vk05.png"><img src="idrugov.ru/img/portfolio/vk05.png" height="64"></a>
    <a href="img/portfolio/vk06.jpg"><img src="idrugov.ru/img/portfolio/vk06.jpg" height="64"></a>
    <a href="img/portfolio/big01.png"><img src="idrugov.ru/img/portfolio/big01.png" height="64"></a>
    <a href="idrugov.ru/img/portfolio/big02.png"><img src="idrugov.ru/img/portfolio/big02.png" height="64"></a>
</div>

CSS

#slider
{
    position: absolute;
    height: 512px;
    width: 512px;
    left: 50%;
    margin-left: -256px;
    overflow: hidden;
}

#portfolio
{
    position: absolute;
    top: 520px;
    right: 0;
}

JavaScript

$(function(){
    $('#portfolio a').click(function(eventObject){
        $('#logo a').attr('href',$('#logo img').attr('src'));
        $('#logo img').hide().attr('src',$(this).attr('href')).load(function(){
            $(this).fadeIn(2000);
        });
        eventObject.preventDefault();
    });
});