JSFiddle - React, Tailwind, and code Playground

HTML

<a id='open' href="#">Pop up</a>

<div style='clear:both;'></div>

<ul style='float: left'>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
    <li>item 16</li>
    <li>item 17</li>
    <li>item 18</li>
    <li>item 19</li>
    <li>item 20</li>
    <li>item 21</li>
    <li>item 22</li>
    <li>item 23</li>
    <li>item 24</li>
    <li>item 25</li>
    <li>item 26</li>
    <li>item 27</li>
    <li>item 28</li>
    <li>item 29</li>
    <li>item 30</li>
    <li>item 31</li>
    <li>item 32</li>
    <li>item 33</li>
    <li>item 34</li>
    <li>item 35</li>
    <li>item 36</li>
    <li>item 37</li>
    <li>item 38</li>
    <li>item 39</li>
    <li>item 40</li>
    <li>item 41</li>
    <li>item 42</li>
    <li>item 43</li>
    <li>item 44</li>
    <li>item 45</li>
    <li>item 46</li>
    <li>item 47</li>
    <li>item 48</li>
    <li>item 49</li>
    <li>item 50</li>
</ul>

<ul style='float: right'>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
    <li>item 6</li>
    <li>item 7</li>
    <li>item 8</li>
    <li>item 9</li>
    <li>item 10</li>
    <li>item 11</li>
    <li>item 12</li>
    <li>item 13</li>
    <li>item 14</li>
    <li>item 15</li>
    <li>item 16</li>
    <li>item 17</li>
    <li>item 18</li>
    <li>item 19</li>
    <li>item 20</li>
    <li>item 21</li>
    <li>item 22</li>
    <li>item 23</li>
    <li>item 24</li>
    <li>item 25</li>
    <li>item 26</li>
    <li>item 27</li>
    <li>item 28</li>
    <li>item 29</li>
    <li>item 30</li>
    <li>item 31</li>
    <li>item 32</li>
    <li>item 33</li>
    <li>item 34</li>
    <li>item 35</li>
    <li>item 36</li>
    <li>item 37</li>
    <li>item 38</li>
    <li>item 39</li>
    <li>item 40</li>
...

CSS

body{margin:0;padding:0;}
ul{width:50%;padding:0;margin:0;}


#shadow{
    display: none;
    position: fixed;
    top:0;
    bottom: 0;
    width: 100%;
    height:100%;
    background-color: rgba(0,0,0,0.6);
}

#popup{
    padding: 20px;
    position: absolute;
    top:50%;
    left: 50%;
    background-color: white;
}

JavaScript

$(window).ready(function(){
    $('#open').click(function(){
        $('body').width($('body').width());
        $('body').css('overflow', 'hidden');
        $('#shadow').css('display', 'block');
    })
    $('#close').click(function(){
        $('body, #shadow').removeAttr('style')
    })
})