Qiblah — Tailwind CSS Mosque Template (HTML)

About This Item

Qiblah gives a congregation one place to check the five prayer times, the Qibla direction and the Hijri date, and it is built with Tailwind CSS 4. This Tailwind CSS mosque template is meant for mosques, masjids and Islamic centres that want one site for worship times, events, donations and classes.

The template has 32 pages and 2 homepage designs. The colours are Iznik teal and dome gold on a warm cream ground, and it also has Arabic-ready type and a crescent preloader.

Tailwind CSS Mosque Template With Prayer Tools

These five pages matter most to a mosque, because members open them every day, and so they set the site apart from a generic charity layout.

• Prayer Times: Fajr to Isha for any city and time zone, with five calculation methods. Shafi’i or Hanafi Asr, a high-latitude rule, iqamah times, Jumu’ah and a full month’s timetable are also covered.
• Qibla Finder: it gives the bearing and distance from a city or your own coordinates, plus a compass.
• Zakat Calculator: cash, gold, silver, investments and business stock are counted less debts, against the gold or silver nisab. The amount then carries straight to the donation form.
• Ramadan Timetable: suhoor and iftar for every day, the length of each fast and Zakat al-Fitr.
• Islamic Calendar: Hijri and Gregorian dates sit side by side, with a two-way converter.

You enter your centre once in a single settings object, and then the prayer times, Hijri dates and Qibla bearing follow from it.

Two Homepages for a Mosque Template

Home 01 centres on the prayer day. It opens with a hero slider and a prayer bar showing adhan, iqamah and the next prayer counting down. Below that come charity counters, everyday tools, a video band, events, khutbah recordings with a player, a gallery and news.

Home 02 centres on the community. It has a video hero, a word from the imam, the five prayers stacked by hour and a countdown to the next Islamic date. It also includes Ramadan with a Zakat al-Fitr calculator, then news.

Khutbah, Events, Donation and Madrasa Pages in the Mosque Template

The community side covers what a mosque office handles every week, so each task has its own page.

• Khutbah archive with an audio player, plus Khutbah Details.
• Events in Upcoming, This Month and Past views, while Event Details adds a countdown, RSVP and calendar export.
• Donation with funds and monthly giving.
• About with How To Pray, and Imams & Scholars.
• Madrasa with live fees, and Services with nikah booking.
• Shop, Product, Cart and Checkout.
• FAQ with search, Blog in five post formats, Blog Details and Contact with a working form and map.
• Account pages for sign in and sign up, a password reset page, a Coming Soon page and a 404 page.

Every form posts to a server-side handler, and you can switch on invisible reCAPTCHA v3 when you want spam protection.

Arabic, RTL and Dark Mode

A flag language picker turns any page right to left, and the template also uses the Arabic-ready fonts El Messiri and Readex Pro. A switch in the top bar changes between light and dark mode. Motion includes photo reveals, a WebGL star lattice and a twinkling night sky, while prefers-reduced-motion is respected. Swiper sliders, Fancybox video and galleries, and GSAP with ScrollTrigger drive the interactive parts.

This Tailwind CSS mosque template keeps the prayer schedule, the Hijri date and the zakat calculator on pages that a committee can edit without a developer.

Tailwind CSS 4 in the Qiblah Pages

Colours, fonts and spacing live in one Tailwind theme, so changing the teal or the gold there reaches every page. Each section carries its styling as utility classes beside its markup, so you can read and adjust the prayer bar or a donation card in place. A block can move to another page and look the same.

You can open the finished pages as they are in a browser. The Tailwind source is also included for anyone who wants to edit and rebuild the styles. Neutral placeholders replace the preview images, so you then add your own mosque photos.