Hire Us for Customization

Techwind - Responsive Tailwind CSS Landing Template

Introduction

Techwind is a fully responsive, clean and modern high-converting Tailwind CSS landing page template. It is a beautifully handcrafted, pixel perfect HTML5 landing page template based on the latest Tailwind css v3.x.. Techwind is a Powerful Tailwind CSS Multipurpose Landing Page Template. It is an excellent HTML template for startup, cloud hosting, business, corporate, minimal portfolio single product (Smartwatch) , Saas, Social media marketing, Digital marketing/agency, Email Templates, Marketing, Agency, Careers and Jobs, Helpcenter, and much more.

We have added a dark version.

Please feel free to get back to me in case if you are having any question or feedback.

Setup HTML

Introduction

We are using gulp which allows having complete automation for build flow. In case if you don't know Gulp then it's easy to use it. Gulp is a toolkit for automating painful or time-consuming tasks in the development workflow, so you can stop messing around while building any project. You can read it more about it here. Please follow below steps to install and setup all prerequisites:

Prerequisites

Please follow below steps to install and setup all prerequisites:

  • Yarn

    Make sure to have the Yarn installed & running in your computer. If you already have installed Yarn on your computer, you can skip this step. We suggest you to use Yarn instead of NPM.

  • Nodejs

    Make sure to have the Node.js installed & running in your computer. If you already have installed Node on your computer, you can skip this step if your existing node version is greater than 16.

  • Gulp

    Make sure to have the Gulp installed & running in your computer. If you already have installed gulp on run command npm install -g gulp from your terminal.

  • Git

    Make sure to have the Git installed globally & running on your computer. If you already have installed git on your computer, you can skip this step.

Installation

To setup the admin theme, follow below-mentioned steps:

  • Install Prerequisites

    Make sure to have all above prerequisites installed & running on your computer

After you finished with the above steps, you can run the following commands into the terminal / command prompt from the root directory of the project to run the project locally or build for production use:

Command Description
yarn install This would install all the required dependencies in the node_modules folder.
gulp Runs the project locally, starts the development server and watches for any changes in your code, including your HTML, javascript, sass, etc. The development server is accessible at http://localhost:3000.
gulp build Generates a /dist directory with all the production files.

Folder & File Structure

Techwind_v1.4.0
│
├──  Documentation   
├──  HTML  
    │
    ├──  dist folder
    ├──  src folder
    │   └──  assets
    │       └──  fonts
    │       └──  images
    │       └──  js
    │       └──  php
    │       └──  scss
    │           └──  components
    │           │    └──  _buttons.scss
    │           │    └──  _breadcrumbs.scss
    │           │
    │           └──  custom
    │                └──  pages
    │                │   └──  _contact.scss
    │                │   └──  _countdown.scss
    │                │   └──  _helper.scss
    │                │   └──  _hero.scss
    │                │   └──  _portfolio.scss
    │                │   └──  _timeline.scss (Removed)
    │                └──  plugins
    │                │   └──  _swiper-slider.scss
    │                │   └──  _testi.scss
    │                └──  strucure
    │                │   └──  _footer.scss
    │                │   └──  _topnav.scss
    │                └──  _fonts.scss
    │                └──  _general.scss
    │           └──  icons
    │           └──  icons.scss
    │           └──  tailwind.scss
    │   │
    │   └──  Partials
    │       └──  All partials Files
    │   │   
    │   └──  All HTML Files (130+ Files)
    │
    └──  gulpfile.js
    └──  package.json
    └──  tailwind.config.js
    └──  yarn.lock
