.word-row {
  display: flex;
  justify-content: center;
  margin: 5px;
}

.letter {
  width: 40px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 2px;
  color: white;
  font-weight: bold;
  font-size: 1.2em;
}

.letter.correct {
  background-color: green;
}

.letter.present {
  background-color: gold;
}

.letter.absent {
  background-color: lightgray;
}

Row.css

import React from "react";
import "./Row.css"

const Row = ({ guess, targetWord }) => {
  const getLetterStatus = (letter, index) => {
    if (letter === targetWord[index]) {
      return "correct";
    } else if (targetWord.includes(letter)) {
      return "present";
    } else {
      return "absent";
    }
  };

  return (
    <div className="word-row">
      {guess.split("").map((letter, index) => (
        <span
          key={index}
          className={`letter ${getLetterStatus(letter, index)}`}
        >
          {letter}
        </span>
      ))}
    </div>
  );
};

export default Row;

Row.jsx

body {
  margin: 0;
  font-family: Arial, sans-serif;
  height: 100vh;
  background: linear-gradient(135deg, #f3e7e9, #e3eeff);
}

.main-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

App.css

import React, { useState } from "react";
import "./App.css";
import Row from "./Row";

const App = () => {
  const targetWord = "REACT";
  const maxAttempts = 6;

  const [guesses, setGuesses] = useState([]);
  const [currentGuess, setCurrentGuess] = useState("");
  const [isGameOver, setIsGameOver] = useState(false);

  const handleInputChange = (event) => {
    setCurrentGuess(event.target.value.toUpperCase());
  };

  const handleGuess = () => {
    if (currentGuess.length !== 5) {
      return;
    }

    const updatedGuesses = [...guesses, currentGuess];
    setGuesses(updatedGuesses);

    if (currentGuess === targetWord || updatedGuesses.length >= maxAttempts) {
      setIsGameOver(true);
    }
  };

  return (
    <div className="main-container">
      <h1>Wordle</h1>
      {guesses.map((guess, index) => (
        <Row key={index} guess={guess} targetWord={targetWord} />
      ))}
      {!isGameOver && (
        <>
          <input
            onChange={handleInputChange}
            maxLength={targetWord.length}
            placeholder="Enter your guess"
          />
          <button onClick={handleGuess}>Guess</button>
        </>
      )}
      {isGameOver && currentGuess !== targetWord && (
        <p>{`Game over! The word was: ${targetWord}`}</p>
      )}
    </div>
  );
};

export default App;


App.jsx

<!doctype html>
<html>
<head>
  <script type="module" src="./index.js"></script>
  <link rel="stylesheet" href="./index.css" />
  <title>Wordle</title>
</head>
<body>
  <div id="root">loading</div>
</body>
</html>

index.html

import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);
root.render(<App />);