Techwind - React Js Multipurpose Landing & Admin Template

Introduction

Techwind is a fully responsive, clean and modern high-converting React Js landing page template. It is a beautifully handcrafted, pixel perfect HTML5 landing page template based on the React 18.X and Tailwind css v3.x.. Techwind is a Powerful React Js Multipurpose Landing Page Template. It is an excellent 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.

Dark & RTL version Available: We have added a RTL version in both Dark and Light versions.

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

Setup React

Introduction

We are using npm which allows having complete automation for build flow. In case if you don't know Gulp then it's easy to use it. 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:

  • 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.

  • 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
npm install This would install all the required dependencies in the node_modules folder.
npm start 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.
npm run build Generates a /dist directory with all the production files.

Folder & File Structure

	Techwind_Reactjs_v2.2.0
	│
	├──  Documentation   
	├──  Techwind_Reactjs
		│
		├──  Landing
		└──  Dashboard
	
	Landing
	│
	├──  src folder
	│   └──  assets
	│       └──  assets
	│       └──  components
	│           └──  Footer
	│               └──  All footer components
	│           └──  Navbar
	│               └──  All Navbar Components
	│           └──  accountTab.js
	│           └──  backToTop.js
	│           └──  blog.js
	│           └──  blog2.js
	│           └──  blogComment.js
	│           └──  blogUserDetail.js
	│           └──  blogUserProfile.js
	│           └──  cookiesModal.js
	│           └──  managemenstTeam.js
	│           └──  mobileApp.js
	│           └──  portfolioClassicFilter.js
	│           └──  portfolioCreativeFilter.js
	│           └──  portfolioDetailFilter.js
	│           └──  portfolioFilter.js
	│           └──  portfolioMasonryFilter.js
	│           └──  scrollToTop.js
	│           └──  Switch.js
	│           └──  userFeedBack.js
	│           └──  userFeedBack2.js
	│       │
	│       └──  pages (all pages here)
	│           └──  account
	│           │   └──  all account user pages (.js files)
	│           └──  auth
	│           │   └──  all auth pages (.js files)
	│           └──  blog
	│           │   └──  all blog pages (.js files)
	│           └──  company
	│           │   └──  all comapny inner pages (.js files)
	│           └──  contact
	│           │   └──  all contact pages (.js files)
	│           └──  courses
	│           │   └──  all courses pages (.js files)
	│           └──  ecommerce
	│           │   └──  all ecommerce (shop) pages (.js files)
	│           └──  email-template
	│           │   └──  all email-template pages (.js files)
	│           └──  forums
	│           │   └──  all forums pages (.js files)
	│           └──  helpcenter
	│           │   └──  all helpcenter pages (.js files)
	│           └──  index
	│           │   └──  all index pages (Landing pages) (.js files)
	│           └──  jobs
	│           │   └──  all jobs pages (.js files)
	│           └──  nft
	│           │   └──  all nft pages (.js files)
	│           └──  photography
	│           │   └──  all photography pages (.js files)
	│           └──  portfolio
	│           │   └──  all portfolio pages (.js files)
	│           └──  real-estate
	│           │   └──  all real-estate pages (.js files)
	│           └──  special
	│           │   └──  all special pages (.js files)
	│           └──  utility
	│           │   └──  all utility pages (.js files)
	│           └── changelog.js
	│           └── documentation.js
	│           └── foodRecipe.js
	│           └── videoportfolio.js
	│ 
	│       │   
	│       └──  App.js
	│       └──  index.js
	│
	└──  package.json
	└──  tailwind.config.js
	
	Dashboard
	│
	├──  src folder
	│   └──  assets
	│       └──  fonts
	│       └──  images
	│       └──  scss
	│       └──  components
	│           └──  navbar.js
	│           └──  blog.js
	│           └──  footer.js
	│           └── ...
	│           
	│       └──  pages
	│            └──  auth
	│            │   └──  login.js
	│            │   └── ...
	│            └──  blog
	│            │   └──  blog.js
	│            └──...
	│ 
	│   └──  App.js
	│   └──  index.js
	│   └──  App.css
	│
	└──  package.json
	└──  tailwind.config.js
	

