<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration Form</title>
  </head>

<body>

    <div class="container">
        <h2>Registration</h2>
        <form action="">
            <p>Password didnot match !!!</p>
            <input type="text" name="username" id="username" placeholder="username">
            <input type="email" name="email" id="email" placeholder="email">
            <input type="password" name="pass" id="pass" placeholder="password">
            <input type="password" name="confirm-pass" id="confirm-pass" placeholder=" confirm password">

            <div class="btns">
                <button type="submit">Register</button>
            </div>

        </form>
    </div>

    
</body>

</html>
   body {
            padding: 0;
            margin: 0;
            font-family: Arial, Helvetica, sans-serif;
            background-color: rgb(48, 46, 46);
            color: white;
            padding-top: 25vh;
        }
        
        .container {
            width: 400px;
            display: flex;
            flex-direction: column;
            margin: auto;
            align-items: center;
            background-color: rgb(22, 21, 21);
            border-radius: 15px;
            padding: 25px 10px;
            box-shadow: 0 0 15px rgb(80, 79, 79);
        }
        
        form {
            display: flex;
            flex-direction: column;
            width: 90%;
        }
        
        input {
            height: 40px;
            border-radius: 10px;
            border: none;
            outline: none;
            margin: 5px;
            text-align: center;
            font-size: 18px;
            color: white;
            background-color: rgb(48, 46, 46);
        }
        
        .btns {
            margin: 15px auto;
        }
        
        button {
            background-color: rgb(0, 0, 0);
            color: white;
            border: none;
            padding: 8px 30px;
            border-radius: 10px;
            font-size: 18px;
            cursor: pointer;
            margin: 5px 25px;
        }
        
        button:hover {
            background-color: tomato;
        }
        
        p {
            color: red;
            text-align: center;
            display: none;
        }
        // lets do some password validation
        const pass = document.querySelector('#pass')
        const confirm_pass = document.querySelector('#confirm-pass')
        const msg = document.querySelector('p')
        const btn = document.querySelector('button')
        btn.addEventListener('click', (e) => {
            if (pass.value != confirm_pass.value) {
                e.preventDefault();
                msg.style.display = "block"
            }else{
                alert('user registered sucessfully')
            }

        })

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.