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.js or 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 @apply component classes (src/input.css)
package.json with 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.

ForumHub | Modern Community Forum HTML Template