HTML CSS OTP Form

2,590 MyPortfolio

Open In Editor Publish Your Code

HTML CSS OTP Form

Recommended

16 September 2025

CSS Shapes Animation Example

15 November 2025

Spotify Clone HTML CSS: Music Player UI

7 March 2025

Animated Login Form

HTML

CSS

* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

/* Body Styling */
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f0f4f8;
        }

/* Container Styling */
        .otp-container {
            background: #ffffff;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            width: 400px;
        }

/* Heading Styling */
        .otp-container h2 {
            color: #333;
            font-size: 1.5rem;
            margin-bottom: 1rem;
        }

/* OTP Input Styling */
        .otp-input {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin: 1rem 0;
        }

.otp-input input[type="text"] {
            width: 40px;
            height: 50px;
            font-size: 1.5rem;
            text-align: center;
            border: 2px solid #ddd;
            border-radius: 6px;
            transition: border-color 0.3s;
        }

.otp-input input[type="text"]:focus {
            border-color: #007bff;
            outline: none;
        }

/* Submit Button Styling */
        .submit-btn {
            background-color: #007bff;
            color: #ffffff;
            font-size: 1rem;
            padding: 0.7rem 1.5rem;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

.submit-btn:hover {
            background-color: #0056b3;
        }

/* Instruction Text */
        .instruction {
            color: #666;
            font-size: 0.9rem;
        }

JS