JSFiddle - React, Tailwind, and code Playground

by kayenglajom

HTML

<script type="text/javascript">

				function sortUnorderedList(ul, sortDescending) {
					if(typeof ul == "string")
						ul = document.getElementById(ul);

					var lis = ul.getElementsByTagName("li");
					var vals = [];

					for(var i = 0, l = lis.length; i < l; i++)
						vals.push(lis[i].innerHTML);

					vals.sort();

					if(sortDescending)
						vals.reverse();

					for(var i = 0, l = lis.length; i < l; i++)
						lis[i].innerHTML = vals[i];
				}

				window.onload = function() {
					var desc = false;
					document.getElementById("test").onclick = function() {
						sortUnorderedList("list", desc);
						desc = !desc;
						return false;
					}
				}

			</script>
      
			<input type="button" id="test" value="Sort List (click again to reverse)"/>
			<ul id="list" class="grid-container">
				<li>Grapes</li>
				<li>Pineapple</li>
				<li>Banana</li>
				<li>Apple</li>
				<li>Orange</li>
				<li>Cherries</li>
				<li>Watermelon</li>
				<li>Avocado</li>
				<li>Pears</li>
				<li>Coconut</li>
				<li>Papaya</li>
				<li>Mango</li>
			</ul>

CSS

.grid-container {
	display: grid;
	grid-template-columns: 200px 200px 200px;
	grid-gap: 30px;
	background-color: #fff;
	color: #444;
}

.grid-container li {
	background-color: #444;
	color: #fff;
	border-radius: 5px;
	padding: 50px;
	font-size: 150%;
	display:flex;
}