How to change the color in Techwind?

It's easy to change your color if your color is indigo-600 to another (red-600, red-400, orange-700, etc. as your theme primary color) please check and read the below link to the customizing colors docs, https://tailwindcss.com/docs/customizing-colors

How to change the fonts family in Techwind?

Please first of all open the tailwind.config.js and please create your google fonts name in the module.exports > theme > fontFamily
For example: 'rubik': ['"Nunito", sans-serif'], add your Google fonts like the above example.

Plugins

Here is the list of plugin which used in Techwind React:

Plugin Version
react 18.2.0
tailwindcss 3.4.1
react-18-image-lightbox 5.1.4
react-countup 6.4.2
react-responsive-masonry 2.2.0
react-dom 18.2.0
react-modal-video 2.0.0
react-router-dom 6.22.3
react-scroll 1.8.9
tiny-slider-react 0.5.7
react-scripts 5.0.1
react-select 5.7.3
react-feather 2.0.10
react-icon 5.0.1
swiper 10.2.0
swiper 10.1.0
@fullcalendar/daygrid 6.1.11
@fullcalendar/react 6.1.11
@ckeditor/ckeditor5-build-classic 41.2.0
@ckeditor/ckeditor5-react 6.1.0
react-apexcharts 1.4.1
react-jvectormap 0.0.16
simplebar-react 3.2.4

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 v2.2 - 11th March 2024

  • Landing:
  • Add : Added new Life Coach (index-life-coach) demo
  • Add : Added new Landing Six (index-landing-six) demo
  • Update: Updated height & width classes to size-* as per latest tailwindcss
  • Update: Updated the Tailwind Version 3.4.1
  • Update: Updated the React Icons Version 5.0.1
  • Update: Updated the React router dom Version 6.22.3
  • Update: Updated the React responsive masonry Version 2.2.0
  • Update: Updated the tailwind.css file for if you direct write your css classes in inline css
  • Admin Dashboard:
  • Update: Updated the Tailwind Version 3.4.1
  • Update: Updated the React Icons Version 5.0.1
  • Update: Updated the React router dom Version 6.22.3
  • Update: Updated the React responsive masonry Version 2.2.0
  • Update: Updated the ckeditor Version 41.2.0
  • Update: Updated the Full calendar Version 6.1.11
  • Update: Updated the Full calendar react Version 6.1.11
  • Update: Updated height & width classes to size-* as per latest tailwindcss
  • Update: Updated the tailwind.css file for if you direct write your css classes in inline css

Version v2.1.0 - 9th December 2023

  • Landing:
  • Update: Updated Tailwind CSS v3.3.6
  • Add : Added new Christmas (index-christmas) demo
  • Add : Added new Classic Business (index-classic-business) demo
  • Remove: Removed Listner with cleanup function
  • Update: Updated data file for the repeted section and store in common data file
  • Admin Dashboard:
  • Update: Updated Tailwind CSS v3.3.6
  • Add : Added new Cryptocurrency (index-crypto) demo
  • Remove: Removed Listner with cleanup function
  • Update: Updated data file for the repeted section and store in common data file

Version v2.0 - 19th September 2023

  • Landing:
  • Remove: Removed all UNICONS icons and replaced or updated REACT Icons
  • Add : Added new Ai (index-ai) demo
  • Add : Added new Podcast (index-podcast) demo
  • Add : Added new Travels (index-travel) demo
  • Add : Added new Components (components) page
  • Update: Updated the Dynamic Blog detail page as per the ID
  • Update: Updated the Dynamic NFT detail page as per the ID
  • Update: Updated the Dynamic Job detail page as per the ID
  • Update: Updated the Dynamic Ecommerce Item detail page as per the ID
  • Update: Updated the Dynamic Real Estate detail page as per the ID
  • Update: Updated the Dynamic Course detail page as per the ID
  • Add : Added new Components (components.html) page
  • Admin Dashboard:
  • Add : Added Admin Panel

Version v1.0 - 1st August 2023

  • Initial Released