React Quiz App with tailwind css styling

Build a Quiz App in React Js and Tailwind CSS | Tailwind CSS React Quiz App | Quiz App on React

by
React quiz app with tailwind css
React quiz app with tailwind css
Live Demo

Hi, welcome here in this tutorial we are going to develop a React Quiz App and also use Tailwind CSS for styling, The prerequisites for this project are as follows:

  • Node.js should be installed in your system.
  • Create a brand new ReactJs project. Just copy the code below:
				
					code to create React js project:

npx create-react-app my-app

after it run the below command:

cd my-app

after it run the below commands to install Tailwind css into your project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

and then install the following package:
npm i react-color

after installation run the following command to start the app:
npm run start

The brand-new React Js project should look like this:

brand new react js app
brand new react js app

Here is your code for the App.js file, copy the code below and paste it into your App.js file:

				
					import React, { useState } from 'react'

const App = () => {

  const [currentQuestion, setcurrentQuestion] = useState(0);
  // we will toggle the show score
  const [showScore, setshowScore] = useState(false);
  const [score, setscore] = useState(0);

  // lets add some questions

  const allQuestions = [
    {
      text: 'Who is the CEO of Amazon?',
      options: [
        { answerText: 'Jeff', isCorrect: true },
        { answerText: 'Mark', isCorrect: false },
        { answerText: 'Elon', isCorrect: false },
      ],
    },
    {
      text: 'Who is the CEO of Facebook?',
      options: [
        { answerText: 'Jeff', isCorrect: false },
        { answerText: 'Mark', isCorrect: true },
        { answerText: 'Elon', isCorrect: false },
      ],
    },
    {
      text: 'Who is the CEO of Tesla?',
      options: [
        { answerText: 'Jeff', isCorrect: false },
        { answerText: 'Mark', isCorrect: false },
        { answerText: 'Elon', isCorrect: true },
      ],
    },
    {
      text: 'Who is the CEO of Google?',
      options: [
        { answerText: 'Jeff', isCorrect: false },
        { answerText: 'Mark', isCorrect: false },
        { answerText: 'Larry', isCorrect: true },
      ],
    },
    {
      text: 'Who is the CEO of Youtube?',
      options: [
        { answerText: 'Javed', isCorrect: true },
        { answerText: 'Mark', isCorrect: false },
        { answerText: 'Elon', isCorrect: false },
      ],
    },
  ]

  const handleAnswerOptions = (isCorrect) => {
    if (isCorrect) {
      setscore(score + 1);
    }

    const handleNextQuestion = currentQuestion + 1;
    if (handleNextQuestion < allQuestions.length) {
      setcurrentQuestion(handleNextQuestion);
    } else {
      setshowScore(true);
    }
  }

  return (
    <div className='flex w-full h-screen justify-center items-center bg-gradient-to-r from-violet-500 to-fuchsia-500'>
      <div className='bg-slate-100 p-12 rounded-lg shadow-2xl w-full max-w-xl text-center'>

        {
          showScore ? (
            <>
              <div className='text-slate-700 text-xl font-semibold'>
                You scored {score} out of {allQuestions.length}
              </div>
              <br></br>
              <button className='m-2 h-10 w-24 rounded-md bg-slate-200 hover:bg-slate-100 hover:shadow-xl transition-all duration-500' onClick={()=> {window.location.reload()}}>Quiz again!</button>
            </>
          ) : (
            <>
              <div className='text-slate-700 text-xl font-semibold'>
                <div className='m-4'>
                  <span>Question {currentQuestion + 1}</span>/{allQuestions.length}
                </div>
                <div className='m-4'>
                  {allQuestions[currentQuestion].text}
                </div>

                <div className='w-full'>
                  {
                    allQuestions[currentQuestion].options.map((options) => (
                      <button className='m-2 h-10 w-24 rounded-md bg-slate-200 hover:bg-slate-100 hover:shadow-xl transition-all duration-500 ease-in-out' onClick={()=>handleAnswerOptions(options.isCorrect)}>{options.answerText}</button>
                    ))
                  }
                  
                </div>

              </div>
            </>
          )
        }


      </div>
    </div>
  )
}

export default App

Here is your code for the index.css file, copy the code below and paste it into your index.css file:

				
					@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  margin: 0;
  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;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Here is your code for tailwind.config.js copy the code below and paste it into tailwind.config.js.

				
					/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

After writing the code into the files (don’t forget to save it ,) you can run the command below:

				
					npm start
Download the Code