JSFiddle - React, Tailwind, and code Playground

by SteveRobertson

HTML

<body>
	<div id="wrap">
		<div id="main">
			<div id=scrollable>			
	            <li class="ui-btn ui-btn-icon-right ui-li-has-arrow ui-li ui-last-child ui-btn-up-a">
                    <div class="ui-btn-inner ui-li">				
						<div id="record" class="ui-btn-text">
                            <ul>
                                <li> Item </li>
                                <li> Item </li>
                                <li> Item </li>
                                <li> Item </li>
                                <li> Item </li>
                                <li> Item </li>
                                <li> Item </li>
                                <li> Item </li>
                                <li> Item </li>
                                <li> Item </li>
                                <li> Item </li>
                                <li> Item </li>                               
                            </ul>
					    </div>
                    </div>
				</li>
			</div>
        </div>
	</div>
	
	<div id="addfooter">
		<form action="#">
			<input type="submit" value="Footer">
		</form>
	</div>
</body>

CSS

html, body {
	margin: 0px;
	width: 100%;
	padding:0;
}
#wrap {
	min-height:100%;
}
#main {
	overflow:auto;
	padding-bottom:150px; /*must be same height as footer */
}
#addfooter {
	margin-top:-150px; /*negative value of footer height */
	float:left;
	width:100%;
	height:150px;
	position:fixed;
	bottom:0px;
	left:0;
	background:#ee5;
	clear:both;
}

#scrollable li {
	cursor: pointer;
	background: -moz-linear-gradient(
		top,
		#5bb512 0%,
		#1db322 29%,
		#31a127 41%,
		#0e7309 70%,
		#105c09);
	background: -webkit-gradient(
		linear, left top, left bottom,
		from(#5bb512),
		color-stop(.29,#1db322),
		color-stop(.41,#31a127),
		color-stop(.70,#0e7309),
		to(#105c09));
	font-weight:bold;
	font-size:250%;
	color: #524b30;
	border:1px solid #524b30;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius:3px;
	padding: 4px;
}

a:link, a:visited{
	text-decoration:none;
	color:#E8EDE9;
	font-weight:none;	
}
a:hover{
	text-decoration:none;
}
a:active{
	text-decoration:none;
	color: #FFFF00;
}