Struggling to center a div in React with Tailwind, no matter what method I try. Here is my code:
"use client";
import Image from "next/image";
import React from "react";
const LoginPage = () => {
return (
<div className="flex h-screen">
<div className="flex-shrink-0 p-4">
<Image
src="/big-logo-black-ai.svg"
alt="Logo"
className="w-12 h-12"
width={400}
height={40}
/>
</div>
<div className=" flex justify-center items-center ">
<div className="w-full max-w-md">
<h1 className="text-2xl font-bold mb-4">Login</h1>
<form>
<div className="mb-4">
<label
htmlFor="email"
className="block text-sm font-medium text-gray-700"
>
Email
</label>
<input
type="email"
id="email"
name="email"
className="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring focus:border-blue-500"
placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8df4e2f8cde8f5ece0fde1e8a3eee2e0">[email protected]</a>"
/>
</div>
<div className="mb-4">
<button
type="submit"
className="w-full bg-blue-500 text-white rounded-md py-2 font-semibold hover:bg-blue-600"
>
Submit
</button>
</div>
</form>
</div>
</div>
</div>
);
};
export default LoginPage;
Seeking assistance on how to properly center the div - Every attempt has resulted in it staying locked on the left side.