HTML Structure
<!doctype html>
<html class="light" lang="en">
    <head>

        <meta charset="utf-8" />
        <title> Techwind - Saas & Software Landing Page Template </title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Site description" />
        <meta name="keywords" content="Your tags" />

        <!-- favicon icon -->
        <link rel="shortcut icon" href="images/favicon.ico">

        <!-- Main css -->
        <link href="css/icons.css" rel="stylesheet" type="text/css" />
        <link href="css/tailwind.css" rel="stylesheet" type="text/css" />
    
    </head>

    <body>

        <!-- Loader Start -->
        <div id="#--------">
            --------
            --------
        </div>
        <!-- Loader End -->

        <!-- Navbar Start -->
        <header>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </header>
        <!-- Navbar End -->

        <!-- Hero Start -->
        <section class="--------">
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </section>
        <!-- Hero End -->

        <!-- Footer Start -->
        <footer>
            <div class="--------">
                --------
                --------
                --------
                --------
            </div>
        </footer>
        <!-- Footer End -->

        <!-- Back To Home Start -->
        <a href="#" class="--------" id="#--------">
            --------
            --------
        </a>
        <!-- Back To Home End -->

        <!-- Javascript Start -->
        --------
        --------
        --------
        <script src="js/plugins.init.js"></script>
        <script src="js/app.js"></script>
        <!-- Javascript End -->
    </body>
</html>
CSS

Files are explained below:

File Description
CSS You use icons.css and tailwind.css.
Dark Version In order to have Dark mode enabled, only add dark class in HTML tag like, <html class="dark" lang="en">
Dark Version In order to have Dark mode enabled, only add dark class in HTML tag like, <html class="dark scroll-smooth" lang="en" dir="ltr">
Javascript

Files are explained below:

File Description
app.js This is a main js file. All important javascript like page loader, menu, sticky menu, menu-toggler, one page menu etc.
plugins.init.js All init js like working contact js, tiny slider, counter, countdown, maintenance, lightbox, gallery, swiper slider, aos animation etc.

Install Visual Studio Code

  • Downloads the visual studio code https://code.visualstudio.com/download
  • Now goto Files -> Preferences -> Settings.
  • Now goto Extension and please search and install Tailwind CSS IntelliSense otherwise install here, Tailwind CSS IntelliSense.
  • Now goto Extension and please search and install PostCSS Language Support
  • Type in the search box "live sass compile".
  • Now you wil able to very first option "Live Sass Compile > Settings: Autoprefix" option. Click on the below "Edit in settings.json" link.
  • It will open a settings.json file in a new tab. Please put the below code in the file.
  • 	{
		"workbench.colorTheme": "Monokai",
		"workbench.iconTheme": "material-icon-theme",
		"liveServer.settings.donotShowInfoMsg": true,
		"explorer.confirmDelete": false,
		"workbench.sideBar.location": "left",
		"window.zoomLevel": 0,

		"liveSassCompile.settings.formats":[
			// More Complex
			{
				"format": "expanded",
				"extensionName": ".css",
				"savePath": "~/../css/"
			},

			{
				"format": "compressed",
				"extensionName": ".min.css",
				"savePath": "~/../css/"
			},
		],
		"files.autoSave": "off",
		"liveSassCompile.settings.excludeList": [
			



			"**/node_modules/**",
			".vscode/**"
		],
		"terminal.integrated.shellArgs.windows": "null",
		"liveSassCompile.settings.autoprefix": [],
		"workbench.welcomePage.hiddenCategories": [
			"Beginner",
			"Setup"
		],
	}

Loader

To add loader you need to add the below code after the <body> tag.

<-- loader start -->
<div id="preloader"">
   <div id="status">
     <div class="spinner">
       <div class="double-bounce1"></div>
       <div class="double-bounce2"></div>
     </div>
   </div>
</div>
<-- loader end -->

Credits & Official Documentation

We've used the following resources as listed. These are some awesome creation and we are thankful to the community.

Supports

Once again thank you for your purchase. I'll be happy to answer the the questions you have related to the theme. In case if you have any suggestion or feature, request please feel free to contact me, I'll try to implement it and will release as part of future updates.

If you have any questions that are beyond the scope of this documentation, please feel free to email or contact us via my page.

Stay awesome

- Shreethemes

Changelog

