how to achieve the track order representation in blazor using html ,css, bootstrap

[![

I want to achieve the design, like I shared in the image and I'm stuck . I used simple html in my code but I couldn't reach the output nearby. Can anyone have any solution for this?

When I tried to group the processes coz I'm writing the code inside the for loop every time the code runs that group repeats along with the details.

   var item = model as Model);
                                        @if (@item.ID == 100 || @item.ID == 200 || @item.ID == 300 || @item.ID == 400)
                                        {
                                            <td class="list-group">
                                                <h3 style="background-color: @item.GroupColor;width: auto">@item.OrderStatusGroup</h3>
                                            </td>

                                        }

                                        <td class="list-group-item">
                                            <table class="CardTable" cellpadding="3" cellspacing="2">
                                                <colgroup>
                                                    @*<col width="50%">
                                                        <col width="50%">*@
                                                </colgroup>
                                                <tbody>
                                                    <tr>
                                                        @if (@item.Time != null)
                                                        {
                                                            <ul class="list-group">
                                                                <li class="list-group-item ">
                                                                    <input type="checkbox" style="background-color:@item.Color" id="@item.ID" @bind="@Checked" disabled />
                                                                    <label class="checkbox-label" for="@item.ID"> @item.Type</label>
                                                                </li>
                                                            </ul>
                                                        }

                                                        else
                                                        {

                                                            <ul class="list-group">
                                                                <li class="list-group-item ">
                                                                    <input type="checkbox" id="@item.ID" style="background-color:@item.Color" disabled="disabled" />
                                                                    <label class="checkbox-label" for="@item.ID"> @item.Type</label>
                                                                </li>
                                                            </ul>
                                                        }

                                                    </tr>
                                                    <tr>
                                                        <td class="CardHeader">User</td>
                                                        <td>@item.StatusUser </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="CardHeader">Time</td>
                                                        <td>@item.StatusTime </td>
                                                    </tr>
                                                    <tr>
                                                        <td class="CardHeader">
                                                            Type
                                                        </td>
                                                        <td style="background-color: @item.Color;width: auto">
                                                            @item.Type
                                                        </td>
                                                    </tr>

                                                </tbody>
                                            </table>
                                        </td>

]1]1