Create Landing Page Template using React and Tailwind CSS
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:
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:
/*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 */
}
//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:john.doe@example.com"
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>
);
}
/*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 startOutput: 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.
