JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div rel="1" class="box">1</div>
    <div rel="2" class="box">2</div>
    <div rel="3" class="box">3</div>
    <div rel="4" class="box">4</div>
    <div rel="5" class="box">5</div>
    <div rel="6" class="box">6</div>
</div>
<div class="slidepanel">
    <div class="closebtn">X</div>
    <div class="content"></div>
</div>

CSS

.container{
        width:400px;
        float:right;
        margin-right:100px;
    }
    .box{
        width:70px;
        height:45px;
        background:orange;
        float:right;
        margin:20px;
        border-radius:7px;
        text-align:center;
        padding-top:25px;
    }
    .slidepanel{
        position:absolute;
        right:0;
        background:brown;
        width:0px;
        height:300px;
    }
    .closebtn{
    
        color:white;
        width:20px;
        height:20px;
        background:red;
        right:0;
        text-align:center;
    }
    .content{
        font-size:60px;
        color:white;
        text-align:center;
        padding-top:50px;
    }

JavaScript

$('.box').click(function(){
    $('.slidepanel').animate({"width":"500px"},1000);
    var i=$(this).attr('rel');
    $(".content").html(i);
    
});
$('.closebtn').click(function(){
    $('.slidepanel').animate({"width":"0px"},1000);
});