SD
Shruti Dewan

Default Component - Copy this React, Tailwind Component to your project

Card Design (Dark Mode) Background: Solid black with soft rounded corners. Subtle Glow: The card has a faint blue outer glow to enhance visibility in dark mode. Text & Metrics Layout Top Section - Earnings Summary Title: "Earnings" (White, uppercase, sans-serif font) Earnings Amount: "$8,498" (Large, bold, white text) Growth Indicator: "+1.6%" (Small, bright neon yellow-green text inside a pill-shaped glow badge) Comparison Label: "Compared to Last Month, 28 Sep" (Light gray, small text) Middle Section - Key Metrics Three Key Stats, Centered & Separated by Thin Lines: Target: "$2,268 USD" (White text) Difference: "-0.260" (Slightly red, indicating negative value) Goals: "+0.99" (Light green, indicating positive progress) Chart - Blue Glowing Bar Graph Type: Waveform-inspired vertical bar chart with glowing blue bars Color Theme: Bars transition from cyan to neon blue with a soft glow effect. Bar Height Variation: Similar to an audio frequency visualization, with the tallest bar near the center. Faint Gray Grid Lines behind the bars for subtle structure. Three Date Markers (White text): Left: "12 Aug" Center: "19 Sep" Right: "26 Oct" Bottom Section - Additional Statistics Icons & Stats in Three Columns: Success Rate: "23°" (White text, circular progress icon) Speed Indicator: "19 m/s" (White text, upward arrow icon) Positivity Rate: "64%" (White text, hexagon icon) All icons and labels have a faint blue glow for a futuristic effect.

Prompt
Component Preview

About

DefaultComponent - A sleek, rounded card displaying all essential info, designed for simplicity and elegance. Built with React and Tailw. Start coding now!

Share

Last updated 1 month ago