Categories - Copy this React, Tailwind Component to your project

1. Homepage Displaying News Categories FR1.1: The homepage must display a list of news categories (e.g., Politics, Sports, Entertainment, Technology) in the form of cards. FR1.2: Each category card must display: Category Name (e.g., Politics) Category Description (optional, a brief overview) Category Image/Icon (optional, an image representing the category) FR1.3: The homepage should support pagination or infinite scrolling to display the categories (if there are many). FR1.4: Categories are dynamically fetched from the backend or API and displayed on the homepage. 2. Category Content Display (News Articles) FR2.1: When a user clicks on a category card (e.g., "Sports"), they should be taken to a page displaying the news articles in that category. FR2.2: The category page should display a list of news articles associated with that category. Each article should display: Article Title Published Date Short Summary/Excerpt Thumbnail Image (optional) FR2.3: Each article can be clicked to view the full article (the article detail page). FR2.4: The category page should support pagination or infinite scroll for articles. FR2.5: The user should be able to filter the content based on date, popularity, or tags (e.g., "breaking news"). FR2.6: A search bar at the top should allow users to search for articles within the selected category by title or keywords. 3. News Article Detail Page FR3.1: When a user clicks on an article, they should be taken to a page that displays the full article. Article Content (Text, images, videos, etc.) Author Information (optional, displayed in a sidebar or at the end of the article) Publish Date Related Articles (links to other articles within the same category or by the same author) FR3.2: The article page should allow users to share the article via social media (Twitter, Facebook, LinkedIn, etc.). FR3.3: The article should support comments (optional, depending on your feature set).