JSFiddle - React, Tailwind, and code Playground

HTML

<!-- burayagel -->
        <div id="view-search" class="view tab">
          <div class="page no-navbar">

  <div class="page-content etkinlik-content">
    <div class="block">
      <div class="title-container">
                  <h1>Etkinlikler</h1>
                </div>
      
      <div class="etkinliks">

<a href="/single/">
        <div class="card card-style-2">
          <div class="card-image-container"><img class="card-image" src="cover.jpg" alt=""></div>
          <div class="card-infos">
            <div class="card-category">DATE</div>
            <h2 class="card-title">TITLE</h2>
            <p class="card-description">DESCRIPTION</p>
          </div>
        </div>
      </a>

</div>

      

 <div id="new-etkinliks">

                </div>
                
                <div class="preloader infinite-scroll-preloader"></div>



    </div>
  </div>
</div>

        </div>

JavaScript

var allowInfinite = true;

$$('.etkinlik-content').on('infinite', function () {
  // Exit, if loading in progress
  if (!allowInfinite) return;
  allowInfinite = false;

  // Emulate 1s loading
  // (You can do an Ajax request here to retrieve your next posts)
  setTimeout(function () {
    allowInfinite = true;

    // Generate new items HTML for the demo
    var html = 'it works';

    // Append new items
    $$('#new-etkinliks').append(html);

    // Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
    app.infiniteScroll.destroy('.etkinlik-content');

    // Remove preloader
    $$('.infinite-scroll-preloader').remove();
  }, 1000);
});