tararoutray

import axios from "axios";
import React from "react";
import { Button, Col, Container, Form, FormGroup, FormLabel, Row } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
const Login = () => {
    const submitLoginForm = (event) => {
        event.preventDefault();
    }
    return (
        <React.Fragment>

tararoutray

import axios from "axios";
import React from "react";
import { Button, Col, Container, Form, FormGroup, FormLabel, Row } from "react-bootstrap";
import { useNavigate } from "react-router-dom";
const Login = () => {
    const submitLoginForm = (event) => {
        event.preventDefault();
    }
    return (
        <React.Fragment>

tararoutray

import React from "react";
import { Container } from "react-bootstrap";
const AuthFooter = () => {
    return (
        <React.Fragment>
            <footer className="bg-light border-top py-3 fixed-bottom">
                <Container>
                    &copy; React Auth Demo - 2022
                </Container>
            </footer>

tararoutray

import React from "react";
import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
const AuthNavbar = () => {
    return (
        <React.Fragment>
            <Navbar bg="dark" expand="lg" className="navbar-dark">
                <Container>
                    <Navbar.Brand>React Auth Demo</Navbar.Brand>

tararoutray

#radio-cards-container {
    margin-top: 5rem;
    width: 75vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.radio-card {
    border: 2px solid rgba(0, 0, 0, 0.1);

tararoutray

const selectRadioCard = (cardNo) => {
    /**
     * Loop through all radio cards, and remove the class "selected" from those elements.
     */
    const allRadioCards = document.querySelectorAll(".radio-card");
    allRadioCards.forEach((element, index) => {
        element.classList.remove(["selected"]);
    });
    /**
     * Add the class "selected" to the card which user has clicked on.

tararoutray

<div>
    <h1>Create Stunning Radio Cards Using HTML, CSS, and JavaScript</h1>
    <div id="radio-cards-container">
        <!-- Radio Card 1 -->
        <div class="radio-card radio-card-1" onclick="selectRadioCard('1')">
            <!-- Radio Card Check (tick) icon. By default, its hidden. Will be displayed when card gets clicked. -->
            <div class="radio-card-check">
                <i class="fa-solid fa-check-circle"></i>
            </div>
            <!-- Section to display the icon, label, and some additional text -->

tararoutray

import React from 'react';
import Spinner from 'react-bootstrap/Spinner';

const SpinnerDemo = () => {
    return (
        <React.Fragment>
            <div className='mb-4'>
                <Spinner animation="border" variant="primary" />
                <Spinner animation="border" variant="secondary" className='ms-3' />
                <Spinner animation="border" variant="success" className='ms-3' />

tararoutray

import React from "react";
import Alert from "react-bootstrap/Alert";

const AlertDemo = () => {
    return (
        <React.Fragment>
            {[
                'primary',
                'secondary',
                'success',

tararoutray

import React from 'react';
import Button from 'react-bootstrap/Button';

const ButtonDemo = () => {
    return (
        <React.Fragment>
            <Button variant="primary">Primary</Button>{' '}
            <Button variant="secondary">Secondary</Button>{' '}
            <Button variant="success">Success</Button>{' '}
            <Button variant="warning">Warning</Button>{' '}