JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>список</title>
</head>
<body>
<ul>
    <li>список 01</li>
    <li>список 02</li>
    <li>список 03</li>
    <li>список 04</li>
    <li>список 05</li>
    <li>список 06</li>
    <li>список 07</li>
    <li>список 08</li>
    <li>список 09</li>
    <li>список 11</li>
    <li>список 12</li>
    <li>список 13</li>
    <li>список 14</li>
    <li>список 15</li>
    <li>список 16</li>
    <li>список 17</li>
    <li>список 18</li>
    <li>список 19</li>
    <li>список 20</li>
    <li>список 21</li>
    <li>список 22</li>
    <li>список 23</li>
    <li>список 24</li>
    <li>список 25</li>
    <li>список 26</li>
    <li>список 27</li>
    <li>список 28</li>
    <li>список 29</li>
    <li>список 30</li>
    <li>список 31</li>
</ul>
</body>
</html>

CSS

ul{
    height:300px;
    background-color: #E6EAEF;
    width: 140px;
    overflow-y: auto;
    padding: 0;
}
li{
    list-style: none;
    border-radius: 3px;
    padding: 15px;
    text-align: center;
}
li:nth-child(odd){
    background-color: #62D0E3;
}