Multi Step OTP Verification Form HTML and CSS

<div class="phone-mockup">
    <div id="step-1" class="screen active">
        <div class="header-img-container">
            <img src="verification.png" alt="Header Graphic">
        </div>
        <h2>OTP Verification</h2>
        <p>We Will Send your One Time Password on this Mobile Number</p>
        
        <div class="input-box">
            <span class="label-blue">Enter Mobile Number</span>
            <div class="phone-input-field">
                <img src="https://upload.wikimedia.org/wikipedia/en/4/41/Flag_of_India.svg" class="flag">
                <span>+91</span>
                <input type="tel" value="9876543210" id="mobile-number">
            </div>
        </div>
        <button class="btn-bottom" onclick="next(2)">Send OTP</button>
    </div>

<div id="step-2" class="screen">
        <span class="back-btn" onclick="next(1)">←</span>
        <div class="header-img-container">
            <img src="verification.png" alt="Header Graphic">
        </div>
        <h2>OTP Verification</h2>
        <p>Your OTP has been Sent to your Registered Mobile Number ******3210</p>
        
        <div class="otp-group">
            <input type="text" maxlength="1" inputmode="numeric" class="otp-box filled" value="2">
            <input type="text" maxlength="1" inputmode="numeric" class="otp-box filled" value="8">
            <input type="text" maxlength="1" inputmode="numeric" class="otp-box">
            <input type="text" maxlength="1" inputmode="numeric" class="otp-box">
        </div>

<p style="margin-top: 10px;">Didn't receive OTP? <span style="color: var(--primary-blue); font-weight: 600; cursor:pointer;">Resend OTP</span></p>
        <button class="btn-bottom" onclick="next(3)">Verify</button>
    </div>

<div id="step-3" class="screen">
        <div class="header-img-container" style="opacity: 0.15; height: 180px;">
            <img src="verification.png" alt="Header Graphic">
        </div>
        <h2>Account Verified</h2>
        <div class="success-circle">✓</div>
        <p>Your Account has been verified successfully</p>
        <button class="btn-bottom" onclick="location.reload()">Done</button>
    </div>
</div>

:root {
            --primary-blue: #3278ce;
            --text-gray: #7d8592;
            --bg-light: #f4f7fe;
        }

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
        }

body {
            background-color: var(--bg-light);
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

.phone-mockup {
            width: 375px;
            height: 550px;
            background: white;
            border-radius: 40px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
        }

.screen {
            display: none;
            padding: 40px 25px;
            flex-direction: column;
            align-items: center;
            text-align: center;
            height: 100%;
        }

.screen.active {
            display: flex;
        }

/* Top Header Image */
        .header-img-container {
            width: 100%;
            height: 220px;
            overflow: hidden;
            margin-bottom: 20px;
            display: flex;
            justify-content: center;
        }

.header-img-container img {
            height: 100%;
            object-fit: contain;
        }

h2 { font-size: 24px; color: #333; margin-bottom: 10px; }
        p { font-size: 14px; color: var(--text-gray); margin-bottom: 30px; line-height: 1.4; }

/* Input Fields Styling */
        .input-box {
            width: 100%;
            text-align: left;
            margin-bottom: 40px;
        }

.label-blue {
            color: var(--primary-blue);
            font-size: 13px;
            font-weight: 600;
            margin-bottom: 10px;
            display: block;
        }

.phone-input-field {
            display: flex;
            align-items: center;
            border-bottom: 2px solid #e0e0e0;
            padding-bottom: 8px;
        }

.phone-input-field:focus-within { border-color: var(--primary-blue); }

.flag { width: 22px; margin-right: 8px; }
        .phone-input-field input {
            border: none; outline: none;
            font-size: 18px; font-weight: 500;
            width: 100%; margin-left: 10px;
        }

/* OTP Input Styling */
        .otp-group {
            display: flex;
            gap: 12px;
            margin-bottom: 20px;
        }

.otp-box {
            width: 50px;
            height: 55px;
            border: 1.5px solid #ddd;
            border-radius: 8px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            transition: 0.2s;
        }

.otp-box.filled {
            background-color: var(--primary-blue);
            color: white;
            border-color: var(--primary-blue);
        }

/* Success Checkmark */
        .success-circle {
            width: 85px;
            height: 85px;
            background: var(--primary-blue);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 45px;
            margin: 20px 0;
            box-shadow: 0 10px 20px rgba(50, 120, 206, 0.3);
        }

/* Fixed Action Button at Bottom */
        .btn-bottom {
            width: 85%;
            padding: 16px;
            background-color: var(--primary-blue);
            color: white;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            position: absolute;
            bottom: 40px;
            left: 7.5%;
        }

.back-btn {
            position: absolute;
            top: 40px;
            left: 20px;
            cursor: pointer;
            font-size: 22px;
            color: var(--primary-blue);
        }

- Multi Step OTP Verification Form

Live Preview