tailwind css margin class not applying margin to component, react

Question

Why I am not getting a margin if I add a class of my-30 mr-auto ml-auto to component:

import React from "react";

import SignIn from "../../components/sign-in/sign-in.component";
import SignUp from "../../components/sign-up/sign-up.component";

const SignInAndSignUpPage = () => (
    <div className="flex justify-center my-30 mr-auto ml-auto">
        <SignIn />
        <SignUp />
    </div>
);

export default SignInAndSignUpPage;

The result is :

but the expected result is:

How can I achieve the expected result using tailwind classes

note: I have installed the tailwind css library using npm and other classes work fine but this class is not working

Answer 1

There are various way to get the result:

1. Add container for each component and give margin to it:

const SignInAndSignUpPage = () => (
    <div className="flex justify-center my-30">
        <div className="mr-4">
            <SignIn />
        </div>        
        <div className="ml-4">
            <SignUp />
        </div>
    </div>
);

2. Use grid

const SignInAndSignUpPage = () => (
    <div className="grid grid-cols-2 space-x-2">
        <SignIn />
        <SignUp />
    </div>
);

3. Add margin inside the component <SignIn /> or <SignUp /> or both