onlinee

examination

This tailwind example is contributed by Nezerwa Debora, on 28-May-2025. Component is made with Tailwind CSS v3. It is responsive.

Hero

Author Nezerwa Debora

573

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Online Examination System</title>
    <style>
        /* CSS Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

body {
            background-color: #f5f5f5;
            color: #333;
            line-height: 1.6;
        }

.container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 20px;
        }

header {
            background-color: #2c3e50;
            color: white;
            padding: 20px 0;
            text-align: center;
            border-radius: 5px 5px 0 0;
            margin-bottom: 20px;
        }

.exam-info {
            display: flex;
            justify-content: space-between;
            background-color: #34495e;
            color: white;
            padding: 10px 20px;
            border-radius: 5px;
            margin-bottom: 20px;
        }

.timer {
            background-color: #e74c3c;
            padding: 5px 10px;
            border-radius: 3px;
            font-weight: bold;
        }

.question-container {
            background-color: white;
            border-radius: 5px;
            padding: 20px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            margin-bottom: 20px;
        }

.question {
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 15px;
        }

.options {
            margin-left: 20px;
        }

.option {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s;
        }

.option:hover {
            background-color: #f9f9f9;
        }

.option input {
            margin-right: 10px;
        }

.navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
        }

.btn {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s;
        }

.btn-primary {
            background-color: #3498db;
            color: white;
        }

.btn-primary:hover {
            background-color: #2980b9;
        }

.btn-success {
            background-color: #2ecc71;
            color: white;
        }

.btn-success:hover {
            background-color: #27ae60;
        }

.btn-danger {
            background-color: #e74c3c;
            color: white;
        }

.btn-danger:hover {
            background-color: #c0392b;
        }

.question-numbers {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 20px;
        }

.q-number {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: white;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: all 0.3s;
        }

.q-number:hover {
            background-color: #3498db;
            color: white;
        }

.q-number.active {
            background-color: #3498db;
            color: white;
        }

.q-number.answered {
            background-color: #2ecc71;
            color: white;
        }

@media (max-width: 768px) {
            .exam-info {
                flex-direction: column;
                gap: 10px;
            }
            
            .navigation {
                flex-direction: column;
                gap: 10px;
            }
            
            .btn {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Online Examination System</h1>
            <p>Final Examination - Computer Science</p>
        </header>

<div class="exam-info">
            <div>Candidate: John Doe</div>
            <div>Roll No: CS2023001</div>
            <div class="timer">Time Left: 45:22</div>
        </div>

<div class="question-container">
            <div class="question">3. Which of the following is not a programming language?</div>
            
            <div class="options">
                <label class="option">
                    <input type="radio" name="q3" value="a"> HTML
                </label>
                <label class="option">
                    <input type="radio" name="q3" value="b"> Python
                </label>
                <label class="option">
                    <input type="radio" name="q3" value="c"> Java
                </label>
                <label class="option">
                    <input type="radio" name="q3" value="d"> C++
                </label>
            </div>
        </div>

<div class="navigation">
            <button class="btn btn-primary">Previous</button>
            <div>
                <button class="btn btn-danger">End Exam</button>
                <button class="btn btn-success">Next</button>
            </div>
        </div>
    </div>
</body>
</html>

Related Examples

strawbery
by salvator

Author:
Baraka Salvator

8 months ago

904
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

1 year ago

1.3k
booking room or chamber
reflesh, freedom,sleeping,good vibes, etc.........

Author:
Uwase Alliance

8 months ago

1k
Hero section with call to action buttons

Author:
Prashant

3 years ago

15.3k
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Author:
Homayoun

1 month ago

433
The future ai
The is technology

Author:
ORGIN_DREAMS

8 months ago

780
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

9 months ago

1.8k
New Collection
A "New Collection" in fashion refers to a series of new garments and accessories designed and released by a designer or brand for a specific season (e.g., Spring/Summer, Fall/Winter). It's a carefully curated selection of items that typically share a common theme, style, or inspiration, reflecting the brand's identity and target audienc

Author:
nii fanny

8 months ago

530
Hero (with dark mode)
Full-width hero section with background image overlay. Includes headline, description text and CTA buttons. Supports dark mode and responsive design.

Author:
Maxim

1 year ago

1.4k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.7k
Hero component

Author:
Freja Jensen

3 years ago

13.1k
Clean hero section
Hero template with buttons

Author:
Laurits

2 years ago

15.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components