Modern a P I Platform - Copy this Html, Tailwind Component to your project

General Layout: The background has a dark theme, with subtle white dots resembling stars scattered throughout, creating a space like effect. The interface has a minimalist, modern design with smooth font styles and clearly spaced sections. The top right corner features a “Sign In” button with a light blue background and rounded edges. A vertical social media bar is located on the right side, displaying icons for Facebook, Discord, Slack, and Instagram in a vertical line with dark circular backgrounds. Header Section: The top navigation bar includes links labeled Playground, Documentation, API Reference, Pricing, and Blog, spaced evenly and aligned horizontally at the top center. The logo in the top left reads "Imagine API" with a circular icon next to it. Main Content Area: Main Heading: Bold text reads “Imagine API Developer Platform” in large font, with "Imagine API" in bold and larger font than "Developer Platform." Subheading: Beneath the main heading, it reads, “Seamlessly Integrate the Power of Generative AI into Your Products with Imagine’s Industry Leading APIs.” A centered, rounded button labeled Get API Key in light blue is positioned below the subheading, drawing attention. Middle Section – Explore Our Playground: A secondary heading, “Explore our Playground,” in large, bold text appears with a brief description: “Experiment, Discover, and Build with Assurance in Imagine's Playground.” Beneath this, multiple cards showcase different features or tools within the platform: Each card has a title in bold and a brief description. Examples include Super Resolution, Background Remover, and Image Variation. Images within these cards demonstrate their respective functions. For instance, the “Background Remover” card shows an image of a person with the background removed. Bottom Button: A centered, rounded button labeled Explore Playground in light blue provides further navigation at the bottom of the feature cards.