JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

        <ul>
            <li class="un">1</li>
            <li class="deux">2</li>
            <li class="trois">3</li>
            <li class="quatre">4</li>
            <li class="cinq" >5</li>
            <li class="six" >6</li>
            <li class="sept">7</li>
            <li class="huit">8</li>
            <li class="neuf">9</li>
        </ul>

CSS

li{list-style:none;min-width:33%;
                -webkit-flex: 1 auto; flex: 1 auto;text-align:center;min-height:50vh;
                background:#eee;outline:2px solid #000;font-size:3em;margin:0;padding:0;
                display: flex;
                justify-content: center;
                flex-direction: column;
                text-align: center;
            }
            ul{ display: -webkit-flex; display: flex; -webkit-flex-flow:  wrap; flex-flow: wrap;
                width:100%;min-height:100vh;overflow-x:auto;margin:0;padding:0;
            } 
            li:hover{background:#ccc;cursor:pointer}
            li.grand{width:100%;height:100vh} 
            
            li.show{display:none} 
            body, html{padding:0;margin:0}

JavaScript

$('li').on('click',function(){
                $(this).toggleClass('grand').promise().done(function(){
                    $("html, body").animate({
                        scrollTop: $(this).offset().top
                    }, 1000);
                });

            });