### FILE 2: `package.json` on { "name": "exam-document-app", "private": true, "version": "1.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview" }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0" }, "devDependencies": { "@vitejs/plugin-react": "^4.0.0", "vite": "^4.3.9" } } ### FILE 3: `vite.config.js` defineConfig({ plugins: [react()], server: { port: 3000, open: true } }) ### FILE 4: `src/main.jsx` import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( , ) ### FILE 5: `src/index.css` css @tailwind base; @tailwind components; @tailwind utilities; * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @media print { .no-print { display: none !important; } body { background: white; } } ### FILE 6: `src/App.jsx` function App() { return (
) } App ### FILE 7: `src/components/ExamDocument.jsx` [PASTE COMPONENT CODE DI ATAS] ### FILE 8: `.gitignore` node_modules .DS_Store *.local dist .env ## CARA MENGGUNAKAN: 1. **Download ZIP** dan extract 2. **Buka terminal** di folder `exam-document-app` 3. **Install dependencies**: bash npm install 4. **Jalankan aplikasi**: bash npm run dev 5. **Otomatis buka** di browser pada `http://localhost:3000` Aplikasi sudah siap dengan: ✅ Desain modern minimalis dengan Tailwind CSS ✅ Gradient backgrounds dan shadows subtle ✅ Responsive design (mobile & desktop) ✅ Tombol Print yang berfungsi ✅ Data lengkap sesuai dokumen ✅ Siap drag & drop tanpa perlu konfigurasi tambahan const Component = UniversityExamDocument; const root = ReactDOM.createRoot(document.getElementById('root')); root.render();