JSFiddle - React, Tailwind, and code Playground

HTML

<div>
            {{#each filteredHostelsObj}}
                <h3 class="admissions" style="padding-right: 105px;"><b>{{name}}</b></h3>
            {{/each}}
            <hr>

            <div>
                {{#each filteredPaymentMethodsObj}}

                    <h4 class="admission" style="padding-right: 105px;"><b>{{paymentName}}</b></h4>

                {{/each}}
                <table class="table table-bordered">
                    <thead style="background-color: #777 ;    color: white;">
                    <tr>
                        <th class="text-center">SERIAL NO</th>
                        <th class="text-center">OCCUPANT NAME</th>
                        <th class="text-center">MOBILE NO</th>
                        <th class="text-center">PAYMENT METHOD</th>
                        <th class="text-center">PAYMENT REMARKS</th>
                        <th class="text-center">AMOUNT</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{#each dailyDayReports}}
                        <tr>
                            <td class="text-center">1</td>
                            <td class="text-center">{{firstName}}{{lastName}}</td>
                            <td class="text-center">{{phoneNumber}}</td>
                            <td class="text-center">{{paymentName}}</td>
                            <td class="text-center">{{remarks}}</td>
                            <td class="text-center">{{paymentAmount}}</td>
                        </tr>
                    {{/each}}

                    <tr>
                        <td class="text-right " colspan="5"><strong>Total Paid:</strong></td>
                        <td class="text-center"><i class="fa fa-inr">544</i>
                        </td>
                    </tr>


                    </tbody>
                </table>

            </div>
        </div>