Introduction
TailPro is Multipurpose Tailwind template with flat design and fast loading. This template is perfect for make awesome landing page for your site.
Quick start
Looking to quickly add TailPro to your project? Use css, js and starter page from this package.
CSS
Copy the Tailwind stylesheets <link> and paste to your <head>.
<!-- Styles -->
<link rel="stylesheet" href="src/css/style.css">
JS
Copy-paste the Alpine JS, Plugins js and Theme js <script> place the following near the end of your pages, right before the closing </body> tag.
<!-- alpine js -->
<script src="src/plugins/alpinejs/dist/cdn.min.js"></script>
<!-- plugins js -->
<script src="src/plugins/jarallax/dist/jarallax.min.js"></script>
<script src="src/plugins/lightgallery.js/dist/js/lightgallery.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-thumbnail.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-video.js"></script>
<script src="src/plugins/flickity/dist/flickity.pkgd.min.js"></script>
<script src="src/plugins/typed.js/dist/typed.umd.js"></script>
<script src="src/plugins/vanilla-lazyload/dist/lazyload.min.js"></script>
<script src="src/plugins/hc-sticky/dist/hc-sticky.js"></script>
<script src="src/plugins/wow/wow.min.js"></script>
<!-- theme js -->
<script src="src/js/theme.js"></script>
Development starter template
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
<!doctype html>
<html lang="en" dir="ltr">
<head>
<!-- Title -->
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Favicon -->
<link rel="icon" href="src/img/favicon.png">
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap" rel="stylesheet">
<!--Styles-->
<link rel="stylesheet" href="src/css/style.css">
</head>
<body class="pt-20 font-sans text-base font-normal text-gray-700 dark:bg-gray-800 dark:text-gray-300">
<h1>Hello, world!</h1>
<!-- =========={ JAVASCRIPT }========== -->
<!-- alpine js -->
<script src="src/plugins/alpinejs/dist/cdn.min.js"></script>
<!-- plugins js -->
<script src="src/plugins/jarallax/dist/jarallax.min.js"></script>
<script src="src/plugins/lightgallery.js/dist/js/lightgallery.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-thumbnail.min.js"></script>
<script src="src/plugins/lightgallery.js/demo/js/lg-video.js"></script>
<script src="src/plugins/flickity/dist/flickity.pkgd.min.js"></script>
<script src="src/plugins/typed.js/dist/typed.umd.js"></script>
<script src="src/plugins/vanilla-lazyload/dist/lazyload.min.js"></script>
<script src="src/plugins/hc-sticky/dist/hc-sticky.js"></script>
<script src="src/plugins/wow/wow.min.js"></script>
<!-- theme js -->
<script src="src/js/theme.js"></script>
</body>
</html>