Free Tailwind CSS Scoreboard Component

A responsive scoreboard card for Tailwind CSS 4, in HTML and React. Copy it, paste it, swap the teams and colors. Free to use in any project: no account, no attribution, no catch.

Scoreboard V1


Golden Team
Los Angeles
2
VS
Emerald Team
Boston
0
World League Tournament
08/17/24

What you get

This is Scoreboard V1 from the SportyBlocks library: a compact match card with two team logos, names, cities and the score, built entirely with Tailwind CSS 4 utility classes. It ships in two versions with identical styling, plain HTML and a React component, so it drops into a static page, a Next.js app or anything in between. Dark mode is already wired through dark: variants.

How to use it

Copy the HTML or React tab above and paste it where the score should appear.
Replace the team names, cities and the two SVG logos with your own. The score is plain text, so connect it to your data however you like.
Make sure Tailwind CSS 4 is set up in the project. There is nothing else to install.

Make it yours

Team colors are ordinary Tailwind classes. The logos use text-team-golden-primary, a color token from the library; swap it for any Tailwind color such as text-red-600, or define your own team tokens in your CSS. Spacing, radius and typography are all utilities on the markup, so restyling means editing classes, not overriding a stylesheet.

Need more than one scoreboard?

This is one of 12 scoreboards 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.