JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="app">
    <div class="screen">
		<div class="screen_core player_select_screen_core">
		
			<div class="body">
				<div class="list_item">List item</div>
				<div class="list_item">List item</div>
				<div class="list_item">List item</div>
				<div class="list_item">List item</div>
				<div class="list_item">List item</div>
				<div class="list_item">List item</div>
				<div class="list_item">List item</div>
				<div class="list_item">List item</div>
				<div class="list_item">List item</div>
				<div class="list_item">List item</div>
				<div class="long">
					<div class="list_item">List item</div>
					<div class="list_item">List item</div>
					<div class="list_item">List item</div>
					<div class="list_item">List item</div>
					<div class="list_item">List item</div>
					<div class="list_item">List item</div>
					<div class="list_item">List item</div>
					<div class="list_item">List item</div>
					<div class="list_item">List item</div>
					<div class="list_item">List item</div>
				</div>

			</div>

			<div class="fixed_bar">
				<button class="action_btn">Next Step -></button>
			</div>
			
		</div>
    </div>
</div>



<button class="toggle">Toggle List</button>

CSS

*,
*:after,
*:before {
  box-sizing: border-box;
  font: inherit;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  outline: none;
  color: inherit;
  text-decoration: none;
}

html,
body,
.app,
.screen,
.player_select_screen_core {
	height: 100%;
}

.app {
    max-width: 24em;
    margin: auto;
}

.player_select_screen_core {
	display: flex;
	flex-direction: column;
}

.body {
	overflow: auto;
}

.long {
	display: none;	
}

.long.is-active {
	display: block;
}

.list_item {
    border: 1px solid #eee;
    padding: 1em;
    margin-bottom: .5em;
}

.action_btn {
    width: 100%;
    padding: 1em;
    font-size: inherit;
	background-color: #eee;
}


.toggle {
	position: fixed;
	bottom: 3em;
	left: 3em;
	font: inherit;
	padding: 1em;
}

JavaScript

$('.toggle').on('click', function () {
	$('.long').toggleClass('is-active');
})