JSFiddle - React, Tailwind, and code Playground

by Brian Chang

HTML

<div class="panel">123</div><div class="panel">ccc</div><div class="panel">:) </div>

CSS

.panel {
    border: 2px solid black;
    height: 100px;
}

a.mover 							{ background: #900; padding: 6px 12px; position: relative;
								      color: white; font-weight: bold; text-decoration: none; }
.next-tab 							{ bottom: 0; right: 0; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; }
.prev-tab 							{ bottom: 0; left: 0; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; }

JavaScript

$(document).ready(function(){
    $(".panel").each(function(i){
	
			  var totalSize = $(".panel").size() - 1;
	
			  if (i != totalSize) {
			       next = i + 1;
		   		  $(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Page &#187;</a>");
			  }
	  
			  if (i != 0) {
			       prev = i-1;
		   		  $(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>&#171; Prev Page</a>");
			  }
   		
			});

});