💳 Card Component (Glassy Style)

A beautiful glassy-style card component built with TSX. Perfect for dashboards, product previews, or modern UI blocks.

✨ Features

• Glassmorphism / Glassy style
• Responsive & mobile-friendly
• Built with tsx
• Easy to customize

🚀 Installation

You can copy the code and use it in any Tailwind CSS project.

npm i armppy-glassy-card

🧱 Usage

<Card
  label="Rizki Makruf"
  text="As a passionate and innovative software engineer, I specialize in frontend development with expertise in Next.js, React Native, and React.js. My commitment to leveraging cutting-edge technologies drives me to create impactful and user-friendly web and mobile applications. "
  height="content"
  labelColor="#ffffff"
  textColor="#ffffff"
  image="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
  imageSize="100px"
  backgroundColor="#6366f1"
/>

⚙️ Props

| Prop | Type | Description | Example | | ----------------- | -------------------- | ------------------------------------ | -------------------------------- | | label | string | The headline text | "Frontend Developer" | | text | string | Description or subtext | "Passionate about web/mobile." | | width | number or string | Optional custom width in pixels | 320 | | height | number or string | Optional custom height in pixels | 180 | | labelColor | string | Custom color for the label | "#4ADE80" | | textColor | string | Custom color for the text | "#ffffff" | | image | string | Add image on card | "https://images.unsplash.com/" | | imageSize | string | Custom image size | "100px" | | backgroundColor | string | Custom color background color | "#6366f1" |

👨‍💻 Author

Rizki Makruf 🔗 GitHub Profile → github.com/rizkymakruf

🌐 Live preview

Rizki Makruf 🔗 Click Here → Live