JSFiddle - React, Tailwind, and code Playground

by Ezra

HTML

<div class="products"><div class="item"><a href="http://www.no1fitness.co.nz/strength-equipment/ab-cruncher-00184?nav=5788"><div class="image"><span class="listing_thumb"><img alt="Ab Cruncher" src="/productimages/THUMB/1/207_863_746.jpg"></span><span class="overlay "><img src="/Images/Overlay/overlay_9_2_1.png"></span></div><div class="item_brand"><img alt="Ab Cruncher" src="/images/Ab Cruncher.png"></div><div class="item_name">Ab Cruncher</div></a><div class="price_box"><p class="price sale"><span class="label">Sale Price</span><span class="price_display">$90.00</span></p><p class="price similar"><span class="label">Similar Elsewhere</span><span class="price_display">$179.00</span></p></div><div class="buy_now"><form action="https://www.no1fitness.co.nz/default.aspx?Z=C&amp;rnd=91875896-BCC1-46D4-9125-CD1C269C12AB&amp;action=addc" method="POST" id="AddToCart_207"><input type="hidden" value="5788" name="catID"><input type="hidden" value="207" name="parent"><input type="hidden" value="207" name="pdID"><input type="hidden" value="0" name="clID"><input type="hidden" value="0" name="szID"><input type="hidden" value="1" name="qty"></form><a onclick="document.getElementById('AddToCart_207').submit(); return false;" href="http://www.no1fitness.co.nz/strength-equipment/ab-cruncher-00184?nav=5788" class="cart_link">Add to cart</a></div><p class="add_wishcompare"><a href="https://www.no1fitness.co.nz/default.aspx?Z=C&amp;rnd=91875896-BCC1-46D4-9125-CD1C269C12AB&amp;action=orderlist&amp;ol=additem&amp;catID=5788&amp;parent=207&amp;pdID=207&amp;clID=0&amp;szID=0&amp;qty=1" class="add_wishlist">Add to wishlist</a><span class="divider">|</span><a onclick="return addToCompare(207, this)" href="#" class="add_compare">Add to compare</a></p></div><div class="item"><a href="http://www.no1fitness.co.nz/strength-equipment/pro-form-ab-glider-platinum-00185?nav=5788"><div class="image"><span class="listing_thumb"><img alt="Pro-Form - Ab Glider Platinum"...

CSS

.ellipse{float: left;}
.no_more{display: none;}
/*.reviews{margin: 50px 0px;}*/
.page_holder_box{width:100%;height: 25px;margin-bottom: 20px;}
.page_holder{height: 25px;display: block;float: right;position: absolute;right: 15px;}
.page_holder.top{top: 50px;}
.page_holder.btm{bottom: 30px;}
.page_holder a{padding:3px 5px;margin:2px;color:black;text-decoration:none;float: left;font-size: 12px;background-color:#eee;border-radius: 3px;}
.active_page{background-color:#333 !important;color:white !important;}
/* Start CSS for sale rpcie text */
.salePriceOverride {background-image: none !important;padding: 0px !important;height: 23px;margin-bottom: 7px !important;}
.salePriceOverride .label {width: auto !important;margin-right:5px;}
.salePriceOverride .price_display {line-height: 24px !important;}
.sale_text_img_override{background-image: url("/images/assetimages/price_tag_images/sale_img_override.gif");background-repeat: repeat-x;background-position: 0px 0px;height: 23px;line-height:26px;}
.sale_text_img_override img, .sale_text_img_override div{float:left;}
.sale_text_img_override div{margin:0px 4px;}
.sale_text_img_override_middle{min-width: 69px;}

JavaScript

(function($){$.fn.pajinate=function(options){var current_page="current_page";var items_per_page="items_per_page";var meta;var defaults={item_container_id:".content",items_per_page:10,nav_panel_id:".page_navigation",nav_info_id:".info_text",num_page_links_to_display:20,start_page:0,wrap_around:false,nav_label_first:"First",nav_label_prev:"Prev",nav_label_next:"Next",nav_label_last:"Last",nav_order:["first","prev","num","next","last"],nav_label_info:"Showing {0}-{1} of {2} results",show_first_last:true,abort_on_small_lists:false,jquery_ui:false,jquery_ui_active:"ui-state-highlight",jquery_ui_default:"ui-state-default",jquery_ui_disabled:"ui-state-disabled"};var options=$.extend(defaults,options);var $item_container;var $page_container;var $items;var $nav_panels;var total_page_no_links;var jquery_ui_default_class=options.jquery_ui?options.jquery_ui_default:"";var jquery_ui_active_class=options.jquery_ui?options.jquery_ui_active:"";var jquery_ui_disabled_class=options.jquery_ui?options.jquery_ui_disabled:"";return this.each(function(){$page_container=$(this);$item_container=$(this).find(options.item_container_id);$items=$page_container.find(options.item_container_id).children();if(options.abort_on_small_lists&&options.items_per_page>=$items.size()){return $page_container;}meta=$page_container;meta.data(current_page,0);meta.data(items_per_page,options.items_per_page);var total_items=$item_container.children().size();var number_of_pages=Math.ceil(total_items/options.items_per_page);var more='<span class="ellipse more">...</span>';var less='<span class="ellipse less">...</span>';var first=!options.show_first_last?"":'<a class="first_link '+jquery_ui_default_class+'" href="">'+options.nav_label_first+"</a>";var last=!options.show_first_last?"":'<a class="last_link '+jquery_ui_default_class+'" href="">'+options.nav_label_last+"</a>";var navigation_html="";for(var...