Free Tailwind CSS Player Card Component

A player profile card for Tailwind CSS 4, in HTML and React: photo, jersey number, position and three stats. Copy it, paste it, drop in your athlete. Free to use in any project, no account needed.

Player Card V1

James
Sporty
Player
26
James Sporty
Forward
17
Wins
9
Losses
461
Points

What you get

This is Player Card V1 from the SportyBlocks library: a portrait card with the player photo over a gradient backdrop and an oversized name watermark, the jersey number in a badge, a team crest and a country flag in the top corners, then the name, position and a three-column stats row. It is built with Tailwind CSS 4 utility classes and ships as plain HTML and as a React component with identical styling. Dark mode is wired through dark: variants.

How to use it

  1. Copy the HTML or React tab above and paste it where the card should appear.
  2. Swap the photo, name, number, position, crest and flag for your own. In the React version the stats come from a small statistics array at the top of the file; in HTML they are three plain text blocks.
  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 card edge.

Make it yours

The backdrop gradient uses the custom-orange and custom-yellow color tokens; change the from- and to- classes to any Tailwind colors, or your team's, and the badge follows because it uses the same pair. The angled bottom edge is a single clip-path utility on the photo container, so removing that class gives you a straight edge. The crest takes its color from a team token such as text-team-golden-primary. Everything else is spacing and typography utilities you can edit directly on the markup.

Need more than one player card?

This is one of 6 player cards 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 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
Free Tailwind CSS Match Results Component

Free Tailwind CSS Match Results Component

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

View component