JSFiddle - React, Tailwind, and code Playground

by Ernesto1

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
  <!-- *** Main Content Container *** -->
  <div id="mainBackgroundContainer">
    <div class="container-fluid" id="mainContentContainer">

      <!-- *** Search Bar *** -->
      <div class="row" id="searchContainer">
        <div class="col-lg-12">
          <form id="form-id">
            <div class="mb-3 d-flex justify-content-center" style="margin-top: 2vh;">
              <select id="selPosterCat" class="form-select-sm w-25" aria-label="Default select example" style="border-right: none; border-width: 1px; height: 2rem;">
                <option value="all" selected>All Categories</option>
                <!-- other options added here by javaScript -->
              </select>
              <input type="text" class="form-control-sm w-50" id="inlineFormInput" style="border-left: none; border-radius: 0; border-width: 1px; height: 2rem;" value="" placeholder="Search Posters">
              <button type="text" id="btn" class="btn btn-primary mb-2 btn-sm" style="height: 2rem;border-top-left-radius: 0!important; border-bottom-left-radius: 0!important;
                      ">Search</button>
            </div>
          </form>
        </div>
      </div>

      <div class="row row-cols-1 row-cols-lg-5 row-cols-sm-2 g-4" id="cards">
        <!-- individual cards added here by javaScript -->
      </div>

      <!-- *** Message row if no results from search *** -->
      <div class="row d-flex justify-content-center" id="noResultsMessage">
        <div class="col-md-12">
          <span class="text-center">
            <h5 id="textSearchResult"></h5>
          </span>
        </div>
      </div>

      <!-- *** Pagination Bar *** -->
      <div class="row"...

JavaScript

const setPosters = [
    { id: '1', img: 'libs/images/pdfFile.jpg', title: 'Eye Treatments', author: 'Sam Smith', category: 'treatments' },
    { id: '2', img: 'libs/images/pdfFile.jpg', title: 'Treatments', author: 'Dave Smith', category: 'illness' },
    { id: '3', img: 'libs/images/pdfFile.jpg', title: 'Pain', author: 'Sam Smith', category: 'illness' },
    { id: '4', img: 'libs/images/pdfFile.jpg', title: 'Eye Treatments', author: 'Bob Burke', category: 'illness' },
    { id: '5', img: 'libs/images/pdfFile.jpg', title: 'Pain Treatments', author: 'James Frank', category: 'cures' },
    { id: '6', img: 'libs/images/pdfFile.jpg', title: 'Sinus Treatments', author: 'Ted Reed', category: 'illness' },
    { id: '7', img: 'libs/images/pdfFile.jpg', title: 'Migrain Treatments', author: 'Ted Reed', category: 'remedy' },
    { id: '8', img: 'libs/images/pdfFile.jpg', title: 'Flu Treatments', author: 'Ted Reed', category: 'remedy' },
    { id: '9', img: 'libs/images/pdfFile.jpg', title: 'Eye Treatments', author: 'James Frank', category: 'remedy' },
    { id: '10', img: 'libs/images/pdfFile.jpg', title: 'Flu Treatments', author: 'Ralph Barnes ', category: 'remedy' },
    { id: '11', img: 'libs/images/pdfFile.jpg', title: 'Eye Treatments', author: 'Thomas Smith', category: 'cures' },
    { id: '12', img: 'libs/images/pdfFile.jpg', title: 'Pain Treatments', author: 'Ralph Barnes', category: 'remedy' },
    { id: '13', img: 'libs/images/pdfFile.jpg', title: 'Eye Treatments', author: 'Sam Smith', category: 'treatments' },
    { id: '14', img: 'libs/images/pdfFile.jpg', title: 'Treatments', author: 'Dave Smith', category: 'illness' },
    { id: '15', img: 'libs/images/pdfFile.jpg', title: 'Pain', author: 'Sam Smith', category: 'illness' },
    { id: '16', img: 'libs/images/pdfFile.jpg', title: 'Eye Treatments', author: 'Bob Burke', category: 'illness' },
    { id: '17', img: 'libs/images/pdfFile.jpg', title: 'Pain Treatments', author: 'James Frank', category: 'cures' },
    {...