11ty Landing Page

11ty Landing Page

Template information


A simple landing page built with 11ty and Tailwind CSS.

Github Info
1 open issue
46 stars
3 watching
28 forks
Last updated

About the template

A simple landing page built with 11ty and Tailwind CSS.
Port of the Hugo Version

How to use this template


  • Eleventy (developed and tested with version 0.12.1)
  • Tailwind CSS
All other dependencies are either linked from a CDN or included in this repository.


  • Fork, clone or download
  • cd into the root folder
  • run npm install
  • run npm run serve
  • open a browser and go to http://localhost:8080

Basic configuration:

  • Eleventy -> ./.eleventy.js
  • Tailwind -> ./tailwind.config.js
  • Netlify -> ./netlify.toml

CSS is built via PostCSS and based on ./src/_includes/css/_page.css. Building CSS gets triggered by ./src/css/page.11ty.js and Tailwind's config is set to JIT (see: Tailwind docs)

Please note that this CSS build does not include the normalize.css file used for the 2 regular pages (imprint, privacy) - a minified production version is stored in ./src/static/css and gets included in the build by default.

Change Content:

Page content is stored in ./scr directory.

Change Templates/Layout:

Page structure and templates are stored in ./src/_layouts/ and can be edited there.

Best have a look at ./layouts/base.njk first to understand how it all comes together - the page itself is constructed from partial templates stored in ./src/includes/ and each section has a corresponding template file (section.**.njk) stored there.

in ./src/ arranges everything, meaning that sections can be added/re-ordered/removed/... there.

Change images:

Images are stored in ./static/img/; everything in there can be considered a placeholder that should eventually be replaced with your actual production images.

Get notified when we add new designs.

Twice a month I share the best Tailwind templates, UI kits and components in my newsletter. 210 Tailwind hackers find it useful. I'd love you to join.