Contact Us Page using ReactJS and Tailwind
Last Updated :
01 Aug, 2024
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.
.jpg)
Prerequisites:
Basic features of Contact Us Page:
- Address of the Organisation: Usually represented in a card and contains the basic information to reach the organisation
- Contact Information: Information such as email address and phone number is shown in this block
- Additional Information: It contains the contact information of other departments of the organisation
- Feedback Form: A feedback form using which the users can submit their suggestions and queries
- Map: A map using which user can be provided the physical location of the organisation
- Social Media Links: Display social media pages link of the organisation
Approach to create a Contact Us page:
- 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.
- Add fixed icons to provide link to social media pages of the organisation
Steps to Create React Application And Installing Module:
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 follows
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
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 all the component and displays map on the page
- Card.js: Two cards providing details to contact are shown using this component
- Feedback.js: A form to submit user queries is displayed in this component
- Icons.js: The link to social media pages is displayed.
- Navbar.js: Navgiation is provided using this component
- Welcome.js: A welcome slide is displayed in this component
CSS
/* 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;
height: 100vh;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}
// App.js
import './App.css';
import Icons from './components/Icons';
import Welcome from './components/Welcome';
import Card from './components/Card';
import Feedback from './components/Feedback';
function App() {
return (
<div >
<Welcome/>
<Icons/>
<Card/>
<Feedback/>
<img src=
'https://media.geeksforgeeks.org/wp-content/uploads/20230821104522/gfg-(5).jpg'
style={{marginTop:"14%", marginLeft:"44%"}}/>
</div>
);
}
export default App;
// Card.js
export default function Card() {
return (
<div >
<div className="h-52 ml-48 float-left
-mt-10 w-96 flex-col
rounded-xl bg-white bg-clip-border
text-gray-700 shadow-2xl">
<div className="p-6">
<h5 className="text-center mr-4 mb-2
block font-sans text-xl
font-semibold text-blue-gray-900
antialiased">
Reach Us At
</h5>
<ul>
<li className="mt-2">
<span><i className="fa fa-phone mr-2"></i> </span>
+91-9998887776
</li>
<li className="mt-2">
<span><i className="fa fa-envelope mr-2"></i> </span>
<span>feedback@geeksforgeeks.org</span>
</li>
<li className="mt-2">
<span><i className="fa-solid fa-map-pin mr-2"></i>
</span>
A-143, 9th Floor, Sovereign Corporate
<span className="pl-4">
Tower, Sector-136, Noida, Uttar Pradesh
</span>
</li>
</ul>
</div>
</div>
<div class=" mr-36 w-96 text-center float-right
-mt-11 w-1/3 flex-col rounded-xl
bg-white text-gray-700 shadow-2xl">
<div className="p-6 ">
<h5 className="mb-2 block font-sans
text-xl font-semibold
text-blue-gray-900 antialiased">
Branding & Collaboration
</h5>
<i className="fa fa-handshake fa-2xl"></i>
<div className="text-left mt-4">
<span><i className="fa fa-envelope mr-2"></i> </span>
<span>branding@geeksforgeeks.org</span>
</div>
<div className="mt-2 text-left">
<span><i className="fa-solid fa-map-pin mr-2"></i> </span>
A-143, 9th Floor, Sovereign Corporate
Tower, Sector-<span className="pl-5">136,
Noida, Uttar Pradesh</span>
</div>
</div>
</div>
</div>
)
}
// Feedback.js
export default function Feedback() {
return(
<div className="absolute mt-52 ml-48
w-80 float-left border-2 p-2
rounded-xl shadow-xl text-xl">
<form>
<p className="text-2xl">Feedback & Queries</p>
<div>
<label className="text-sm">Select Issue*</label>
<br></br>
<select className="bg-gray-50 border border-gray-300
text-gray-600 text-sm rounded-lg
focus:border-blue-500 w-full p-2.5">
<option value="Feedback" >
-- Select Your Query --
</option>
<option value="Feedback" >
Feedback
</option>
<option value="Feedback">
Course Related Queries
</option>
<option value="Feedback">
Payment Related Issue
</option>
<option value="Feedback">
Hiring Related Queries
</option>
<option value="Feedback">
Advertise With Us
</option>
</select>
<br></br>
<label className="text-sm">Email Address*</label>
<br></br>
<input className="bg-gray-50 border border-gray-300
text-sm rounded-lg focus:border-blue-500
w-full p-2.5"
type="email"
placeholder="[email protected]"/>
<br></br>
<label className="text-sm">Contact No.</label>
<br></br>
<input className="bg-gray-50 border border-gray-300
text-sm rounded-lg focus:border-blue-500
w-full p-2.5"
type="text"
placeholder="1324567890"/>
<br></br>
<label className="text-sm">
Drop Your Query
</label>
<br></br>
<textarea className="bg-gray-50 border border-gray-300
text-sm rounded-lg
focus:border-blue-500
w-full p-2.5"
rows="4"
cols="25"
maxlength="300"
placeholder="Max Allowed Characters: 300">
</textarea>
<br></br>
<button className="bg-blue-500 hover:bg-blue-700
text-white font-bold
py-2 px-4 rounded"
type="button">
Submit
</button>
</div>
</form>
</div>
)
}
// Icons.js
export default function Icons() {
return (
<div className="fixed left-0 top-2/4 z-50
bg-transparent flex flex-col space-y-3">
<button
type="button"
data-te-ripple-init
data-te-ripple-color="light"
className="flex px-4
py-1.5 text-xs font-medium
uppercase leading-normal text-white
rounded-r-xl "
style={{ backgroundColor: "#1da1f2" }}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="mr-2 h-3.5 w-3.5"
fill="currentColor"
viewBox="0 0 24 24">
<path d=
M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z" />
</svg>
Twitter
</button>
<button
type="button"
data-te-ripple-init
data-te-ripple-color="light"
className="flex px-2
py-1.5 text-xs font-medium
uppercase leading-normal text-white
rounded-r-xl "
style={{ backgroundColor: "#1877f2" }}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="mr-2 h-3.5 w-3.5"
fill="currentColor"
viewBox="0 0 24 24">
<path d=
"M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z" />
</svg>
Facebook
</button>
<button
type="button"
data-te-ripple-init
data-te-ripple-color="light"
className="flex px-4
py-1.5 text-xs font-medium
uppercase leading-normal text-white
rounded-r-xl"
style={{ backgroundColor: "#c13584" }}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="mr-2 h-3.5 w-3.5"
fill="currentColor"
viewBox="0 0 24 24">
<path d=
"M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
</svg>
Instagram
</button>
<button
type="button"
data-te-ripple-init
data-te-ripple-color="light"
className="flex px-4
py-1.5 text-xs font-medium
uppercase leading-normal text-white
rounded-r-xl"
style={{backgroundColor: "#ff0000"}}>
<svg
xmlns="http://www.w3.org/2000/svg"
className="mr-2 mt-0.5 h-4.5 w-3.5"
fill="currentColor"
viewBox="0 0 24 24">
<path d=
"M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z" />
</svg>
Youtube
</button>
</div>
)
}
// Navbar.js
export default function Navbar() {
return (
<div>
<nav classNameName="fixed w-full
z-20 top-0 left-0">
<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 font-medium
md:flex-row md:space-x-8">
<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>
)
}
// Welcome.js
import Navbar from "./Navbar";
export default function Welcome(){
return(
<div className="h-48 bg-gray-200 px-24">
<Navbar/>
<h1 className="pt-4 text-center text-slate
font-semibold text-3xl">
GeeksforGeeks Contact US Page
</h1>
</div>
)
}
Steps to run the application:
Step 1: Type the following command in terminal
npm run start
Output:
Similar Reads
Contact Us Form Using ReactJS and Tailwind
A Contact Us Form is an integral part of an organization's website. It helps the users to reach out to the organization team and share their views. A Contact Form can be used for various purposes such as giving a suggestion, asking queries, and giving feedback. The final feature will look like this:
4 min read
Create Pagination UI Using React And Tailwind CSS
When working with huge data sets in online applications, pagination is an essential feature. It makes a lengthy list of items easier to browse through by dividing them into digestible parts. This article will tell you how to use Tailwind CSS for styling and React for front-end functionality to creat
3 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
Create Command Palettes UI using React and Tailwind CSS
This article shows you how to create a Command Palette UI using React and Tailwind CSS. A command palette lets users easily search for and run commands within an app, making navigation faster and more efficient. We’ll walk you through building a simple and intuitive interface where users can type, s
4 min read
Create Feeds UI using React and Tailwind CSS
In the world of social networking, feeds are the primary way users interact with content. Whether it is on LinkedIn, Facebook, or Twitter the feed showcases posts updates, and activities from people or organizations. This article will help you build a LinkedIn-style feed UI using React and Tailwind
4 min read
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 Navbars UI using React and Tailwind CSS
A UI plays an important role because a clean, well-designed interface creates a positive first impression and if the UI is good then users can stay on our website some more time and if the UI is bad then they can not stay on our site for more time. we will see how to Create Navbars UI using React an
5 min read
Create FAQs using React and Tailwind CSS
A Frequently Asked Questions section is a common feature found on websites and applications that helps users find answers to common queries in an organized manner. A well-designed FAQ can improve user experience reduce support requests and provide users with quick and easy access to helpful informat
5 min read
Create Content Sections using React and Tailwind CSS
Creating well-structured content sections is crucial for any modern web application. In this article, we will walk through how to build content sections using React styled with Tailwind CSS and enhanced with React Icons. We will create a React application with multiple content sections. Each section
3 min read
Create Drawer Component using React and Tailwind CSS
A drawer component is a sliding panel that comes from the side of the screen, often used for navigation menus or displaying additional content. In this article, we will learn how to create a responsive drawer component in React using Tailwind CSS for styling.PrerequisitesJavaScriptReactTailwind CSSA
3 min read