JSFiddle - React, Tailwind, and code Playground

by twobomb three

HTML

<div id="main">
        <div id="list">
            <ul>
                <li data-target="1">Пример 1</li>
                <li data-target="2">Пример 2</li>
                <li data-target="3">Пример 3</li>
                <li data-target="4">Пример 4</li>
                <li data-target="5">Пример 5</li>
            </ul>
        </div>
        <div id="images">
            <img src="http://w7phone.ru/wp-content/uploads/2013/07/Nokia-925-1.jpg" alt="Пример 1">
            <img src="http://lk51.ru/wp-content/uploads/2015/11/iphone6.png" alt="Пример 2">
            <img src="https://53.img.avito.st/640x480/2580588653.jpg" alt="Пример 3">
            <img src="http://www.gsm71.ru/Disassembly/iPhone_4G/4g_razobran.jpg" alt="Пример 4">
            <img src="https://paulov.ru/files/2012/02/step111.jpg" alt="Пример 5">
        </div>
    </div>

CSS

html,body{
     height:100%;
   }
   *{
        margin: 0;
        padding: 0;
    }
    #main{
        width:100%;
        height: 100%;
    }
    #list li:hover{
        background: #aaa;
    }
    #list li{
        height: 30px;
        background: #EEE;
        padding: 3px;
        margin: 20px;
        list-style-type: none;
        text-align: center;
        font-family:sans-serif;
    }
    #list{
        width: 30%;
        height: 100%;
        float: left;
        overflow: hidden;
    }
    #images img{
      box-sizing:border-box;
        padding: 50px;
        height: 100%;
        display: block;
        position:relative;
    }
    #images{
        width: 70%;
        height: 100%;
        float: left;
        overflow: hidden;
    }

JavaScript

$(function(){
            $("#main #list li").bind("click",function(){
                var num = $(this).attr("data-target");
                var el = $("#main #images img")[num-1];
                var offset = $(el).position().top;
                $("#main #images img").map(function(n,e){
                   $(e).animate({
                       top:"-="+offset+"px"
                   },300); 
                });
            });
        })