Design a Product List Page Template using React and Tailwind
Last Updated :
25 Jul, 2024
A Product List Page is very useful in e-commerce websites as it helps the company to showcase their products to the user. This helps user to get information about the products available and make a selection. User can browse a wide variety of products and purchase the product they find useful.
Let us have a look at how the final page will look like:
.jpg)
Basic Feature of Product List Page:
- List: It is an interactive list using which users can see all the available products
- Image: An image which displays the user how the product will look like
- Features: A section which shows the features of the product
- Price Tag: Users can see the amount they have to pay for the product and discount they are getting
- Button: An interactive button using which the user make purchase or add product to their cart
Advantages of Product List Page:
- Provides a platform to showcase the products
- Users are provided with a wide variety of options to choose from
- Increases the sales of the company
- An organised and Interactive UI makes the business grow faster
Prerequisites:
Step to create the page
Step 1: Set up the project using the command
npx create-react-app <<Project_Name>>
Step 2: Navigate to the folder using the command
cd <<Project_Name>>
Step 3: Install the required dependencies using the command
npm install -D tailwindcss
Step 4: Create the tailwind config file using the command
npx tailwindcss init
Step 5: Rewrite the tailwind.config.js file as folllows
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Step 6: Import the fontawesome icons in the project by typing following code in index.html file in public folder
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Step 7: Create a folder called components in src directory and create files Data.js, Product.js, Welcome.js inside it.
Project Structure:
The updated dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
"devDependencies": {
"tailwindcss": "^3.3.3"
}Example: Write the following code in respective files:
- App.js: This file imports all the components and passed data as props
- Data.js: This file contains data to be rendered
- Product.js: This file render product data on the browser
- Welcome.js: This component acts as welcome slide
- index.css: Tailwind CSS is imported using this file
- index.html: Fontawesome is imported in this file
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css"
integrity=
"sha384-QYIZto+st3yW+o8+5OHfT6S482Zsvz2WfOzpFSXMF9zqeLcFV0/wlZpMtyFcZALm"
crossorigin="anonymous">
<meta name="description" content="Web site created using create-react-app" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
/* index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
// App.js
import './App.css';
import Product from './components/Product';
import Welcome from './components/Welcome';
import Data from './components/Data';
function App() {
const data = Data
return (
<div className="App">
<Welcome />
{data.map((e) => {
return <Product data={e} />
})}
</div>
);
}
export default App;
// Welcome.js
export default function Welcome() {
return (
<div className="h-36 w-full border-2
h-screen flex flex-col items-center
justify-center bg-emerald-500 text-white">
<p className="text-2xl mb-4 block">
Welcome to GeeksforGeeks Shopping Page!!!
</p>
<p className="text-lg">
Select from a wide variety of GFG Goodies!!!
</p>
</div>
)
}
// Product.js
export default function Product(props) {
return (
<div className="w-2/3 h-48 p-2 bg-white-200
border-2 border-slate-200
rounded-lg flex flex-row
mx-auto mt-6" >
<div className="w-3/12 h-full">
<img className="pl-4 pt-2 w-72 h-32"
src={props.data.image} />
</div>
<div className="w-6/12 h-full p-2 ">
<h3 className="pl-4 pt-2 text-2xl">{props.data.title}</h3>
<div className="px-4">
{console.log(props.data.stars)}
{props.data.stars.map((e) => {
return (<i className="fa fa-star"
style={{ color: "green" }}></i>)
})}
<span className="p-2">{props.data.reviewsCount}</span>
</div>
<div className="px-4">
{props.data.specs.map((e) => {
return (<span>{e} •</span>)
})}
</div>
<div className="px-4">
{props.data.features.map((e) => {
return (<span>{e} •</span>)
})}
</div>
</div>
<div className="w-3/12 h-full border-l-4 p-2">
<div className="flex flex-row items-center ">
<h4 className="text-lg"><span>₹</span>
{props.data.newPrice}
</h4>
<span className="text-rose-400">
<s><span>₹</span>
{props.data.oldPrice}
</s>
</span>
</div>
<h6 className="text-success">Free shipping</h6>
<div className="flex flex-col mt-4">
<button className="text-white bg-blue-700
hover:bg-blue-800 focus:outline-none
focus:ring-4 focus:ring-blue-300
font-medium rounded-full
text-sm px-5 py-2.5
text-center mr-2 mb-2"
type="button">
Buy Now
</button>
<button className="text-black border-2 border-sky-600
focus:outline-none focus:ring-4
focus:ring-blue-300 font-medium
rounded-full text-sm px-5 py-2.5
text-center mr-2 mb-2 "
type="button">
Add to wishlist
</button>
</div>
</div>
</div>
)
}
// Data.js
const Data = [
{
title: "GFG TShirt",
image:
"https://media.geeksforgeeks.org/wp-content/uploads/20230823165506/gfg1.png",
specs: ["100% Cotton", "Light Weight", "Best Finish"],
features: ["Unique Design", "For Men", "Casual" ],
newPrice: 800,
oldPrice: 1000,
stars: new Array(4).fill(1),
reviewsCount: 289,
},
{
title: "GFG Hoodie",
image:
"https://media.geeksforgeeks.org/wp-content/uploads/20230823165553/gfg2.jpg",
specs: ["Durable", "Light Weight", "Best Finish"],
features: ["Comfortable Straps", "Water Bottle pocket", "Weather Proof"],
newPrice: 599,
oldPrice: 999,
stars: new Array(5).fill(1),
reviewsCount: 467,
},
{
title: "GFG Hoodie",
image:
"https://media.geeksforgeeks.org/wp-content/uploads/20230823165623/gfg3.jpg",
specs: ["Sweat Fabric", "Attached Hood", "Kangaroo Pocket"],
features: ["Elastic Cuffs", "Light Weight", "Unisex" ],
newPrice: 1299,
oldPrice: 1999,
stars: new Array(5).fill(1),
reviewsCount: 467,
},
]
export default Data;
Steps to run the application:
Step 1: Type the following command in terminal
npm run start
Step 2: Open your web browser and type the following URL
http://localhost:3000/
Output:
Similar Reads
Blog Page Template using React JS and Tailwind
A Blog Page is a web page that is used to display multiple blog posts on a website. Using blogs people can share their views, ideas, and opinions. A Blog Page generally contains a NavBar and Introduction followed by multiple blogs displayed in the form of a card. Prerequisites:React JSTailwind CSS p
6 min read
Create Podcast Template using React and Tailwind CSS
Podcasts have become a popular medium for sharing knowledge and entertainment. Creating a podcast application can be a fun project that not only enhances your skills in React and Tailwind CSS but also provides a platform to showcase your favourite podcasts. In this template we will build a responsiv
6 min read
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 offering
8 min read
Tabs Layout Template using React and Tailwind
A Tabs Layout offers an organized method of presenting diverse content within a single webpage, enabling seamless switching between sections without page reloads. Typically arranged horizontally, tabs display content exclusively related to the selected tab, optimizing space on the webpage. Preview o
4 min read
Create Changelog Template using React and Tailwind CSS
A changelog is an essential tool for maintaining transparency and communication in a project by documenting changes, updates, and bug fixes and enhancements. This template will be built using React for the frontend framework and Tailwind CSS for the styling. The combination of these technologies all
3 min read
Create Product Features using React and Tailwind CSS
The goal is to build a React component that displays a list of credit card features alongside an image of the card itself. The features will include benefits such as rewards cashback and fraud protection each accompanied by an icon. Tailwind CSS will be used for styling to ensure responsive and mode
4 min read
Accordion Template using ReactJS and Tailwind
An Accordion is a component which can show data in form of collapsing and expanding. This is very useful in places where we have less amount of space available and only necessary information is to be provided to the end user. It provides ease of access in displaying data as user is shown only the re
4 min read
Create Documentation Template using React and Tailwind CSS
This documentation template serves as a comprehensive guide for developers to understand the setup configuration and functionalities of the project. We are going to build the Documentation Template using React and Tailwind CSS.PrerequisitesReact.jsTailwind CSSNode.js npmReact IconsApproachTo create
4 min read
How to use Ant Design with Tailwind CSS in a React Project ?
The integration of Ant Design and Tailwind CSS in a React project presents challenges due to their differing styling conventions. Ant Design offers a feature-rich component library with its own class names, while Tailwind CSS provides a utility-first framework for custom designs. Combining both libr
2 min read
Create Product Overviews using React and Tailwind CSS
Creating a clean and visually appealing product overview is essential for marketing purposes. In this article, we designed a simple credit card overview using React and Tailwind CSS. The application features a card with 8 key benefits and responsive and animated buttons. This project demonstrates ho
4 min read