Create Landing Page Template using React and Tailwind CSS

Last Updated : 26 Sep, 2024

This article guides you through creating a professional landing page template using React and Tailwind CSS, designed to showcase your skills, projects, and services effectively. It covers the setup of various sections, including a hero area for introductions, a services section to highlight offerings, a skills display to demonstrate proficiency, and a contact form for potential clients. With easy-to-follow code examples and explanations, you’ll learn how to leverage React’s component-based architecture alongside Tailwind's utility-first styling to create a responsive and visually appealing webpage

Prerequisites

Approach

To build the landing page template, start by setting up a new React project and integrating Tailwind CSS for styling. Use the App.js file to define functional components for each section of the landing page, utilizing React's useState hook for interactive features like hovering over skills to reveal proficiency levels. Organize content into structured layouts using Tailwind's utility classes for consistent spacing, typography, and responsiveness. The approach emphasizes clarity and simplicity, allowing developers of all levels to create a polished landing page that effectively communicates their personal or professional brand.

Steps to Create & Configure the Project

Here we will create a sample React JS project and install Tailwind CSS once it is completed we will start development for the Landing Page Template using React and Tailwind CSS.

Step 1: Set up a React Application

First, create a sample React JS application using the mentioned command then navigate to the project folder.

npx create-react-app react-app
cd react-app

Project Structure:

Screenshot-2024-09-12-114329 — project structure

Updated dependencies:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-icons": "^5.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Step 2: Install and Configure Tailwind CSS

Once Project is created successfully Now install and configure the Tailwind css by using below commands in your project.

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
npm install react-icons

Step 3: Develop Business logic

Once Tailwind css installation and configuration is completed. Now we need to develop user interface for Landing Page Template using tailwind CSS and for making it responsive we will use App.js and App.css files.

App.js ( src\App.js )
index.css ( src\index.js )
tailwind.config.js ( tailwind.config.js )

Example: This demonstrates the creation of Landing Page Template using React and Tailwind CSS:

CSS

