Modern Template Showcase

Overview

Igwe University is a modern, responsive HTML5 theme built with Tailwind CSS and Alpine.js. Designed for educational institutions, this theme offers a clean, professional look with customizable layouts and components, making it ideal for universities, colleges, schools, and online learning portals.

Theme Description

Igwe University is a fully responsive, high-quality HTML theme crafted for educational websites. Featuring over 20 ready-made pages including Home, About, Programs, Courses, Events, News, Team, Contact, and more, this theme delivers:

• Tailwind CSS 3+ for ultra-fast styling and customization
• Alpine.js for lightweight, declarative interactivity (mobile menus, accordions, counters)
• Google Fonts (Oswald & Open Sans) with built-in typography classes
• Font Awesome icons integrated for rich visual design
• SEO-friendly markup & ARIA attributes for accessibility
• RTL support ready out of the box
• Detailed documentation with installation, customization, and best practices

Key Features

Responsive Design

Mobile-first approach with perfect display on all devices

Customizable

Easy color scheme changes with CSS variables

Fast Performance

Optimized for speed with minimal dependencies

20+ Page Templates

All essential pages for an educational website

Theme Preview

1. Installation

Download the theme ZIP and unzip into your web root (e.g., public/ or www/).

Include Tailwind CSS and Alpine.js via CDN in your <head>:

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" />

Open any page (e.g., index.html) in your browser.
Customize configuration variables in css/style.css (e.g., --color, font-sizes, breakpoints).

2. File Structure

/igwe-university-theme/
├── index.html
├── about.html
├── programs.html
├── courses.html
├── events.html
├── stories.html
├── single_event.html
├── single_story.html
├── team.html
├── contact.html
├── css/
│   └── style.css        # Theme variables & custom classes
├── js/
│   └── main.js          # Alpine.js initializations
├── images/              # All static assets
└── partials/            # Reusable header, footer, nav includes

3. Customization

Colors & Typography

Edit CSS variables at the top of css/style.css:

:root {
  --blue: #00BBD3;
  --teal: #00A79C;
  /* ... */
}

Update font families (Oswald, Open Sans) in the Google Fonts link in the <head>.

Modify header markup in each page or extract to partials/header.html.
Control mobile menu state via Alpine.js (x-data, x-show).
Swap logo, links, and call-to-action button text/URL.

Footer

Four columns of links with customizable headings.
Social icons and copyright text at bottom.
Edit column content in the footer section HTML.

Hero Sections

Several hero styles: full-screen video, static image with gradient, text-only.
Change background via <img> or <video> source and adjust overlay opacity.

4. Page Templates

index.html: Home with hero video, quick links, stats, news, events
about.html: Overview, mission, values, leadership, campus tour
programs.html: Program listing with filter form and cards
courses.html: Course catalog with search/filter and cards
single_course.html: Course detail with syllabus and instructor info
events.html: Upcoming & featured events listing
single_event.html: Event detail with schedule, FAQs, registration
stories.html: News & feature stories grid
single_story.html: Story detail with metadata sidebar
team.html: Team overview with leadership & faculty grids
contact.html: Contact form with map embed

5. Components Library

Cards: .bg-white .rounded-lg .shadow-md .hover-scale
Buttons: .btn .hover:bg-blue-dark .shadow-lg
Form Controls: .rounded-lg .focus:ring-2
Grids: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
Typography: .text-hero .text-section-title .font-heading
Utilities: spacing, flex, text-color classes

6. Advanced Usage

RTL Support: Add dir="rtl" to <html> and adjust text alignment classes.
Dark Mode: Use Tailwind’s dark: variants by toggling class="dark" on <html>.
Building: Integrate with PostCSS or Tailwind CLI to purge unused CSS and enable JIT mode.

7. Troubleshooting

Mobile menu not opening: Ensure Alpine.js is loaded and x-data scope matches.
Broken layouts: Verify Tailwind CDN script inclusion and no custom CSS conflicts.
Form styles missing: Check focus ring classes and border styles in css/style.css.

8. Support & Updates

For questions, feature requests, or bug reports, please contact our support team at [email protected]. Premium buyers receive free lifetime updates and priority email support.

Igwe University Tailwind HTML Theme