TailwindCSS and React Not Correctly Importing JSX Elements

Question

I have two files: The main file - App.js and a JSX Element which I want to load in App.js. element.js has the following code:

const element = () => {
    return (
        <div className="text-gray-100 bg-gray-800 h-64 px-4">
            <h1>Test Title</h1>
            <p>Lorem ipsum</p>
        </div>
    );
};

export default element;

The App.js file is as follows:

import './App.css';
import element from './element';

function App() {
  return (
    <div className="flex">
      <element />
    </div>
  );
};

export default App;

When importing, VSC shows that "element is declared but not used", and the html page shows nothing but a white page.

Answer 1

In JSX, lower-case tag names are considered to be HTML tags. However, lower-case tag names with a dot (property accessor) aren't.

See HTML tags vs React Components.

<component /> compiles to React.createElement('component') (html tag)
<Component /> compiles to React.createElement(Component)
<obj.component /> compiles to React.createElement(obj.component)