<style>
    .table,
    .td,
    .th {
        border: 1px solid black;
        text-align: left;
    }

    .table {
        border-collapse: collapse;
        width: 100%;
    }

    .th,
    .td {
        padding: 5px;
    }
</style>

<div style="display:block; width: 100%;">

    <?php foreach ($productos as $row => $value) : ?>

        <h3 style="text-align: center; display:block; width: 100%;"><?= $row ?></h3>

        <?php foreach ($value as $pro) :  ?>

            <div style="float: left; width: 25%;">
                <br>
                <table width="100%" style="background-color: #ebedf2;">
                    <tr>
                        <td style="text-align: center;"><img style="width: 100%; max-height: 100px" src="<?= $pro['imagen'] ?>"></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><?= $pro['tarifa'] ?></td>
                    </tr>
                    <tr>
                        <td style="text-align: center;"><?= $pro['descripcion'] ?></td>
                    </tr>
                </table>
            </div>

        <?php endforeach; ?>

        <br><br>

    <?php endforeach; ?>

</div>
