Blog Page Template using React JS and Tailwind
Last Updated :
24 Apr, 2025
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:
Basic features of a blog post:
- Blog Title
- Blog Content
- Author name and Publish Date
How Blog Page is different from a Home page?
A Blog Page contains a dedicated section to display posts in order and provides a platform where users can share their views and thoughts whereas a Home page is just an entry point to the website where users can get brief information about the website
Approach to Create Blog Page using React and Tailwind:
- Set up a basic react project and install the required dependencies.
- Create the basic layout consisting of a Navbar and Welcome slide.
- Style the components using Tailwind.
- Pass the data dynamically in the components and render it on the screen.
Step to create the project
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: Create a folder called components in src directory and add the file Banner.js, Navbar.js and Post.js
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: Add the following code in respective files
- App.js: This file imports alll the components and passes necessary data
- Navbar.js: Topmost component of the page used for navigation
- Banner.js: Creates a welcome component
- Post.js: Displays the Blog post depending on the data passed in the component
- Index.css: Imports the necessary tailwind components
JavaScript
// App.js
import './App.css';
import Navbar from './components/Navbar';
import Banner from './components/Banner';
import Post from './components/Post';
export default function App() {
// Adding Dummy Data to pass as props
const postData = [
{
department: "Web Tech",
title: "Top 7 JavaScript One liners",
author: "Amit Singh",
designation: "TCE",
info: `This post tells you about best approaches
to write single line codes in JavaScript.
Use this post as a quick guide to
short but important JS codes`,
},
{
department: "DSA",
title: "Top Interview DSA Questions",
author: "Jatin Sharma",
designation: "TCE",
info: `No need to worry about technical round interviews
as this post will guide you step by step to
prepare for DSA round`,
},
{
department: "Cotent",
title: "Best Antiviruses of 2023",
author: "Shobhit Sharma",
designation: "TCE",
info: `Worried about your PC safety? No Problem,
this post tells you about the best antiviruses
to choose in 2023`,
}
]
return (
<div >
<Navbar />
<Banner />
<div className='grid grid-cols-3 gap-4 p-8'>
{postData.map((e) => {
return <Post content={e} />
})}
</div>
</div>
)
}
// Navbar.js
export default function Navbar() {
return (
<div>
<nav classNameName="bg-white fixed w-full
z-20 top-0 left-0
border-b border-gray-200">
<div className="flex flex-wrap items-center
justify-between mx-auto p-4">
<a href="https://geeksforgeeks.org/"
className="flex items-center">
<img src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg"
className="mr-2"
alt="GFG Logo" />
<span className="self-center text-2xl font-semibold ">
GeeksforGeeks
</span>
</a>
<div className="items-center justify-between hidden
w-full md:flex md:w-auto md:order-1"
id="navbar-sticky">
<ul className="flex flex-col p-4
md:p-0 mt-4 font-medium
border border-gray-100 rounded-lg
bg-gray-50 md:flex-row md:space-x-8
md:mt-0 md:border-0 md:bg-white">
<li>
<a href="#"
className="block py-2 pl-3
pr-4 text-white bg-blue-700
rounded md:bg-transparent
md:text-blue-700 md:p-0">
Home
</a>
</li>
<li>
<a href="#"
className="block py-2 pl-3
pr-4 text-gray-900 rounded
hover:bg-gray-100
md:hover:bg-transparent
md:hover:text-blue-700 md:p-0">
Posts
</a>
</li>
<li>
<a href="#"
className="block py-2 pl-3
pr-4 text-gray-900 rounded
hover:bg-gray-100
md:hover:bg-transparent
md:hover:text-blue-700 md:p-0">
About us
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
)
}
// Banner.js
export default function Banner() {
return (
<div className="h-32 w-full border-2
h-screen flex items-center
justify-center bg-emerald-500 text-white">
<p className="text-2xl"> Welcome to GeeksforGeeks Blog Page!!!</p>
</div>
)
}
// Post.js
export default function Post(props) {
return (
// Accessing and Displaying the data passed as props
<div>
<div className="bg-white shadow-2xl w-96">
<div className="mx-auto max-w-7xl ">
<div className="mx-5 grid max-w-2xl
grid-cols-1 gap-x-8
gap-y-16 p-10 lg:grid-cols-1">
<article className="flex max-w-xl flex-col
items-start justify-between">
<div className="flex items-center gap-x-4 text-xs">
<time datetime="2023-03-16"
className="text-gray-500">
Mar 16, 2023
</time>
<a
href="#"
className="relative z-10 rounded-full
bg-gray-50 px-3 py-1.5
font-medium text-gray-600
hover:bg-gray-100">
{props.content.department}
</a>
</div>
<div className="group relative">
<h3 className="mt-3 text-lg font-semibold
leading-6 text-gray-900
group-hover:text-gray-600">
<a href="#">
<span className="absolute inset-0">
</span>
{props.content.title}
</a>
</h3>
<p className="mt-5 line-clamp-3 text-sm
leading-6 text-gray-600">
{props.content.info}
</p>
</div>
<div className="relative mt-8 flex
items-center gap-x-4">
<svg fill="#000000"
viewBox="0 0 32 32"
className="h-10 w-10 rounded-full"
xmlns=
"http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier"
stroke-linecap="round" stroke-linejoin="round">
</g>
<g id="SVGRepo_iconCarrier">
<path d=
"M 16 4 C 9.382813 4 4 9.382813 4 16 C 4 22.617188 9.382813 28 16 28 C 22.617188 28 28 22.617188 28 16 C 28 9.382813 22.617188 4 16 4 Z M 16 6 C 21.535156 6 26 10.464844 26 16 C 26 21.535156 21.535156 26 16 26 C 10.464844 26 6 21.535156 6 16 C 6 10.464844 10.464844 6 16 6 Z M 11.5 12 C 10.671875 12 10 12.671875 10 13.5 C 10 14.328125 10.671875 15 11.5 15 C 12.328125 15 13 14.328125 13 13.5 C 13 12.671875 12.328125 12 11.5 12 Z M 18 13 L 18 15 L 23 15 L 23 13 Z M 20.96875 17.03125 C 20.96875 18.714844 20.292969 19.882813 19.3125 20.71875 C 18.332031 21.554688 17.035156 22 16 22 C 13.878906 22 12.4375 21.140625 11.3125 20.03125 L 9.90625 21.46875 C 11.300781 22.839844 13.320313 24 16 24 C 17.554688 24 19.261719 23.414063 20.625 22.25 C 21.988281 21.085938 22.96875 19.289063 22.96875 17.03125 Z">
</path></g></svg>
<div className="text-sm leading-6">
<p className="font-semibold text-gray-900">
<a href="#">
<span className="absolute inset-0"></span>
{props.content.author}
</a>
</p>
<p className="text-gray-600">{props.content.designation}</p>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
);
}
@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;
}
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:
.jpg)
Similar Reads
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
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 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
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
Design a Product List Page Template using React and Tailwind
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
5 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
Contact Us Page using ReactJS and Tailwind
The Contact Us page is crucial for user interaction, allowing users to connect with the website owner or customer support, submit feedback, and suggestions, and access departmental contact information.Preview of final output: Let us have a look at how the final output will look like.Prerequisites:Re
6 min read
Create Buttons UI using React and Tailwind CSS
Tailwind CSS is a utility-first CSS framework that allows developers to quickly build responsive and reusable components. We'll explore how to create buttons with different styles such as primary, secondary, and disabled states, and buttons of various sizes.PrerequisitesReact JavaScriptNodeJSTailwin
2 min read
Create Header using React and Tailwind CSS
In modern web development building responsive and customizable user interfaces is crucial. One of the essential elements of any web application is the header which typically contains navigation links branding or other important controls. we will create a responsive header section using React and Tai
4 min read