Stock Info - Copy this React, Tailwind Component to your project
Design a professional and modern interface for displaying detailed stock information. The section should focus on providing key stock details and company summary with a clean, visually appealing design. Layout Requirements: Header Section: Display the company logo on the left with the stock ticker and exchange information in bold next to it (e.g., "BCM (HOSE)"). Include a share button next to the header for user interaction. Company Overview Section: Below the header, provide the full company name in a smaller font with additional details like industry and business focus (e.g., real estate, industrial park management). Display the company profile summary and provide a "See more" link to expand for full details. Stock Price Section: Use large, bold numbers for the current stock price (e.g., 71,400) with a clear indication of the price change and percentage increase or decrease (e.g., +1,100, +1.56% in green). Add a 24 hour price range slider, showing the lowest and highest prices within the last 24 hours. Key Financial Metrics Section: Design a grid layout that displays critical metrics such as: Market capitalization (e.g., 73,899T) P/E ratio (e.g., 27.78) EPS (e.g., 2,569) Trading volume (e.g., 235,300) P/B ratio (e.g., 3.74) Book value per share (e.g., 19,073) EV/EBITDA (e.g., 21.09) Shares outstanding (e.g., 1,035,000,000). Business Quality & Risk Assessment Section: Display a traffic light system (or simple color codes) for metrics such as: Business quality (e.g., "Not stable" in red). Valuation (e.g., "Not attractive" in red). Risk level (e.g., "Low" in green). Add a “Details” link for further information. Call to Action Section: On the top right, include a CTA button (e.g., "Suggested by Nebula") with a short explanation of why the user should consider the stock (e.g., investment strategies). Style Requirements: Use a clean and minimalistic color palette, with green indicating positive metrics and red for negative metrics, similar to the image. Ensure mobile responsiveness for compact viewing without losing clarity. Focus on delivering an easy to read, well organized layout that emphasizes key stock information.
