Create a "Quiz Rush" web app using React and Tailwind CSS.

Features:

• Start screen with title "Quiz Rush", subtitle "Test your knowledge in 20 seconds per question"
• 3 categories: Geography, Science, History. User can select one
• 10 multiple choice questions per category
• 20 second timer for each question. Auto next when time ends
• 4 options, show correct/incorrect after selection
• Score tracking: +10 for correct
• End screen with final score and "Play Again" button
• Modern dark UI with blue "Start Quiz" button
• Fully responsive for mobile

Make the code clean and ready to deploy.

Main aap ke liye basic version ka code bhi de deti hun. Isko index.html file mein save karke browser mein khol lo:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Quiz Rush</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-gray-900 text-white flex items-center justify-center min-h-screen"> <div class="w-full max-w-md bg-gray-800 p-6 rounded-2xl shadow-lg"> <h1 class="text-3xl font-bold text-center mb-2">Quiz Rush</h1> <p class="text-center text-gray-400 mb-6">Test your knowledge in 20 seconds per question</p>

<button onclick="startQuiz()" class="w-full bg-blue-600 hover:bg-blue-700 py-3 rounded-xl font-semibold">  
  Start Quiz  
</button>  

<div id="quiz" class="hidden">  
  <div class="flex justify-between mb-4">  
    <span id="qNum">Question 1/10</span>  
    <span id="timer">20s</span>  
  </div>  
  <h2 id="question" class="text-xl mb-4"></h2>  
  <div id="options" class="space-y-2"></div>  
  <p class="mt-4">Score: <span id="score">0</span></p>  
</div>  

</div> <script> let questions = [ {q: "Capital of Pakistan?", opts:["Karachi","Lahore","Islamabad","Multan"], ans:2}, {q: "Sun is a?", opts:["Planet","Star","Moon","Comet"], ans:1} // aur 8 questions add kar sakte ho ]; let current = 0, score = 0, time = 20, interval; function startQuiz(){ document.querySelector("button").classList.add("hidden"); document.getElementById("quiz").classList.remove("hidden"); loadQuestion(); interval = setInterval(timer, 1000); } function loadQuestion(){ let q = questions[current]; document.getElementById("qNum").innerText = `Question ${current+1}/${questions.length}`; document.getElementById("question").innerText = q.q; document.getElementById("options").innerHTML = ""; q.opts.forEach((opt,i)=>{ document.getElementById("options").innerHTML += `<button onclick="check(${i})" class="w-full bg-gray-700 hover:bg-gray-600 py-2 rounded-lg">${opt}</button>`; }); } function check(i){ if(i === questions[current].ans) score += 10; document.getElementById("score").innerText = score; current++; if(current < questions.length) loadQuestion(); else endQuiz(); } function timer(){ time--; document.getElementById("timer").innerText = time + "s"; if(time <= 0){ time = 20; current++; if(current < questions.length) loadQuestion(); else endQuiz(); } } function endQuiz(){ clearInterval(interval); document.getElementById("quiz").innerHTML = `<h2 class="text-2xl">Your Score: ${score}</h2><button onclick="location.reload()" class="mt-4 bg-blue-600 py-2 px-4 rounded">Play Again</button>`; }