Background property is not being applied even using tailwind and normal css

import React from "react";
import Navbar from "./Components/Navbar"


function App() {

  return (
    <div className="w-full h-full bg-amber-800"  >
      <Navbar/>
    </div>
  );
}

export default App;

This App.jsx


import react from "react";
import logo from "../assets/tesla.svg"


function Navbar(){

    return(
        <nav className="w-full tex-black-100 bg-transparent h-6 flex flex-row absolute z-1 top-4  " >
        
        <ul className="flex flex-row w-full" >

        <span className="w-1/4 relative left-10 top-2">
         <img  src={logo} className="App-logo w-1/3  " alt="logo" />
        </span>

        <div className="flex flex-row w-1/2 justify-evenly" >

        
        <li><a href="">Model S</a></li>

        <li><a href="">Model 3</a></li>

        <li><a href="">Model X</a></li>

    <li><a href="">Model Y</a></li>

    <li><a href="">Solar Roof</a></li>

    <li><a href="">Solar Panel</a></li>
    </div>

    <div className="flex flex-row w-1/4 justify-evenly" >
    <li><a href="">Shop</a></li>

    <li><a href="">Account</a></li>

    <li><a href="">Menu</a></li>
    </div>

    </ul>
    </nav>
)

}

export default Navbar;

This Navbar.jsx

Each and every tailwind property is working leaving bg-amber-800 in App.jsx

This is what it looks like

Leaving bg-amber-800 background property all of the others are working.

What am I doing wrong?

https://codedamn.com/project/tesla-clone/code/PssQI88lIveSFpfO-oIMy

You can update here if you want

Make sure you open this in new tab it is important