/*src/index.css*/ @tailwind base; @tailwind components; @tailwind utilities;  body {     overflow-x: hidden;     margin: 0;     font-family: 'Times New Roman', Times, serif;     -webkit-font-smoothing: antialiased;     -moz-osx-font-smoothing: grayscale; }  code {     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',         monospace; }  h2 {     margin-top: 2rem;     /* Adjust top margin for spacing */ }

JavaScript

//App.js import React, { useState } from 'react'; import { FaCode, FaBook, FaUserTie, FaSchool,           FaHospital, FaShoppingCart, FaDumbbell,          FaUtensils, FaClipboardList, FaChalkboardTeacher,          FaHeadset, FaConciergeBell, FaJava, FaDatabase,          FaBitcoin, FaChartLine, FaServer, FaPenNib } from 'react-icons/fa';  export default function App() {     const [hoveredSkill, setHoveredSkill] = useState(null);      const skills = [         { name: 'Java', icon: FaJava, percentage: '85%' },         { name: 'Web Development', icon: FaCode, percentage: '90%' },         { name: 'Database', icon: FaDatabase, percentage: '80%' },         { name: 'Crypto Development', icon: FaBitcoin, percentage: '70%' },         { name: 'Trading', icon: FaChartLine, percentage: '75%' },         { name: 'Backend', icon: FaServer, percentage: '88%' },         { name: 'Article Writing', icon: FaPenNib, percentage: '95%' },     ];      const projects = [         {             title: 'Library Management System',             description: `A comprehensive system for managing library resources.`,             icon: <FaBook className="text-6xl" />         },         {             title: 'School Management System',             description: `An efficient system for school administration.`,             icon: <FaSchool className="text-6xl" />         },         {             title: 'Employee Management System',             description: `Manage employee records and tasks seamlessly.`,             icon: <FaUserTie className="text-6xl" />         },         {             title: 'Hospital Management System',             description: `A system to streamline hospital operations and patient care.`,             icon: <FaHospital className="text-6xl" />         },         {             title: 'E-commerce Platform',             description: `An online platform for buying and selling goods.`,             icon: <FaShoppingCart className="text-6xl" />         },         {             title: 'Restaurant Management System',             description: `Manage restaurant operations efficiently.`,             icon: <FaUtensils className="text-6xl" />         },         {             title: 'Gym Management System',             description: `A system for managing gym memberships and schedules.`,             icon: <FaDumbbell className="text-6xl" />         },         {             title: 'Inventory Management System', description: `Keep track of inventory levels and orders.`,             icon: <FaClipboardList className="text-6xl" />         },     ];      const [formData, setFormData] = useState({         firstName: '',         lastName: '',         email: '',         phone: '',         message: '',     });      const handleChange = (e) => {         const { name, value } = e.target;         setFormData({ ...formData, [name]: value });     };      const handleSubmit = (e) => {         e.preventDefault();         // Handle form submission logic here         console.log('Form Data Submitted:', formData);         // Reset form after submission if needed         setFormData({             firstName: '',             lastName: '',             email: '',             phone: '',             message: '',         });     };      return (         <div className="bg-green-400 p-10">             {/* Hero Section */}             <div className="section_hero h-auto                             bg-inherit w-11/12 m-10                             rounded-md p-10 flex flex-col                             items-center justify-center">                 {/* Name Section */}                 <h1 className="text-4xl font-bold text-white mb-4">                     John Doe                 </h1>                 <p className="text-xl text-gray-600 mb-8">                     Full Stack Developer | Web Designer | Programmer                 </p>                  {/* Contact Information with different styles */}                 <div className="flex flex-col items-center                                 sm:flex-row sm:space-x-6                                 space-y-4 sm:space-y-0">                     {/* Email */}                     <div className="flex items-center space-x-2">                         <span className="text-lg font-medium text-white">                             Email:                         </span>                         <a href="mailto:[email protected]"                             className="text-lg text-blue-600 hover:underline">                             john.doe@example.com                         </a>                     </div>                      {/* Phone */}                     <div className="flex items-center space-x-2">                         <span className="text-lg font-medium                            text-white">                             Phone:                         </span>                         <a href="tel:+1234567890"                             className="text-lg text-blue-600 hover:underline">                             +123 456 7890                         </a>                     </div>                 </div>                  {/* Social Links */}                 <div className="mt-6 flex space-x-4">                     <a href="#" className="text-green-600                                             text-2xl hover:text-green-700                                             transition duration-300">                         <i className="fab fa-linkedin"></i>                     </a>                     <a href="#" className="text-green-600                                            text-2xl hover:text-green-700                                            transition duration-300">                         <i className="fab fa-github"></i>                     </a>                     <a href="#" className="text-green-600                                            text-2xl hover:text-green-700                                            transition duration-300">                         <i className="fab fa-twitter"></i>                     </a>                 </div>             </div>              {/* Services Section */}             <div className="section_service h-auto                             bg-white w-11/12 m-10 rounded-md p-5">                 <p className="text-green-600 font-bold                               text-center text-[25px] my-5">                     Services                 </p>                 <p className='text-center font-bold                               text-[18px]'>                     Our diverse range of services                     is designed to support your personal                     and professional growth.                 </p>                 <div className="grid grid-cols-1 sm:grid-cols-2                                 lg:grid-cols-4 gap-8 p-10 mt-8">                     <div className="service-card bg-green-500                                     text-white rounded-lg p-6                                     flex flex-col items-center                                     transition-all duration-300                                     ease-in-out hover:scale-105">                         <FaCode className="text-4xl mb-4" />                         <p className="font-bold text-lg">Application Development</p>                     </div>                     <div className="service-card bg-green-500                                     text-white rounded-lg p-6 flex                                     flex-col items-center transition-all                                     duration-300 ease-in-out hover:scale-105">                         <FaChalkboardTeacher className="text-4xl mb-4" />                         <p className="font-bold text-lg">Teaching</p>                     </div>                     <div className="service-card bg-green-500                                     text-white rounded-lg p-6                                     flex flex-col items-center                                     transition-all duration-300                                     ease-in-out hover:scale-105">                         <FaHeadset className="text-4xl mb-4" />                         <p className="font-bold text-lg">24/7 Student Support</p>                     </div>                     <div className="service-card bg-green-500                                     text-white rounded-lg p-6                                     flex flex-col items-center                                     transition-all duration-300                                     ease-in-out hover:scale-105">                         <FaConciergeBell className="text-4xl mb-4" />                         <p className="font-bold text-lg">Other Service</p>                     </div>                 </div>             </div>              {/* Skills Section */}             <div className="section_skills h-auto bg-green-600                             w-11/12 m-10 rounded-md p-5">                 <p className="text-white font-bold text-center text-[25px] my-5">Skills</p>                 <p className='text-center text-white font-bolder text-[18px]'>                     A diverse skill set including Java,                     Web Development, Database Management,                     Crypto Development, Trading, Backend Development,                     and Article Writing for effective tech solutions.                     </p>                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 p-10">                     {skills.map((skill, index) => {                         const Icon = skill.icon;                         return (                             <div                                 key={index}                                 className="skill-card bg-green-500 text-white                                            rounded-lg p-6 flex flex-col items-center                                            transition-all duration-300 ease-in-out"                                 onMouseEnter={() => setHoveredSkill(index)}                                 onMouseLeave={() => setHoveredSkill(null)}                             >                                 <Icon className="text-4xl mb-4" />                                 <p className="font-bold text-lg">{skill.name}</p>                                 {hoveredSkill === index && (                                     <p className="text-sm mt-2">{skill.percentage} Proficiency</p>                                 )}                             </div>                         );                     })}                 </div>             </div>              {/* Projects Section */}             <div className="section_projects h-auto                             bg-white w-11/12 m-10 rounded-md p-5">                 <p className="text-green-600 font-bold                               text-center text-[25px] my-5">                                 Projects                                 </p>                 <p className='text-center text-green-600                               font-bolder text-[18px]'>                                 Innovative projects including a Library Management System,                                 School Management System, Employee Management System,                                 Hospital Management System, E-commerce Platform,                                 Restaurant Management System, Gym Management System,                                 and Inventory Management System.                                 </p>                 <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 p-10">                     {projects.map((project, index) => (                         <div key={index} className="project-card bg-white                                                     text-black rounded-lg p-6 flex                                                     flex-col items-center transition-all                                                     duration-300 ease-in-out hover:scale-105">                             {project.icon} {/* React Icon for the project */}                             <div className="p-2 text-center">                                 <h3 className="font-bold text-lg">{project.title}</h3>                                 <p className="text-sm mt-1">{project.description}</p>                             </div>                         </div>                     ))}                 </div>             </div>              {/* Contact Section */}             <div className="section_contact h-auto bg-white w-11/12 m-10 rounded-md p-5">                 <p className="text-green-600 font-bold text-center text-[25px]">                     Contact                     </p>                 <form onSubmit={handleSubmit} className="mt-5">                     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">                         <input                             type="text"                             name="firstName"                             placeholder="First Name"                             value={formData.firstName}                             onChange={handleChange}                             required                             className="border border-gray-300 rounded p-2"                         />                         <input                             type="text"                             name="lastName"                             placeholder="Last Name"                             value={formData.lastName}                             onChange={handleChange}                             required                             className="border border-gray-300 rounded p-2"                         />                     </div>                     <input                         type="email"                         name="email"                         placeholder="Email"                         value={formData.email}                         onChange={handleChange}                         required                         className="border border-gray-300 rounded p-2 mt-4 w-full"                     />                     <input                         type="tel"                         name="phone"                         placeholder="Phone Number"                         value={formData.phone}                         onChange={handleChange}                         required                         className="border border-gray-300 rounded p-2 mt-4 w-full"                     />                     <textarea                         name="message"                         placeholder="Message"                         value={formData.message}                         onChange={handleChange}                         required                         className="border border-gray-300 rounded p-2 mt-4 w-full"                         rows="4"                     />                     <button                         type="submit"                         className="bg-green-500 text-white                                    rounded p-2 mt-4 hover:bg-green-600                                    transition duration-300"                     >                         Submit                     </button>                 </form>             </div>         </div>     ); }

JavaScript

/*src/tailwind.congif.js*/ /** @type {import('tailwindcss').Config} */ module.exports = {     content: [         "./src/**/*.{js,jsx,ts,tsx}",     ],     theme: {         extend: {},     },     plugins: [], }

Step 4: Run the Application

Once Development is completed Now we need run the react js application by using below command. By default the react js application run on port number 3000.

npm start

Output: Once Project is successfully running then open the below URL to test the output.

http://localhost:3000/

Conclusion

This Landing Page Template is a powerful starting point for creating a polished and responsive web page. By using React for dynamic rendering and Tailwind CSS for rapid styling and we maintain clean code and ease of customization. The integration of React Icons adds professional looking icons to different sections and making the design both functional and aesthetically pleasing.

Create Changelog Template using React and Tailwind CSS

myarticp87y

Improve

Article Tags :