JSFiddle - React, Tailwind, and code Playground

by batcave

HTML

<div class="scroll-list">
	<h2 class="scroll-list__header">70 people going</h2>
	
	<ul class="scroll-list__content">
		<li class="scroll-list__item">name 1</li>
		<li class="scroll-list__item">name 2</li>
		<li class="scroll-list__item">name 3</li>
		<li class="scroll-list__item">name 4</li>
		<li class="scroll-list__item">name 5</li>
		<li class="scroll-list__item">name 6</li>
		<li class="scroll-list__item">name 7</li>
		<li class="scroll-list__item">name 8</li>
		<li class="scroll-list__item">name 9</li>
		<li class="scroll-list__item">name 10</li>
		<li class="scroll-list__item">name 11</li>
		<li class="scroll-list__item">name 12</li>
		<li class="scroll-list__item">name 13</li>
		<li class="scroll-list__item">name 14</li>
		<li class="scroll-list__item">name 15</li>
		<li class="scroll-list__item">name 16</li>
		<li class="scroll-list__item">name 17</li>
		<li class="scroll-list__item">name 18</li>
		<li class="scroll-list__item">name 19</li>
		<li class="scroll-list__item">name 20</li>
		<li class="scroll-list__item">name 21</li>
		<li class="scroll-list__item">name 22</li>
		<li class="scroll-list__item">name 23</li>
		<li class="scroll-list__item">name 24</li>
		<li class="scroll-list__item">name 25</li>
		<li class="scroll-list__item">name 26</li>
		<li class="scroll-list__item">name 27</li>
		<li class="scroll-list__item">name 28</li>
		<li class="scroll-list__item">name 29</li>
		<li class="scroll-list__item">name 30</li>
		<li class="scroll-list__item">name 31</li>
		<li class="scroll-list__item">name 32</li>
		<li class="scroll-list__item">name 33</li>
		<li class="scroll-list__item">name 34</li>
		<li class="scroll-list__item">name 35</li>
		<li class="scroll-list__item">name 36</li>
		<li class="scroll-list__item">name 37</li>
		<li class="scroll-list__item">name 38</li>
		<li class="scroll-list__item">name 39</li>
		<li class="scroll-list__item">name 40</li>
	</ul>
</div>

CSS

* {
	box-sizing: border-box;
}

body {
	font-family: arial, sans-serif;
}

.scroll-list {
	background-color: #ededed;
	width: 20rem;
	height: 40rem;
	overflow: hidden;
}

.scroll-list__header {
	background-color: #dcdcdc;
	margin: 0;
	padding: 2rem;
	text-transform: uppercase;
}

.scroll-list__content {
	display: block;
	list-style-type: none;
	overflow-y: scroll;
	height: 100%;
	padding: 0 0 8rem 0;
	margin: 0;
}

.scroll-list__item {
	padding: 1rem;
	border-bottom: 1px solid #cccccc;
}