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

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

Modern page
hero page by salvator

Author:
Baraka Salvator

2 months ago

564
chair
by salvator

Author:
Baraka Salvator

2 months ago

358
Slide
A slide component which could be used as hero section or in a slideshow

Author:
farid

8 months ago

1.2k
NFT Header with Hero

Author:
Abdul Baset Bappy

1 month ago

339
Summer Collection 2025
Summer Collection 2025

Author:
matoleo chance

2 months ago

148
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

3 months ago

820
Chat Box for Marketing
An Onyx component. This chat box is great for SAAS landing pages where you want to mock customer interactions or expectations.

Author:
Coastal UI

10 months ago

1.3k
Portfolio Hero Section 3
visually stunning and captivating hero section component for your portfolio website.

$$@(\/)(\/)Y$ Author:
$@(\/)(\/)Y

1 year ago

7.3k
Responsive Hero Section
Key features of this hero section: 1. Responsive layout: Uses a column layout on mobile and switches to a row layout on medium screens and larger. 2. Left side: - Company name as a large heading - Brief description - "Learn More" button 3. Right side: - "Why Choose Us?" section with bullet points - Two call-to-action buttons: "Get Started" and "Contact Sales" 4. Styling: - Uses Tailwind's utility classes for responsive design, colors, spacing, and typography - Incorporates a shadow and rounded corners for the right-side content box - Includes hover effects on buttons for better interactivity This hero section will be fully responsive: - On mobile devices, it will stack vertically with the company info on top and the details below. - On larger screens, it will display in a two-column layout. The use of Tailwind CSS classes ensures that the design is consistent and easily adjustable. You can further customize the colors, fonts, and spacing to match your brand's specific design guidelines. Would you like me to explain any part of this code or make any adjustments?

Author:
Vernon Francis

11 months ago

1.8k
tradition music
by salvator

Author:
Baraka Salvator

2 months ago

451
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

4 months ago

305
Hero

Author:
Hasan AlDoy (McDoy)

6 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components