{"version":"1.0","type":"rich","title":"JSX inline styling","description":"This example shows how JSX inline styling dynamically changes a headline’s color and background based on the current hour. The React component creates a Date object for March 14, 2020, at 2 PM, determines whether it is morning or afternoon, and applies a green background for morning hours or orange for afternoon. Styling is defined as a JavaScript object with camelCase properties, and the `style` attribute uses double braces to embed the object in JSX. The code imports React and ReactDOM from their production UMD builds served via CDN.","provider_name":"VizHub AI Studio","provider_url":"https://vizhub.com","html":"<iframe src=\"https://vizhub.com/viz/d7d7e8453e714071b4f2b3aca2b40960?mode=embed\" width=\"960\" height=\"500\" scrolling=\"no\" frameborder=\"0\"></iframe>","width":960,"height":500,"cache_age":3600}