Project Overview
Tekup is an IT solutions and services business website template built with Tailwind CSS, offering 10 homepage variations covering common scenarios such as IT technology, startups, tech agencies, and consulting services. The template includes complete pages (About Us, Blog, Products, Services, Team, Pricing, FAQ, etc.) that can be directly used to quickly launch a corporate website.
Tech Stack
- Tailwind CSS 3.4.17
- Remix Icon (icon font)
- Swiper Bundle (carousel component)
- JOS (animation library)
- live-server + concurrently (development server)
- Custom font Afacad
Project Structure
tekuphtml-10/main-file/tekup/
├── index*.html # 10 homepage variations
├── about.html # About Us
├── blog*.html # Blog list and details
├── portfolio*.html # Portfolio
├── services*.html # Services
├── products*.html # Products
├── pricing.html # Pricing
├── team*.html # Team
├── testimonials.html # Testimonials
├── contact.html # Contact
├── faq.html # FAQ
├── tailwind.config.js # Tailwind configuration
├── package.json # Dependencies and scripts
├── src/
│ └── tailwind.css # Source styles (@tailwind directives + custom components)
└── assets/ # Build output, fonts, images
Key File Description
tailwind.config.js— Defines dark mode, responsive breakpoints, color variables (colorBlue, colorDark), and fontssrc/tailwind.css— Source entry point containing @tailwind directives and component styles (buttons, carousels, accordions, etc.) encapsulated in @layer componentspackage.json— npm scripts:startlaunches both live-server and Tailwind watch mode simultaneouslyindex.html— Main homepage showcasing header navigation, Hero section, and site-wide common structureassets/css/style.css— Compiled Tailwind stylesheet (generated fromsrc/tailwind.css)
Quick Start
cd tekuphtml-10/main-file/tekup
npm install
npm start
Open http://localhost:3000 in your browser. Styles will automatically hot-reload when modifying .html files or src/tailwind.css. For production build:
npm run minify
Usage Recommendations
The template comes with multiple industry-specific homepage variations. After selecting your preferred variant, it's recommended to delete the remaining index-*.html files to keep the project clean. The site-wide colors are based on colorBlue (#0119FF) and colorDark (#0D0E1D) defined in tailwind.config.js — you can adjust brand colors centrally here.
