How to Create Tailwind CSS Profile Card in React?
Last Updated :
23 Jul, 2025
TailwindCSS can be integrated with React to create highly customizable and responsive profile cards by using utility-first classes for styling. This approach allows you to design visually appealing cards with gradients, rounded corners, and interactive animations, all while ensuring seamless responsiveness across different devices.
Prerequisites
Approach
- We are using TailwindCSS classes to create a stylish and modern profile card.
- By applying utility classes for gradients, rounded corners, and shadows, we achieve a visually appealing card design.
- Using responsive utility classes ensures that the profile card adapts seamlessly to different screen sizes.
Steps To Create Profile Card Using Tailwind CSS
Step 1: Create the React project using the following command:
npx create-react-app gfg-card
Step 2: Now follow the provided instructions and get into the project directory:
cd gfg-card
Step 3: Install the necessary packages/libraries in your project using the following commands.
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Step 4: Create a postcss.config.js file in the root directory and add the following content:
module.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
}This configures PostCSS to use Tailwind CSS and autoprefixer.
Step 5: Open the src/index.css file and import Tailwind CSS:
/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Step 6: Add the paths to all of your template files in your tailwind.config.js file
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
Step 7: Install react-icons package.
npm install react-icons
Project Structure
Folder StructureDependencies
"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.2.1",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"devDependencies": {
"autoprefixer": "^10.4.20",
"postcss": "^8.4.41",
"tailwindcss": "^3.4.9"
}Example: In the below example, we are demonstarting Tailwind CSS to create a Profile Card in React. Tailwind CSS provides a gradient background, rounded corners, shadows, and hover effects.
JavaScript
//App.js
import React from 'react';
import { FaFacebook, FaTwitter, FaInstagram, FaLinkedin } from 'react-icons/fa';
import './App.css';
function App() {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100 p-6">
<div className="max-w-sm w-full bg-gradient-to-br from-green-500 via-blue-500
to-purple-600 rounded-3xl shadow-2xl overflow-hidden transform transition-transform
duration-500 hover:scale-105 hover:shadow-3xl">
<div className="relative">
<img
className="w-full h-56 object-cover object-center rounded-t-3xl"
src="https://media.geeksforgeeks.org/wp-content/uploads/20240812133752/gfg.jpg"
alt="Profile"
/>
<div className="absolute inset-x-0 bottom-0 flex justify-center -translate-y-1/2">
<div className="w-28 h-28 rounded-full bg-white shadow-xl border-4 border-white">
<img
className="w-full h-full object-cover rounded-full"
src="https://media.geeksforgeeks.org/wp-content/uploads/20240812133752/gfg.jpg"
alt="Avatar"
/>
</div>
</div>
</div>
<div className="pt-20 pb-8 px-6 text-center">
<h2 className="text-4xl font-extrabold text-white mb-2 relative group">
<span className="absolute inset-0 bg-clip-text text-transparent bg-gradient-to-r
from-yellow-400 via-red-500 to-pink-500 transition-transform duration-500
transform group-hover:translate-x-2 group-hover:translate-y-2">
GeeksforGeeks</span>
<span className="relative">GeeksforGeeks</span>
</h2>
<p className="text-white text-lg mb-4 relative group">
<span className="absolute inset-0 bg-clip-text text-transparent bg-gradient-to-r
from-teal-300 via-blue-400 to-purple-600 transition-transform duration-500
transform group-hover:translate-x-2 group-hover:translate-y-2">
Web Developer | Designer | Creator</span>
<span className="relative">Web Developer | Designer | Creator</span>
</p>
<div className="flex justify-center space-x-6">
<a
href="https://www.facebook.com/"
className="flex items-center justify-center w-12 h-12 rounded-full
bg-blue-700 border-4 border-blue-800 text-white hover:bg-blue-600
hover:border-blue-700 transition-colors duration-300 transform
hover:scale-125"
aria-label="Facebook"
>
<FaFacebook size={20} />
</a>
<a
href="https://twitter.com/"
className="flex items-center justify-center w-12 h-12 rounded-full
bg-blue-400 border-4 border-blue-500 text-white hover:bg-blue-300
hover:border-blue-400 transition-colors duration-300 transform
hover:scale-125"
aria-label="Twitter"
>
<FaTwitter size={20} />
</a>
<a
href="https://www.instagram.com/"
className="flex items-center justify-center w-12 h-12 rounded-full
bg-pink-600 border-4 border-pink-700 text-white hover:bg-pink-500
hover:border-pink-600 transition-colors duration-300 transform
hover:scale-125"
aria-label="Instagram"
>
<FaInstagram size={20} />
</a>
<a
href="https://www.linkedin.com/"
className="flex items-center justify-center w-12 h-12 rounded-full
bg-blue-800 border-4 border-blue-900 text-white hover:bg-blue-700
hover:border-blue-800 transition-colors duration-300 transform
hover:scale-125"
aria-label="LinkedIn"
>
<FaLinkedin size={20} />
</a>
</div>
</div>
</div>
</div>
);
}
export default App;
Steps to run the application:
1. Execute the following command in the terminal.
npm start
2. Open the web browser and type the following URL in the address bar.
http://localhost:3000/
Output
Similar Reads
React Tutorial React is a powerful JavaScript library for building fast, scalable front-end applications. Created by Facebook, it's known for its component-based structure, single-page applications (SPAs), and virtual DOM,enabling efficient UI updates and a seamless user experience.Note: The latest stable version
7 min read
React Fundamentals
React IntroductionReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability. "Hello, World!" Program in ReactJavaScriptimport React from 'react'; function App() {
6 min read
React Environment SetupTo run any React application, we need to first setup a ReactJS Development Environment. In this article, we will show you a step-by-step guide to installing and configuring a working React development environment.Pre-requisite:We must have Nodejs installed on our PC. So, the very first step will be
3 min read
React JS ReactDOMReactDOM is a core React package that provides DOM-specific methods to interact with and manipulate the Document Object Model (DOM), enabling efficient rendering and management of web page elements. ReactDOM is used for: Rendering Components: Displays React components in the DOM.DOM Manipulation: Al
2 min read
React JSXJSX stands for JavaScript XML, and it is a special syntax used in React to simplify building user interfaces. JSX allows you to write HTML-like code directly inside JavaScript, enabling you to create UI components more efficiently. Although JSX looks like regular HTML, it’s actually a syntax extensi
5 min read
ReactJS Rendering ElementsIn this article we will learn about rendering elements in ReactJS, updating the rendered elements and will also discuss about how efficiently the elements are rendered.What are React Elements?React elements are the smallest building blocks of a React application. They are different from DOM elements
3 min read
React ListsIn lists, React makes it easier to render multiple elements dynamically from arrays or objects, ensuring efficient and reusable code. Since nearly 85% of React projects involve displaying data collections—like user profiles, product catalogs, or tasks—understanding how to work with lists.To render a
4 min read
React FormsIn React, forms are used to take input from users, like text, numbers, or selections. They work just like HTML forms but are often controlled by React state so you can easily track and update the input values.Example:JavaScriptimport React, { useState } from 'react'; function MyForm() { const [name,
4 min read
ReactJS KeysA key serves as a unique identifier in React, helping to track which items in a list have changed, been updated, or removed. It is particularly useful when dynamically creating components or when users modify the list. When rendering a list, you need to assign a unique key prop to each element in th
4 min read
Components in React
React Lifecycle In React, the lifecycle refers to the various stages a component goes through. These stages allow developers to run specific code at key moments, such as when the component is created, updated, or removed. By understanding the React lifecycle, you can better manage resources, side effects, and perfo
7 min read
React Hooks
Routing in React
Advanced React Concepts
React Projects