Free Tailwind CSS Standings Table Component

A league standings table for Tailwind CSS 4, in HTML and React: rank, team, wins, losses, draws, points and goal difference. Copy it, paste it, fill in your league. Free to use in any project, no account needed.

Standings V1

SportyBlocks League 2023
# / Teamwldptsdif
01
Golden Team
2251670
02
Emerald Team
206262+15
03
Crimson Team
197259+12
04
Blue Team
179253+7
05
Purple Team
188256+10
06
Green Team
1610250-5
07
Aqua Team
1511247-2
08
Silver Team
1412244-8

What you get

This is Standings V1 from the SportyBlocks library: a league table with a title bar and one row per team showing rank, crest, name, wins, losses, draws, points and goal difference. It is a real HTML table with proper header cells, so screen readers and search engines read it as tabular data, wrapped in a rounded card that scrolls sideways on narrow screens instead of breaking the layout. Built with Tailwind CSS 4 utilities, it ships as plain HTML and as a React component with identical styling, dark mode included.

How to use it

  1. Copy the HTML or React tab above and paste it where the table should appear.
  2. Fill in your league. The React version renders rows from a standings array, one object per team; in HTML, duplicate a <tr> for each team and edit the cells.
  3. Make sure Tailwind CSS 4 is set up in the project. There is nothing else to install.

Make it yours

Each crest takes its color from a team token such as text-team-golden-primary; swap it for any Tailwind color or your own tokens. Columns are ordinary header and data cells, so adding form, goals for and against, or dropping draws for a league without them is a matter of editing the markup. The title bar is a plain heading, and every color, radius and spacing value is a utility class on the element it styles.

Need more than one standings table?

This is one of 5 standings tables in SportyBlocks, a library of 87 sports UI components: scoreboards, standings, match schedules, player cards, lineups, tactics boards, tickets and more. Five components are free, including this one, and you can grab all five as a single download on the pricing page. The full library is a one-time $49 purchase with lifetime updates.

More free components

Free Tailwind CSS Scoreboard Component

Free Tailwind CSS Scoreboard Component

Two teams, crests and the score in a compact match card.

View component
Free Tailwind CSS Player Card Component

Free Tailwind CSS Player Card Component

Photo, jersey number, position and stats in a portrait card.

View component
Free Tailwind CSS Player Stats Component

Free Tailwind CSS Player Stats Component

A player profile hero with photo, metrics and a stats row.

View component
Free Tailwind CSS Match Results Component

Free Tailwind CSS Match Results Component

Games grouped by competition and date, with scores and outcomes.

View component