A beautiful extension for TailwindCSS.
Tailwind Starter Kit is Free and Open Source. It does not change or add any CSS to the already one from TailwindCSS. It features multiple HTML elements and it comes with dynamic components for ReactJS, Vue and Angular.
CSS Components
Tailwind Starter Kit comes with 120 Fully Coded CSS elements.
Pages
This extension also comes with 4 sample pages.
JavaScript Components
We also feature 16 dynamic components.
Table of Contents
- Versions
- Documentation
- Quick Start
- Custom themes and dashboards
- Browser Support
- Reporting Issues
- Licensing
- Useful Links
- Resources
Versions
FREE Dashboard
Angular Dashboard Page | HTML Dashboard Page | React Dashboard Page | VueJS Dashboard Page |
---|---|---|---|
Download Angular | Download HTML | Download React | Download Vue |
FREE Design System (UI Kit)
Angular Landing Page | HTML Landing Page | React Landing Page | VueJS Landing Page | NextJS Landing Page |
---|---|---|---|---|
Download Angular | Download HTML | Download React | Download Vue | Download Next |
Angular Login Page | HTML Login Page | React Login Page | VueJS Login Page |
---|---|---|---|
Download Angular | Download HTML | Download React | Download Vue |
Angular Profile Page | HTML Profile Page | React Profile Page | VueJS Profile Page |
---|---|---|---|
Download Angular | Download HTML | Download React | Download Vue |
Documentation
The documentation for the Tailwind Starter Kit is hosted at our website.
Quick start
Custom themes and dashboards
Javascript | React | Angular |
---|---|---|
Vuejs | NextJs | Svelte |
---|---|---|
Notus Pro React |
---|
Browser Support
At present, we officially aim to support the last two versions of the following browsers:
Chrome | Firefox | Edge | Safari | Opera |
---|---|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
Reporting Issues
We use GitHub Issues as the official bug tracker for the Angular Landing Page. Here are some advices for our users that want to report an issue:
- Make sure that you are using the latest version of the Angular Landing Page. Check the CHANGELOG from your dashboard on our website.
- Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
- Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
Licensing
-
Copyright 2019 Creative Tim
-
Licensed under MIT
Useful Links
- Tutorials
- Affiliate Program (earn money)
- Blog Creative Tim
- Free Products from Creative Tim
- Premium Products from Creative Tim
- React Products from Creative Tim
- Angular Products from Creative Tim
- VueJS Products from Creative Tim
- More products from Creative Tim
- Check our Bundles here
Social Media
Twitter: https://twitter.com/CreativeTim
Facebook: https://www.facebook.com/CreativeTim
Dribbble: https://dribbble.com/creativetim
Instagram: https://www.instagram.com/creativetimofficial/
Resources
- Demo: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/#/presentation?ref=tsk-readme
- Download Page: https://github.com/creativetimofficial/tailwind-starter-kit/archive/main.zip
- Documentation: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/#/documentation/quick-start?ref=tsk-readme
- Support: https://www.creative-tim.com/contact-us?ref=tsk-readme
- Issues: Github Issues Page
Horizontal lines on the HTML landing page with Safari
Hi, there are horizontal lines appearing before/after sections on the HTML landing page. This happens on Safari version 14.0. It also appears randomly, depending on the size of the safari window. Attached is an example of the issue, which is easy to reproduce.
Added NextJS Landing Page using Tailwind Starter Kit
Hello I created a NextJS version of Landing Page using the Tailwind Starter Kit, i also included the necessary configuration for it to work seamlessly here is some of what is included:
Am contributing to this project mainly because I find it very useful and am thankful for the initiative and secondly as a contribution to Open-Source during Hacktoberfest 2020.
Plans on check tailwind.config.js into source control?
Hi everyone! First of all I want to say thanks and congratulate you on the awesome work on putting up this starter kit, I love how it looks and I am looking forward to implementing it on my projects.
However, I'm wondering if there is any plan on checking into GitHub the
tailwind.config.js
file, on that way developers can tweak some stuff according to their needs.Again, thanks a lot for taking the time on building such an awesome template! <3
MIT Licensed or not?
The repository is marked with the MIT license, but the Resources section at the end of the README.md links to a License Agreement page, which is a proprietary license.
Routes not working OOTB
I expected the routes to work by simple adding new components and defining new routes, but it seems to need extra configuration. This is how I extended the Dashboard page's
main.js
:I have created the Home component by renaming the Dashboard component, and created the About component. How do I make it respect these routes?
Download links under README are not working
build(deps): bump elliptic from 6.5.3 to 6.5.4 in /Landing Page/next-landing-page
Bumps elliptic from 6.5.3 to 6.5.4.
Commits
43ac7f2
6.5.4f4bc72b
package: bump deps441b742
ec: validate that a point before deriving keyse71b2d9
lib: relint using eslint8421a01
build(deps): bump elliptic from 6.4.1 to 6.5.3 (#231)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Click on non-React examples on website lead to homepage
Example: https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/react/tabs/text
If I click on any other language/framework than React, I get redirected to the home page.
Tested in latest FF and Chrome.
This issue exists on all examples.
Is it possible to compile the stylesheet by ourself instead of using the cdn provided one?
Hi, First of all, thanks for this awesome product. As it says in the intro, It does not change or add any CSS to the already one from TailwindCSS, I was wondering will it be possible compile the css file by ourself. I am trying to use it on a laravel project, using laravel mix to compile my own css file form standard tailwind installation. Since it is using the standard tailwind classes, should the theme work exactly same if i compile it form standard tailwind install Thanks for your time.
navbar-expand-lg class does not exist in any of the imported css files
Hello guys. It seems that you've forgotten this class, maybe from a bootstrap code copy paste, so I believe that you can safely delete it! Keep up the good work!
Clicking anywhere in the modal closes it
Hey, awesome project!
I was checking out the modal you have here and noticed clicking anywhere inside the modal will close it.
https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/react/modals/regular
multiple NPM issues
PS C:\xampp\htdocs\creative_tim\notus_react_admin> npm audit fix --force npm WARN using --force Recommended protections disabled. npm WARN audit Updating postcss to 2.2.19,which is outside your stated dependency range. npm WARN audit Updating react-scripts to 5.0.1,which is a SemVer major change. npm WARN audit Updating tailwindcss to 2.2.19,which is outside your stated dependency range. npm WARN audit Updating gulp to 3.9.1,which is a SemVer major change. npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: [email protected] npm WARN Found: [email protected] npm WARN node_modules/postcss npm WARN peer [email protected]"^8.1.0" from [email protected] npm WARN node_modules/autoprefixer npm WARN peer [email protected]"^10.0.2" from [email protected] npm WARN node_modules/tailwindcss npm WARN 1 more (the root project) npm WARN 5 more (postcss-js, postcss-safe-parser, purgecss, tailwindcss, the root project) npm WARN npm WARN Could not resolve dependency: npm WARN peer [email protected]"^8.1.0" from [email protected] npm WARN node_modules/autoprefixer npm WARN peer [email protected]"^10.0.2" from [email protected] npm WARN node_modules/tailwindcss npm WARN 1 more (the root project) npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: [email protected] npm WARN Found: peer [email protected]"^8.0.9" from [email protected] npm WARN node_modules/tailwindcss npm WARN [email protected]"2.2.19" from the root project npm WARN npm WARN Could not resolve dependency: npm WARN peer [email protected]"^8.0.9" from [email protected] npm WARN node_modules/tailwindcss npm WARN [email protected]"2.2.19" from the root project npm WARN npm WARN Conflicting peer dependency: [email protected] npm WARN node_modules/postcss npm WARN peer [email protected]"^8.0.9" from [email protected] npm WARN node_modules/tailwindcss npm WARN [email protected]"2.2.19" from the root project npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: [email protected] npm WARN Found: peer [email protected]"^8.2.14" from [email protected] npm WARN node_modules/tailwindcss/node_modules/postcss-nested npm WARN [email protected]"5.0.6" from [email protected] npm WARN node_modules/tailwindcss npm WARN npm WARN Could not resolve dependency: npm WARN peer [email protected]"^8.2.14" from [email protected] npm WARN node_modules/tailwindcss/node_modules/postcss-nested npm WARN [email protected]"5.0.6" from [email protected] npm WARN node_modules/tailwindcss npm WARN deprecated [email protected]: This module relies on Node.js's internals and will break at some point. Do not use it, and update to [email protected] npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue npm WARN deprecated [email protected]: please upgrade to graceful-fs 4 for compatibility with current and future versions of Node.js npm WARN deprecated gulp[email protected]: gulp-util is deprecated - replace it, following the guidelines at https://medium.com/gulpjs/gulp-util-ca3b1f9f9ac5 npm WARN deprecated [email protected]: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
added 375 packages, removed 860 packages, changed 245 packages, and audited 1735 packages in 28s
207 packages are looking for funding run
npm fund
for detailsnpm audit report
lodash <=4.17.20 Severity: critical Prototype Pollution in lodash - https://github.com/advisories/GHSA-jf85-cpcp-j695 Prototype Pollution in lodash - https://github.com/advisories/GHSA-4xc9-xhrj-v574 Prototype Pollution in lodash - https://github.com/advisories/GHSA-fvqr-27wr-82fm Command Injection in lodash - https://github.com/advisories/GHSA-35jh-r3h4-6jhm Regular Expression Denial of Service (ReDoS) in lodash - https://github.com/advisories/GHSA-29mw-wpgm-hmr9 Regular Expression Denial of Service (ReDoS) in lodash - https://github.com/advisories/GHSA-x5rq-j2xg-h7qm Prototype Pollution in lodash - https://github.com/advisories/GHSA-p6mc-m468-83gw fix available via
npm audit fix
node_modules/globule/node_modules/lodash globule <=1.1.0 Depends on vulnerable versions of glob Depends on vulnerable versions of lodash Depends on vulnerable versions of minimatch node_modules/globule gaze 0.4.0 - 1.0.0 Depends on vulnerable versions of globule node_modules/gaze glob-watcher <=2.0.0 Depends on vulnerable versions of gaze node_modules/glob-watcherlodash.template <4.5.0 Severity: critical Prototype Pollution in lodash - https://github.com/advisories/GHSA-jf85-cpcp-j695 fix available via
npm audit fix --force
Will install [email protected], which is a breaking change node_modules/lodash.template gulp-util >=1.1.0 Depends on vulnerable versions of lodash.template node_modules/gulp-util gulp 2.6.1 - 3.9.1 Depends on vulnerable versions of gulp-util Depends on vulnerable versions of vinyl-fs node_modules/gulpminimatch <3.0.2 Severity: high Regular Expression Denial of Service in minimatch - https://github.com/advisories/GHSA-hxm2-r34f-qmc5 fix available via
npm audit fix --force
Will install [email protected], which is a breaking change node_modules/glob-stream/node_modules/minimatch node_modules/globule/node_modules/minimatch glob 3.0.0 - 5.0.14 Depends on vulnerable versions of minimatch node_modules/glob-stream/node_modules/glob node_modules/globule/node_modules/glob glob-stream 0.2.0 - 5.2.0 Depends on vulnerable versions of glob Depends on vulnerable versions of minimatch node_modules/glob-stream vinyl-fs <=1.0.0 Depends on vulnerable versions of glob-stream Depends on vulnerable versions of glob-watcher node_modules/vinyl-fsnth-check <2.0.1 Severity: high Inefficient Regular Expression Complexity in nth-check - https://github.com/advisories/GHSA-rp65-9cf3-cjxr fix available via
npm audit fix --force
Will install [email protected], which is a breaking change node_modules/svgo/node_modules/nth-check css-select <=3.1.0 Depends on vulnerable versions of nth-check node_modules/svgo/node_modules/css-select svgo 1.0.0 - 1.3.2 Depends on vulnerable versions of css-select node_modules/svgo @svgr/plugin-svgo <=5.5.0 Depends on vulnerable versions of svgo node_modules/@svgr/plugin-svgo @svgr/webpack 4.0.0 - 5.5.0 Depends on vulnerable versions of @svgr/plugin-svgo node_modules/@svgr/webpack react-scripts >=2.1.4 Depends on vulnerable versions of @svgr/webpack node_modules/react-scripts17 vulnerabilities (13 high, 4 critical)
To address issues that do not require attention, run: npm audit fix
To address all issues (including breaking changes), run: npm audit fix --force
profile page responsiveness
in the mobile view the connect button isn't responsive it goes to the left side
can be fixed if it takes all the width on the mobile view or to be centered when the width is small
Iframe blocking
Hi, it seems like there is an issue with the save change. If i try to make a change to the content the iframe pop up and block all the links and button. Is there any way to fix this ? thank you