Sangat — Tailwind CSS Gurudwara Template (HTML)

About This Item

Show whether the gurdwara is open, which prayer comes next and what the langar hall is serving with Sangat, a Tailwind CSS gurudwara template for committees and Sikh community groups. It is built on Tailwind CSS 4 and covers the daily programme, bookings, giving and a shop.

Two Home Pages for a Gurdwara Website

Home 01 opens with a Harmandir Sahib hero slider over the Sarovar light. Below it sit the next event with a countdown, the latest sermon in an audio player, an about block with counters and causes showing raised, goal and days left. After that, latest events and sermons, ways to help and the news feed follow.

Home 02 starts with a candle-lit video hero and a bar for today: what is on now, what is next and the langar hall’s hours. It then lays out the day from Amrit Vela to Sukhasan as cards, and it also shows today’s Hukamnama. It ends with a langar sponsorship quote, the katha list, ways to help, news and gurdwara locations.

Path Booking, Langar Seva and Donation Pages

These pages matter most to a gurdwara, because they handle the jobs a sangat asks about every week.

• Path Booking: choose Akhand Path, Sehaj Path or Sukhmani Sahib, then see the start, the Bhog time, the hall’s booked days and the next free start. The same flow then adds langar for guests, home readings and the total.
• Langar Seva: a sponsorship calculator with three menus and karah prashad by the degh, plus a seven-day rota that shows places left per shift.
• Donation: one-time or monthly gifts, a campaign preview of what a gift adds and a dasvandh calculator.
• Daily Programme: the day from Amrit Vela to Sukhasan, weekly diwans and classes, and today’s Hukam.

Tailwind CSS Gurudwara Template With Langar and Path Booking

Each page in this Tailwind CSS gurudwara template uses Khalsa navy, saffron and Tiro Gurmukhi headings to keep a calm, familiar tone. The logic underneath is real: events date themselves from today, so a committee never has to fix a stale date. A Khanda preloader assembles the emblem and flies it into the header logo.

Light and dark mode share one switch that remembers the choice. Right-to-left layouts cover every page with an LTR and RTL switch.

Events, Sermons and Gurudwara Template Shop Pages

The Events page sorts everything into Upcoming, This Month and Past. Each has a countdown, a Google Calendar link and an .ics file, so members can add a diwan to their own calendars. Sermons list katha and kirtan as a list or grid, with filters and an audio player, plus a Sermon Details page.

The shop has Shop Left Sidebar, Shop Right Sidebar and Shop Full Width layouts with filters, sort and search. Product Details, Cart and Checkout complete it, with a coupon, a free-delivery meter and pickup at the gurdwara.

Tailwind CSS 4 Theme Settings for a Gurudwara Template

The compiled CSS holds only the classes the pages use, so unused styles do not ship. You set colours, fonts and spacing once in the Tailwind theme, so changing the saffron or the navy there also reaches the Shop, Events and Path Booking pages together. Because a section’s styling travels with its HTML, you can copy a block such as the langar rota to another page and it keeps its look.

All 30 Pages Listed

Sangat has 30 HTML pages, including two right-to-left home pages. Beyond the pages above, it includes:

• About, Our Sevadars and FAQ with search
• Event Details, Sermon Details and Blog Grid, Blog List and Blog Details
• Contact with a working form and map
• Login, Register and Forgot Password
• Coming Soon and 404

Font Awesome Free and an icon font load locally, and headings use Tiro Gurmukhi with Noto Sans for body text.

The finished pages open as they are, and the Tailwind source is included if you want to edit and rebuild the styles. Neutral placeholders replace the preview images, so you can add your own photos of the darbar hall. Documentation is included. The scripts behind the interface are Swiper 11, GSAP 3 with ScrollTrigger and Fancybox 3.5.