Juora - Minimal Tailwind CSS 3 Template preview 1

Juora - Minimal Tailwind CSS 3 Template

bookmark

Juora is a minimalist responsive template built with Tailwind CSS 3, designed specifically for design and branding agency websites. It features interactive functionality including a portfolio gallery, navigation anchor scrolling, and scr...

HTMLagencyconsultantcorporatecreativegalleryminimalphotography

Project Overview

Juora is a minimalist responsive template built with Tailwind CSS 3, designed specifically for design and branding agency websites. It features interactive functionality including a portfolio gallery, navigation anchor scrolling, and scroll spy, making it ideal for quickly building creative agencies, personal portfolios, or corporate websites.

Tech Stack

  • Tailwind CSS ^3.4.1
  • Gulp 4 (build tool)
  • jQuery + scrollspy plugin
  • Yarn (package manager)
  • animate.css, preline, shufflejs (UI/interaction libraries)
  • @tailwindcss/forms

Project Structure

text
Juora_v1.0/
├── HTML/                      # Production source code
│   ├── src/                   # HTML page source files
│   │   ├── index.html
│   │   ├── about.html
│   │   ├── blog.html
│   │   ├── contact.html
│   │   ├── services.html
│   │   ├── work.html
│   │   └── work-detail.html
│   ├── gulpfile.js            # Gulp build configuration
│   ├── package.json
│   └── tailwind.config.js     # Tailwind configuration file
├── Documentation/             # Official documentation (with examples)
│   ├── index.html
│   ├── css/styles.css
│   └── js/app.js

Core File Descriptions

  • HTML/src/index.html — Homepage entry, includes Hero section and portfolio filtering gallery module
  • HTML/gulpfile.js — Gulp automated build workflow (compiles Tailwind, minifies CSS/JS, hot reload)
  • HTML/package.json — Project dependencies and script definitions
  • HTML/tailwind.config.js — Tailwind CSS configuration, customizable theme colors and plugins
  • HTML/src/work.html — Portfolio showcase page (with category filtering)
  • Documentation/js/app.js — Scroll anchor and scrollspy logic

Quick Start

bash
cd Juora_v1.0/HTML

# Install dependencies (Yarn recommended)
yarn install

# Start development server (hot reload + BrowserSync)
yarn dev

# Build for production
yarn build

Usage Tips

  • The template includes shufflejs for portfolio filtering, allowing display by four categories: Natural, Creative, Personal, and Photography.
  • To modify theme colors or breakpoints, simply edit theme.extend in tailwind.config.js.
  • Production build output defaults to the HTML/dist directory — only this directory needs to be uploaded for deployment.
help_outline

FAQ