JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="select">click me...</div>
    <div id="select-menu">
    	<!-- Scrollbar -->
        <div class="scrollbar-conatiner">
            <div class="scrollbar"></div>
        </div>
        <!-- menu items -->
        <div class="menu-items-container">
            <div class="menu-items">
                <span>Facebook</span>
                <span class="circle">
                    <span class="circlein"></span>
                </span>
            </div>
            <div class="menu-items">
                <span>YouTube</span>
                <span class="circle">
                    <span class="circlein"></span>
                </span>
            </div>
            <div class="menu-items">
                <span>Twitter</span>
                <span class="circle">
                    <span class="circlein"></span>
                </span>
            </div>
            <div class="menu-items">
                <span>Pinterest</span>
                <span class="circle">
                    <span class="circlein"></span>
                </span>
            </div>
            <div class="menu-items">
                <span>Instagram</span>
                <span class="circle">
                    <span class="circlein"></span>
                </span>
            </div>
            <div class="menu-items">
                <span>Raddit</span>
                <span class="circle">
                    <span class="circlein"></span>
                </span>
            </div>
			<div class="menu-items">
                <span>Facebook</span>
                <span class="circle">
                    <span class="circlein"></span>
                </span>
            </div>
            <div class="menu-items">
                <span>YouTube</span>
                <span...

CSS

body {
            font-family: sans-serif;
        }

        #select {
            background: #1c1d22;
            color: #999;
            width: 80%;
            padding: 20px 20px 20px 20px;
            margin: auto;
            font-size: 14px;
            position: relative;
        }

        #select:before {
            content: "";
            border-right: 5px solid transparent;
            border-left: 5px solid transparent;
            border-top: 10px solid #818181;
            position: absolute;
            right: 20px;
            top: 42%;
        }

        #select-menu {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            text-align: center;
            display: none;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.6)
        }

        .menu-items-container {
            background: dodgerblue;
            width: 90%;
            overflow: auto;
            max-height: 360px;
        }

        .menu-items {
            text-decoration: none;
            color: #fff;
            display: block;
            padding: 20px 90px 20px 20px;
            text-align: left;
            cursor: pointer;
            position: relative;
        }

        .menu-items:hover {
            background: #333
        }

        .menu-items:hover .circle {
            box-shadow: 0 0 3px 4px rgba(233, 244, 255, 0.3);
            top: 30%
        }

        .circle {
            border-radius: 50%;
            height: 20px;
            width: 20px;
            border: 1px solid #fff;
            position: absolute;
            top: 33%;
            right: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .circlein {
            border-radius: 50%;
            height: 65%;
            width: 65%;
            background: skyblue;
            display:...

JavaScript

let select = document.getElementById('select'),
       selectMenu = document.getElementById("select-menu"),
       menuItemsContainer = document.getElementsByClassName("menu-items-container")[0],
       menuItems = document.getElementsByClassName("menu-items"),
       scrollbarConatiner = document.getElementsByClassName('scrollbar-conatiner')[0]

       //show scrollbar only when elements more than 6
       if (menuItems.length > 6) {
			scrollbarConatiner.style.display = 'block'
       } else {
			scrollbarConatiner.style.display = 'none'
       }

        select.addEventListener('click', function() {
        	//select menu
            selectMenu.style.display = 'flex'

            //scrollbar
            scrollbarConatiner.style.height = menuItemsContainer.offsetHeight+"px";

            //select-menu items
            menuItemsContainer.style.opacity = 1;
            menuItemsContainer.style.transition = '0.5s';
        });

        $(".menu-items").click(function() {
        	//select-menu
            selectMenu.style.display = 'none'

            //set text of choosed element
            select.innerText = this.innerText.trim()

            //add circle for choosed 
            $(".circlein").hide();
            $(this).find(".circlein").show(10)
        });

        $("#select-menu").click(function(e) {
            if (e.target.id === $(this).attr("id")) {
            	$(this).fadeOut(40);
            }
        });


        menuItemsContainer.addEventListener('scroll', function() {
            var y = menuItemsContainer.scrollTop;
            var z = menuItemsContainer.scrollHeight - menuItemsContainer.clientHeight;
            var q = (y / z) * 70
            $(".scrollbar").css({
                top: q + "%"
            })
        });