Free Tailwind CSS Player Stats Component

A player stats hero for Tailwind CSS 4, in HTML and React: photo, name, position and team on a colored card, a metrics column and a stats row. Copy it, paste it, plug in your player. Free to use, no account needed.

Player Stats V1

Player
JamesSporty
ForwardActive
Golden Team
From
Portland, OR
Birthdate
Dec 27, 1999
Nationality
United States
Experience
4th Season
22
Years
FW
Position
6'5"
Height
195
Weight (lbs)
26
Shirt #
81
Games

What you get

This is Player Stats V1 from the SportyBlocks library: a full-width profile block for a player page. The top card carries the photo over a team-colored background with a large crest behind it, the name in oversized type, position and status badges, the team name, and a column of profile metrics such as origin, height or age. Below it, a white stats row lists the numbers that matter for your sport: years, games, points, whatever you count. 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 at the top of the player page.
  2. Swap the photo, name, badges and team. In the React version the metrics and the stats come from two small arrays, metrics and statistics, at the top of the file; in HTML each item is a pair of text elements you duplicate.
  3. Make sure Tailwind CSS 4 is set up in the project. The photo works best as a transparent PNG cut-out, since it overlaps the top edge of the card.

Make it yours

The card background is bg-team-golden-primary, a team color token; change it to any Tailwind color or your own team token and the crest follows, because it uses the same token. The layout is a three-column CSS grid from medium screens up and stacks on phones, so it needs no breakpoints of your own. The position and status badges are plain rounded spans, easy to add, remove or recolor, and the stats row grows to fit as many numbers as you give it.

Need more player stats layouts?

This is one of 5 player stats 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 Match Results Component

Free Tailwind CSS Match Results Component

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

View component