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

565

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

Banner - Hero - Splash Section

Author:
ABDO-SY

10 months ago

990
Smooth Slide-in Animation for Text in Tailwind CSS
Learn how to create a smooth slide-in animation for text using Tailwind CSS. This guide covers defining custom animations in tailwind.config.js and applying them to elements for a modern and engaging UI effect. 🚀

Author:
Vikas Kushwah

9 months ago

1.6k
Life Tree
by salvator

Author:
Baraka Salvator

7 months ago

850
Responsive Header and Hero Section Design
Responsive Header and Hero Section Design provides flexible adaptability across all screen sizes and devices.

Author:
ABDO-SY

10 months ago

2.6k
3d element

Author:
Omer fils ELENGA

1 month ago

98
Hero section - Htmlwind
Simple centered hero section

Author:
Htmlwind

6 months ago

720
coffee
a beverage brewed from the roasted and ground seeds of the tropical evergreen coffee plant. Coffee is one of the three most popular beverages in the world (alongside water and tea), and it is one of the most profitable international commodities

Author:
Augustin

7 months ago

955
Product Page
Showcase for the product.

Author:
muhamadrofii911

1 year ago

2.4k
Simple Hero Section
Hero Section using Tailwind

Author:
Ahita Bisma Adlula

10 months ago

1.2k
Hero section with search

Author:
TailwindFlex

3 years ago

11.7k
AcodeMaster GameZone – Play Your Favorite Games Online
AcodeMaster GameZone is a modern gaming website where you can discover, explore, and play exciting games anytime, anywhere. Designed with smooth animations and a stylish dark theme using Tailwind CSS, it offers a fast and fun experience for every gamer.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

864
Home
html , css

Author:
Hacker Development

7 months ago

621

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components