Answers to: Convert the image to React Component Generate the code for this login page in React + Tailwindcss

WRKAIAnswers

WRKAI

AI Tools

Files

Pricing

Design to Code

Convert the image to React Component Generate the code for this login page in React + Tailwindcss

Asked on 12/24/2025, 4 pageviews

Converted Designs

import React, { useState } from 'react';

export default function LoginPage() {
  const [role, setRole] = useState('admin');

return (
    <div className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-indigo-500 to-purple-600 px-4">
      <div className="bg-white rounded-3xl shadow-2xl w-full max-w-md p-8">
        <div className="flex justify-center mb-2">
          <div className="w-14 h-14 rounded-lg bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="28"
              height="28"
              viewBox="0 0 24 24"
              fill="white"
              aria-label="graduation-cap"
            >
              <path d="M12 2L1 7l11 5 9-3.6V17a3 3 0 0 0 3 3v1H7v-1a3 3 0 0 0-3-3V9.5l2-.8V7l-2-1.1L12 2z" />
              <path d="M22 9.1V15h-2V9.7l-6 2.4-6-2.4V15H4V9.1l8 3.2 8-3.2z" opacity=".4" />
            </svg>
          </div>
        </div>

<h2 className="text-center text-2xl font-semibold text-gray-800">Exam Monitoring System</h2>
        <p className="text-center text-sm text-gray-500 mt-1">
          Welcome back! Please sign in to continue
        </p>

<div className="mt-6 mx-auto w-full rounded-md overflow-hidden border border-gray-200">
          <div className="flex">
            <button
              onClick={() => setRole('admin')}
              className={`w-1/2 py-2 text-sm font-semibold transition-all duration-150 ${
                role === 'admin'
                  ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white'
                  : 'bg-white text-gray-700'
              }`}
            >
              Admin
            </button>
            <button
              onClick={() => setRole('invigilator')}
              className={`w-1/2 py-2 text-sm font-semibold transition-all duration-150 ${
                role === 'invigilator'
                  ? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white'
                  : 'bg-white text-gray-700'
              }`}
            >
              Invigilator
            </button>
          </div>
        </div>

<div className="mt-4">
          <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="username">
            Username
          </label>
          <input
            id="username"
            name="username"
            placeholder="Enter your username"
            className="w-full rounded-md border border-gray-200 bg-gray-50 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
          />
        </div>

<div className="mt-3">
          <label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="password">
            Password
          </label>
          <input
            id="password"
            name="password"
            type="password"
            placeholder="Enter your password"
            className="w-full rounded-md border border-gray-200 bg-gray-50 px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500"
          />
        </div>

<button
          type="button"
          className="mt-6 w-full rounded-md bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-semibold py-3"
        >
          Sign In
        </button>
      </div>
    </div>
  );
}

by GPT-5 Nano

Converted Designs

Request another