JSFiddle - React, Tailwind, and code Playground

by JOHN_748

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>

var Flexible = (typeof Flexible === 'undefined') ? {} : Flexible;

Flexible.Pagination = function(options){

    var pager = this, defaultOption = {};
    defaultOption.pagingControlsContainer = "#pagingControls";
    defaultOption.pagingContainer = "#content";
    defaultOption.itemSelector = ".item:visible"; //A Filtered Visible Paragraphs
    defaultOption.itemsPerPageSelector = ".itemPerPageDropDown"; //Paragraphs Per Page
    defaultOption.itemsPerPage = 1;
    defaultOption.currentPage = 1;
    defaultOption.searchBoxSelector = '.searchBox';
    defaultOption.searchPhrase = '';
    defaultOption.showingInfoSelector = '.showingInfo';
    /** How many Page Number should be visible while navigating. Minimum allowed is 3  (previous, current & next) */
    defaultOption.displayedPages = 10;
    /**Show / Hide Control Buttons : Default to TRUE */
    defaultOption.showGotoFirst = true;
    defaultOption.showGotoLast = true;
    defaultOption.showPrevious = true;
    defaultOption.showNext = true;
    /** all Text can accept an icon using a <span> OR <i> tag. */
    defaultOption.btnFirstText = "First";
    defaultOption.btnLastText = "Last";
    defaultOption.btnNextText = "Next";
    defaultOption.btnPreviousText = "Prev";
    /**CSS properties */
    defaultOption.css = {};
    defaultOption.css.paginationLayout = "<style> " +
                                            defaultOption.pagingControlsContainer+" ul{display:inline; padding-left: 0.2em} " +
                                            defaultOption.pagingControlsContainer+" li{display:inline; padding-left: 0.2em}" +
                                        "</style>";
    defaultOption.css.btnNumberingClass = "btn btn-sm btn-primary";
    defaultOption.css.btnActiveClass = "btn btn-sm...

CSS

.details{
    min-height: 20px;
    padding: 19px;
    margin-top: 20px;
    background-color: #ecf0f1;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

#pagingControls{
  margin-top: 20px;
  text-align: center;
}

#showingInfo{
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}