Free Tailwind CSS Match Results Component

A latest results list for Tailwind CSS 4, in HTML and React: games grouped by competition and date, each with crests, scores and the outcome. Copy it, paste it, add your fixtures. Free to use, no account needed.

Latest Results V1

Latest Results
SportyBlocks League - August 8th, 2023
GLD
2
EMR
0
AQU
1
PUR
1
CRI
1
BLU
3
World League Tournament - July 24th, 2022
4
0
3
0

What you get

This is Latest Results V1 from the SportyBlocks library: a results card that groups games under a competition and date heading, one row per game with both crests, team names, scores and the outcome highlighted. It is the block that sits on a club homepage or a league page next to the standings. 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 results should appear.
  2. Add your games. The React version renders everything from a results array: competitions containing games, each game with two teams, their scores and outcomes. In HTML, duplicate a group block per competition and a row per game.
  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-emerald-primary; swap tokens or use any Tailwind color. Winning and losing sides differ only by the classes they carry, so adapting the card to draws, or to sports where the result is a time or a distance, is an edit, not a rewrite. Group headings, row spacing and the card radius are all utilities on the markup, and the card stretches to any container width.

Need more results layouts?

This is one of 5 results components 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 Standings Table Component

Free Tailwind CSS Standings Table Component

Rank, wins, losses, draws and points in a league table.

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