Leaderboard - Copy this React, Tailwind Component to your project

Design-a-professional-and-visually-engaging-Leaderboard-UI-that-highlights-the-top-performers-with-their-name,-username,-and-points.-The-design-should-follow-a-modern-purple-indigo-theme,-use-React-Icons,-and-be-fully-responsive-for-mobile,-tablet,-and-desktop-devices.-Detailed-Prompt:-Overall-Layout:-A-centered-card-style-leaderboard-container-with-a-shadow-and-rounded-corners.-The-leaderboard-title-should-be-at-the-top,-displayed-with-a-bold-and-elegant-font.-Use-a-gradient-background-in-shades-of-purple-and-indigo-to-give-a-modern-and-premium-look.-Add-subtle-animation-(e.g.,-hover-effects-on-rows)-to-enhance-interactivity.-Header-Section:-At-the-top,-include-the-Leaderboard-title-(e.g.,-"Top-Performers")-with-a-crown-icon-(<FaCrown>-from-react-icons/fa),-styled-to-stand-out.-Add-a-toggle-or-filter-button-(<MdFilterList>-from-react-icons/md)-to-allow-filtering-or-sorting-the-leaderboard-(e.g.,-by-name-or-points).-Table-Design:-Create-a-borderless-table-for-a-clean-look.-Include-columns-for:-Rank:-Show-the-rank-with-a-trophy-icon-for-the-top-3-positions-(e.g.,-gold,-silver,-bronze-icons-like-<GiTrophy>-from-react-icons/gi).-Name:-Display-the-full-name-of-the-participant-in-a-bold-font.-Username:-Show-the-username-in-a-smaller,-secondary-font-with-a-subtle-grey-tone.-Points:-Display-the-points-in-a-large,-bold-font-with-a-purple-accent.-Add-a-hover-effect-to-each-row,-changing-the-background-to-a-light-indigo-shade.-Highlight-the-top-3-rows-with-different-shades-of-purple-for-a-leaderboard-effect.-Responsiveness:-Mobile:-Stack-the-columns-vertically:-Display-name-and-points-prominently,-and-username-below-in-smaller-text.-Add-badges-for-rank-(e.g.,-"1st",-"2nd",-"3rd")-styled-with-purple-gradients.-Tablet:-Display-all-columns-but-adjust-font-sizes-and-spacing-for-compact-viewing.-Desktop:-Display-the-full-table-with-additional-space-and-hover-animations.-Footer-Section:-Include-a-pagination-control-(<AiOutlineArrowLeft>-and-<AiOutlineArrowRight>-from-react-icons/ai)-at-the-bottom-for-navigating-through-pages-if-the-leaderboard-has-many-participants.-Color-Scheme:-Primary-Colors:-Purple-(#6A0DAD),-Indigo-(#4B0082).-Accent-Colors:-Gold-(#FFD700),-Silver-(#C0C0C0),-Bronze-(#CD7F32).-Typography:-Title:-Large,-bold-font-(e.g.,-"Poppins",-28px).-Table-Headers:-Semi-bold-font-(e.g.,-"Roboto",-16px).-Table-Data:-Regular-font,-adjust-size-for-hierarchy.-Icons:-Crown-Icon-for-the-leaderboard-title:-<FaCrown>.-Trophy-Icons-for-the-top-3-ranks:-<GiTrophy>.-Filter-Icon-for-sorting:-<MdFilterList>.-Pagination-Arrows:-<AiOutlineArrowLeft>-and-<AiOutlineArrowRight>.