Version v1.6 - 6th December 2022

  • Updated : Update Latest Tailwind CSS v3.2.4
  • Added : AddRTL version (CSS based)
  • Added : Add new Payment (index-payment.html) demo
  • Added : Add new Hotel & Resort (index-hotel.html) demo
  • Updated : Update package.json file

Version v1.5 - 4th October 2022

  • Added : Add new Classic Application (index-classic-app.html) demo
  • Added : Add new Insurance (index-insurance.html) demo
  • Added : Add new IT Solution Two (index-it-solution-two.html) demo
  • Added : Add new Construction (index-construction.html) demo
  • Added : Add new Blog Post in Blogs inner pages like Standard Post, Slider Post, Gallery Post, Youtube Post, Vimeo Post, Audio Post, Blockquote Post, etc.
  • Added : Add new Testimonial Page
  • Updated : Update app.js file
  • Updated : Update gulp.js file
  • Removed : Remove the contact.js file and add contact js in the app.js file

Version v1.4 - 27th August 2022

  • Updated: Update Latest Tailwind CSS v3.1.8
  • Added: Add new Classic Saas (index-classic-saas.html) demo
  • Added: Add new Modern Saas (index-modern-saas.html) demo
  • Added: Add new Corporate Two (index-corporate-two.html) demo
  • Added: Add new Consulting Business (index-consulting.html) demo
  • Added: Add new Photography (index-photography.html) demo
  • Added: Add Photography inner pages like About me and Portfolio or Photography Gallery
  • Added: Add new Blog Template (index-blog.html) demo
  • Fixed: Fix some CSS issues like, buttons, breadcrumb, and some in HTML pages
  • Updated: Update Personal & Resume Template (index-portfolio.html)
  • Removed: Remove _timeline.scss file and fixed and update timeline code in Personal & Resume Template (index-portfolio.html)

Version v1.3 - 20th July 2022

  • Updated: Update Latest Tailwind CSS v3.1.6
  • Added : Add new NFT Marketplace (index-nft.html) demo
  • Added : Add NFT Market inner page like Explore, Collections, Wallet, Creators, Create NFT Item, NFT Detail, & Auction
  • Added : Add new SEO Agency (index-seo.html) demo
  • Added : Add new Online Course (index-course.html) demo
  • Added : Add Course inner page like Courses Listing & Course detail
  • Added : Add new Event & Conference (index-event.html) demo
  • Added : Add new Food Blog (index-food-blog.html) demo
  • Added : Add Food Blog inner page like Blog detail / Food Recipe
  • Updated: Update Gulp File
  • Updated: Update package.json
  • Removed: Remove postcss.config.js

Version v1.2 - 24th June 2022

  • Updated: Update Latest Tailwind CSS v3.1.4
  • Added : Add Wow Animation Plugin
  • Added : Add Animate Animation Plugin
  • Updated: Update Saas (index-saas.html) Demo in Animation Mode
  • Added : Add new Real Estate (index-real-estate.html) demo
  • Added : Add Real Estate inner page like Listing page and Property Detail Page
  • Added : Add new Co-working Space (index-coworking.html) demo
  • Added : Add new Service Provider (index-service.html) demo
  • Added : Add new User Profile Pages (user-profile.html) demo
  • Updated: Update Gulp File
  • Updated: Update CSS to SASS(SCSS)
  • Fixed: Fix some CSS issues like, buttons, breadcrumb, and some in HTML pages
  • Removed: Remove some External CSS like bg video animation, Kenburn Effect, and etc.
  • Updated: Update package.json File
  • Updated: Update postcss.config.js File
  • Updated: Update tailwind.config.js File

Version v1.1 - 1st June 2022

  • Added: Added Dark Version
  • Fixed: Fixed Back to top buttons and Js
  • Update: Remove some external css
  • Fixed: Fixed some menu issues
  • Fixed: Fixed responsive issue in App Landing page

Version v1.0 - 14th May 2022

  • Initial Released

Changes in SCSS files v1.5.0

  • Remove contact.js file and add contact js in app.js file
Thank you very much for your purchase !