JSFiddle - React, Tailwind, and code Playground

HTML

[builderList]
modelClass = "Test\test\Models\Article"
scope = "-"
scopeValue = "{{ :scope }}"
displayColumn = "title"
noRecordsMessage = "No records found"
detailsPage = "aktuelles-detail"
detailsKeyColumn = "slug"
detailsUrlParameter = "slug"
pageNumber = "{{ :page }}"
==
<?php
function onStart()
{
    $articles = Db::table('test_test2_article')->orderBy('created_at', 'desc')->take(6)->get();
    //var_dump($articles);
}
?>
==
{% set records = builderList.records %}
{% set displayColumn = builderList.displayColumn %}
{% set noRecordsMessage = builderList.noRecordsMessage %}
{% set detailsPage = builderList.detailsPage %}
{% set detailsKeyColumn = builderList.detailsKeyColumn %}
{% set detailsUrlParameter = builderList.detailsUrlParameter %}

 <section>
  <div class="row">
      <div class="articles-list">
          {% for record in records %}
              <div class="articles-list__article">
                  {# Use spaceless tag to remove spaces inside the A tag. #}
                  {% spaceless %}
                      <h3 class="number">{{ record.title }}</h3>
                      <p>{{ record.teaser }}</p>
                      <div class="tag-list">
                          {% for category in record.categories %}
                              <div class="tag-list__tag">
                                  {{ category.name }}
                              </div>
                          {% endfor %}
                      </div>
                      {% if detailsPage %}
                      {% endif %}

                      {% if detailsPage %}
                          <a href="{{ detailsPage|page({ (detailsUrlParameter): attribute(record, detailsKeyColumn) }) }}">Weiterlesen</a>
                      {% endif %}
                  {% endspaceless %}
              </div>
          {% else %}
              <div class="no-data">{{ noRecordsMessage }}</div>
          {% endfor %}
      </div>
  </div>
</section>