ForumHub | Modern Community Forum HTML Template
ForumHub is a modern, responsive community forum HTML template built with Tailwind CSS. It ships with 39 ready-to-use pages — covering forums, threads, member profiles, messaging, leaderboards, authentication, error pages, and a component library — all with built-in dark mode and RTL support.
Every page features a consistent logged-in/logged-out navbar, interactive dropdowns, tabs, modals, toasts, and form validation. The template uses no build step out of the box — open any page in your browser and it works. For production, a Tailwind CSS build pipeline is included.
Key Highlights
- 39 Pages. Forums, profiles, messaging, leaderboards, authentication, error pages, and a component showcase — all cross-linked and ready to use.
- Dark Mode. Toggle light/dark with one click. Preference persists in localStorage and respects
prefers-color-scheme. - RTL Support. Full right-to-left layout. Toggle it on any page for Arabic, Hebrew, Persian, and other RTL languages.
- Component Library. 5 dedicated showcase pages with live interactive demos — alerts, buttons, badges, cards, forms, tables, modals, toasts. Mix and match freely.
- Tailwind CSS. Customize colors, spacing, and typography via
tailwind.config.jsor inline CDN config. Rebuild with one command. - Accessibility. Semantic HTML, ARIA labels, keyboard navigation, and focus-visible styles throughout.
- Zero Config. No build step required. Open in a browser and go. A production pipeline is available when you need it.
Features
Pages
- 39 hand-crafted HTML pages across 7 categories
- Forum homepage, thread view, categories, member directory, leaderboard
- User profiles, bookmarks, inbox/messages, notifications, settings
- Privacy policy, terms of service, contact form, report content
- Staff team page, forum rules, FAQ with live search, help center
- Login, register, forgot/reset password
- Error pages: 404, 403, 409, 500, maintenance mode
- Component showcase: alerts, buttons, badges, cards, forms, tables
Design
- Built with Tailwind CSS v3 + Inter font + Font Awesome 6
- Light and dark modes with localStorage persistence
- Full RTL language support (Arabic, Hebrew, Persian, etc.)
- Fully responsive — mobile, tablet, desktop
- Logged-in and logged-out navbar, 4 footer variants
- Notification panel with unread badges
Interactive Components
- Dropdown menus, dark mode toggle, RTL toggle
- Tab switching, filter tabs, pagination
- Toast notifications (4 positions × 4 types)
- Modal dialogs (confirm, form, wide, danger)
- Sortable tables, data tables with search/filter/selection
- Password visibility toggle and strength meter
- Drag-and-drop file upload, tags input, star rating
- Toggle switches, button groups, split buttons
- Social sign-in buttons, form validation
- All vanilla JS — no jQuery
Pages Included
Core Forum Pages
| # | Page | Description |
|---|---|---|
| 1 | index.html | CodeCanyon preview landing page with hero, stats, category showcase, feature highlights |
| 2 | landing.html | Full forum homepage with hero, featured categories, stats, and call-to-action |
| 3 | thread.html | Thread/post view with user sidebar, post content, reply form |
| 4 | categories.html | Forum category listing with descriptions, topic/post counts |
| 5 | members.html | Member directory with search, filter, role badges |
| 6 | leaderboard.html | Top contributors podium + ranked table with reputation, posts, solutions |
| 7 | new-thread.html | Create new discussion topic with title, category, content editor, tags |
| 8 | search.html | Search results with filters (categories, date, sort) |
| 9 | help.html | FAQ/help page with accordion-style questions |
| 10 | badges.html | Badges & achievements showcase with earned/locked states and categories |
| 11 | tags.html | Tag cloud + browse all tags with topic/post counts |
| 12 | group.html | Team page — administrators, moderators, and community managers |
User Pages
| # | Page | Description |
|---|---|---|
| 13 | profile.html | Public user profile with avatar, badges, activity feed, stats |
| 14 | bookmarks.html | Saved/bookmarked threads list with search, sort, and remove |
| 15 | account.html | User profile with stats, activity feed, badges |
| 16 | messages.html | Inbox/messaging with conversation list and chat view |
| 17 | notifications.html | Notification center with read/unread states |
| 18 | settings.html | Account settings with tabs (profile, account, notifications, privacy) |
Static & Legal Pages
| # | Page | Description |
|---|---|---|
| 19 | rules.html | Forum rules & guidelines with numbered sections and TOC |
| 20 | faq.html | Frequently asked questions with live search and categorized accordions |
| 21 | privacy.html | Privacy policy with table of contents and legal sections |
| 22 | terms.html | Terms of service with rules, guidelines, and disclaimers |
| 23 | contact.html | Contact form with subject selector, sidebar info cards, toast confirmation |
| 24 | report.html | Report content form with validation, file upload, and submission toast |
Community & Staff Pages
| # | Page | Description |
|---|---|---|
| 25 | staff.html | Staff team listing — admins, moderators, and support team member cards |
Authentication Pages
| # | Page | Description |
|---|---|---|
| 26 | login.html | Sign-in with email/password, social buttons, “remember me” |
| 27 | register.html | Registration form with validation |
| 28 | forgot-password.html | Password reset request form |
| 29 | reset-password.html | New password form with strength meter |
Error & Utility Pages
| # | Page | Description |
|---|---|---|
| 30 | 404.html | Page not found |
| 31 | 403.html | Forbidden / access denied |
| 32 | 409.html | Conflict (e.g., duplicate action) |
| 33 | 500.html | Internal server error |
| 34 | maintenance.html | Site offline / maintenance mode with animated progress bar |
Component Showcase Pages
| # | Page | Description |
|---|---|---|
| 35 | components-alerts.html | Alert variants, toasts (4 types × 4 positions), notification bar |
| 36 | components-badges-buttons.html | Badge styles, button variants, button groups, split buttons, social buttons |
| 37 | components-cards.html | Card layouts, stat cards, avatar cards, feature cards, pricing cards |
| 38 | components-forms.html | Input fields, selects, checkboxes, radios, switches, upload, tags, rating, password strength |
| 39 | components-tables.html | Sortable tables, data tables with search/filter/select-all, pagination variants |
What’s Included
- 39 HTML files
- 1 documentation file (
Documentation/index.html) - 1 RTL override CSS file (
rtl-override.css) - Tailwind CSS configuration (
tailwind.config.js) - PostCSS configuration (
postcss.config.js) - Source CSS with
@applycomponent classes (src/input.css) package.jsonwith build scripts- Thumbnail (80×80 px)
- 1 main preview image (590×300)
- 3 feature showcase images
- 12 browser-framed gallery screenshots
- 39 full-page reference screenshots
Third-Party Assets
- Font Awesome 6 (Free) — Icons used throughout the template. Licensed under CC BY 4.0 and SIL OFL 1.1.
- Inter Font — Google Font used for typography.
- Images — All images in preview/demo pages are for illustration purposes only and are not included in the download.
Requirements
- A modern web browser (Chrome, Firefox, Safari, Edge)
- No server required — open HTML files directly in your browser
- For production builds: Node.js 18+ and npm
Customization
Changing Colors:
All colors are defined in tailwind.config.js under primary (indigo) and surface (slate) families. Update the hex values there, then rebuild with npm run build. For CDN usage, update the tailwind.config object in each page’s <script> block.
Dark Mode Variables:
CSS custom properties in the <style> block of each page control component colors in light and dark modes. Update the :root and .dark blocks to match your palette.
RTL Overrides:
Edit rtl-override.css to adjust RTL-specific spacing, alignment, and icon flips.
0 average based on 0 ratings.
Search plugins
Browse Categories
