Dark Glassmorphism UI

A modern React application featuring a dark glassmorphism design with interactive tabs and image gallery components.

Features

• Dark Glassmorphism Design: Beautiful glass-like cards with backdrop blur effects
• Interactive Tabs: Smooth tab switching with hover and active states
• Image Gallery: Horizontal scrolling gallery with add/scroll functionality
• Responsive Layout: Mobile-first design that adapts to different screen sizes
• Accessibility: ARIA labels and keyboard navigation support

Tech Stack

• React 18
• Vite
• Tailwind CSS
• Lucide React (icons)
• PostCSS & Autoprefixer

Installation

1. Clone or download the project files
2. Install dependencies:

   npm install

Development

Start the development server:

npm run dev

The app will be available at http://localhost:5173

Build

Create a production build:

npm run build

The built files will be in the dist directory.

Deploy to Vercel

1. Push your code to a GitHub repository
2. Connect your repository to Vercel
3. Vercel will automatically detect it's a Vite project and deploy it

Alternatively, use the Vercel CLI:

npm install -g vercel
vercel

Project Structure

├── src/
│   ├── components/
│   │   ├── Tabs.jsx
│   │   └── Gallery.jsx
│   └── main.jsx
├── App.jsx
├── index.css
├── main.jsx
├── package.json
├── tailwind.config.js
└── README.md

Customization

The design system is defined in tailwind.config.js with custom colors, shadows, and border radius values. You can modify these tokens to customize the appearance of the entire application.