JSFiddle - React, Tailwind, and code Playground

by shayan yazdanpanah

HTML

<ul class="custom-scroll">
	<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>
	<li>item 51</li>
	<li>item 52</li>
	<li>item 53</li>
	<li>item 54</li>
	<li>item 55</li>
	<li>item 56</li>
	<li>item 57</li>
	<li>item 58</li>
	<li>item 59</li>
	<li>item 60</li>
	<li>item 61</li>
	<li>item 62</li>
	<li>item 63</li>
	<li>item 64</li>
	<li>item 65</li>
	<li>item 66</li>
	<li>item 67</li>
	<li>item 68</li>
	<li>item 69</li>
	<li>item 70</li>
	<li>item 71</li>
	<li>item 72</li>
	<li>item 73</li>
	<li>item 74</li>
	<li>item 75</li>
</ul>

CSS

.custom-scroll {
  height: 170px;
  overflow-y: auto;
  position: relative;
  background: #efefef;
  border: 1px solid #dedede;
  border-radius: 4px;
  scrollbar-width: thin;
  scrollbar-color: red yellow;
}

.custom-scroll::-webkit-scrollbar {
  width: 4px;
  background: yellow;
}

.custom-scroll::-webkit-scrollbar-track {
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.custom-scroll::-webkit-scrollbar-thumb {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: red;
}