A
Anonymous

Leaderboard Table - Copy this React, Tailwind Component to your project

The image shows a leaderboard table with several rows, each representing different rankings in a game or competition. Each row contains the following: A match identifier (e.g., "RL2020_CK5"). Three player profiles for each match, listed with their ranks (1st, 2nd, and 3rd place) and accompanied by: Player avatar images. The player's name (e.g., "38Bro," "DeepShuttling," "Black_Panther"). A yellow icon with a number next to it, possibly indicating a score or points. A green icon with a number, possibly indicating energy or another type of currency. On the right side of each row, there is a preview of a map or game grid, with a button labeled "Xem Lại" (meaning "Replay" in Vietnamese). At the top right, there is a search bar labeled "Tên đăng nhập" (meaning "Username") with a "Tìm kiếm" (meaning "Search") button next to it. The entire layout is organized in a clean, spaced grid format.

Prompt
Component Preview

About

LeaderboardTable - A clean, grid-styled table showing match IDs, player avatars, ranks, scores, and a replay button, built with React. View and copy code!

Share

Last updated 1 month ago