There are a few ways to do this, depending on your layout.
#1 - 4 LISTS, WITH LIMIT LIST SETTING
The simplest way is to use Webflow’s limit items feature on collection lists. You’d have 4 collection lists, with your 4 different stylings above, and then you’d limit them 1-1, 2-1, 3-1, and 4-100. Make sure they all have the same binding, sorting and filtering so they are limiting the same dataset in the same way.
This approach is HTML-efficient and easy to design, but costs 4 collection lists, and may have some layout challenges due to the lists being separate. Use the same CSS base class for your grid to maintain field positioning consistency.
#2 - 1 LIST, WITH CUSTOM CSS
If you want to just use one collection list for the whole table, but style the first 3 differently, you can do that using custom CSS with the :nth-item pseudoselector and customize the CSS on each element.
Very efficient on the design, one collection list, but requires a firm knowledge of CSS.
#3 - 1 LIST, HYBRID DESIGN
Or, you could get creative, and put all 4 designs in every row of the collection list, so that each row, then use your custom CSS to simply hide all of the designs except 1 for each row. The row at position 1 would only show the purple design. Row 2, red. Row 3, its green variant. All other rows get the gray variant.
This keeps your styling 100% in the designer, uses 1 collection list and the custom CSS simply controls visibility. However it’s HTML inefficient, i.e. 75% of the HTML in this list will be hidden from view, but still downloaded.