JSFiddle - React, Tailwind, and code Playground

by mrunali tatkundawar

HTML

<ul>
  <li>Mars</li>
  <li>Jupiter</li>
  <li>Saturn</li>
  <li>Pluto</li>  
</ul>
<button>Click Here</button><br>
<div class="box"></div>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

CSS

body{font-family:Verdana; color:#444;}
.box{height:150px;width:300px;border:5px solid #fa4b2a;float:left;
  background-color:#44c767;color:#fff;font-family:Verdana; margin:5px;
  box-shadow:5px 5px 5px #444; padding:10px;}

JavaScript

$(document).ready(function(){
  $("button").click(function(){
    var array= $.makeArray(document.getElementsByTagName("li"))
    //var array = $.makeArray(document.getElementsByTagName("li"));  
     
    array.reverse();
    $(array).appendTo(".box");  
  })
})