JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var x
$("document").ready(function(){
   x = 0;
   $("p:eq("+x+")").css("border", "3px solid red");
   });//document ready
function rotate(){
    $("p:eq("+x+")").css("border", "none");
  x = x+1
  if (x==4){
        x=0
  }
  $("p:eq("+x+")").css("border", "3px solid red")
}//end rotate
</script>
<style type="type/css">
.a {color: red;}
.b {color: blue;}
</style>
</head>

<body>

<ul id ="list1">
  <li class ="a">item 1</li>
  <li class ="b">item 2</li>
  <li class ="b">item 3</li>
  <li class ="a">item 4</li>
</ul>

<button type="button" onclick="rotate()">Next Paragraph</button>
<p class="a">paragraph1</p>
<p class="">paragraph2</p>
<p class="b">paragraph3</p>
<p class="">paragraph4</p>



</body>
</html>