I facing an error on this one my vite and tailwind css are not sync properly while all the setup are still correct but still i facing the error , i put the same code in playcode.io it give me the execepted output but on my vs code it show viered and not execepted why it happen the HRM are loading properly but still i facing this problem i an week still now i cant solve this one all the openai model are working not properly

    <div className="bg-gradient-to-tr from-blue-400 to-pink-400 h-screen w-screen flex flex-col items-center">
      <div className="bg-white p-10 rounded-xl my-auto hover:shadow-2xl <w-84></w-84> ">
        <h1 className="text-blue-400 font-sans text-3xl font-medium text-center mb-16">
          Todo List
        </h1>
        <div className="flex flex-row mb-6">
          <input
            type="text"
            placeholder="Enter Your Task...."
            className="border border-gray-300 p-2 rounded-l-xl placeholder:text-gray-400 flex-grow placeholder:px-1 focus:outline-none"
          />
          <button className="bg-blue-400 text-white p-2 hover:bg-blue-300 rounded-r-xl font-medium">
            Add
          </button>
        </div>

        <ul className="bg-gray-200 ">
          <li>
            <div className="flex justify-between items-center">
              <input type="checkbox" className=""></input>
              <p>Sample Task</p>
              <button className="bg-red-500 py-2 px-4 rounded-lg">Delete</button>
            </div>
          </li>
        </ul>
      </div>
    </div>enter image description here