Create Promo Sections using React and Tailwind CSS
Last Updated :
24 Sep, 2024
We’ll learn how to create attractive Promo Sections in a React application using Tailwind CSS. Promo sections are important for highlighting special offers, announcements, or important features. With Tailwind CSS, we can easily style our components and create responsive designs.
Prerequisites
Steps to Create Promo Sections
Step 1: Set up a React Application
npx create-react-app react-app
Step 2: Install node modules using the command.
npm install
cd react-app
Step 3: Install and Configure Tailwind CSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Step 4: Configure the tailwind paths in your tailwind.config.js file.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}Step 5: Add tailwind directives to your index.css file.
CSS
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
overflow: hidden;
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.css */
.course-card {
position: relative;
overflow: hidden;
}
.course-card .absolute {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
transition: opacity 0.3s;
}
.course-card:hover .absolute {
opacity: 1;
}
.java,
.web,
.csharp {
height: 150px !important;
width: 300px !important;
}
Project Structure:
Project StructureUpdated Dependencies:
"dependencies": {
"react": "^18.3.1",
"react-dom": "^18.3.1"
}Step 6: Install React Icons
npm install react-icons
Example: In this example we will create promo sections using react and tailwind CSS
JavaScript
// App.js
import React from 'react';
import { FaJava, FaReact, FaPython, FaNodeJs, FaAngular,
FaPhp, FaDatabase } from 'react-icons/fa';
import { SiCsharp, SiRuby, SiSwift, SiKotlin, SiGo } from 'react-icons/si';
import './App.css';
function App() {
return (
<div className="App p-8 bg-green-600 min-h-screen
flex flex-col items-center">
<div className="text-white p-8 flex flex-col items-center">
<h1 className="text-3xl font-bold mb-4">
Limited Time Offer!</h1>
<p className="text-lg mb-4">Get 50% off
on all courses. Don’t miss out!</p>
</div>
<div className="flex flex-wrap justify-center gap-6">
{/* Row 1 */}
<div className="w-full max-w-xs p-6 bg-white
rounded-lg shadow-lg transition-transform transform
hover:scale-105 hover:shadow-xl relative
overflow-hidden course-card">
<div className="absolute inset-0 bg-green-500
opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex flex-col items-center">
<div className="text-4xl text-green-500 mb-4">
<FaJava />
</div>
<h2 className="text-xl font-bold text-gray-800">Java</h2>
</div>
</div>
<div className="w-full max-w-xs p-6 bg-white
rounded-lg shadow-lg transition-transform transform
hover:scale-105 hover:shadow-xl relative overflow-hidden course-card">
<div className="absolute inset-0 bg-green-500 opacity-0
hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex flex-col items-center">
<div className="text-4xl text-green-500 mb-4">
<SiCsharp />
</div>
<h2 className="text-xl font-bold text-gray-800">C#</h2>
</div>
</div>
<div className="w-full max-w-xs p-6 bg-white rounded-lg
shadow-lg transition-transform transform hover:scale-105
hover:shadow-xl relative overflow-hidden course-card">
<div className="absolute inset-0 bg-green-500 opacity-0
hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex flex-col items-center">
<div className="text-4xl text-green-500 mb-4">
<FaReact />
</div>
<h2 className="text-xl font-bold text-gray-800">Web
Development</h2>
</div>
</div>
<div className="w-full max-w-xs p-6 bg-white rounded-lg
shadow-lg transition-transform transform hover:scale-105
hover:shadow-xl relative overflow-hidden course-card">
<div className="absolute inset-0 bg-green-500
opacity-0 hover:opacity-100 transition-opacity
duration-300"></div>
<div className="relative z-10 flex flex-col items-center">
<div className="text-4xl text-green-500 mb-4">
<FaPython />
</div>
<h2 className="text-xl font-bold text-gray-800">Python</h2>
</div>
</div>
{/* Row 2 */}
<div className="w-full max-w-xs p-6 bg-white rounded-lg
shadow-lg transition-transform transform hover:scale-105
hover:shadow-xl relative overflow-hidden course-card">
<div className="absolute inset-0 bg-green-500
opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex flex-col items-center">
<div className="text-4xl text-green-500 mb-4">
<FaNodeJs />
</div>
<h2 className="text-xl font-bold text-gray-800">Node.js</h2>
</div>
</div>
<div className="w-full max-w-xs p-6 bg-white rounded-lg
shadow-lg transition-transform transform hover:scale-105
hover:shadow-xl relative overflow-hidden course-card">
<div className="absolute inset-0 bg-green-500
opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex flex-col items-center">
<div className="text-4xl text-green-500 mb-4">
<SiRuby />
</div>
<h2 className="text-xl font-bold text-gray-800">Ruby</h2>
</div>
</div>
<div className="w-full max-w-xs p-6 bg-white rounded-lg
shadow-lg transition-transform transform hover:scale-105
hover:shadow-xl relative overflow-hidden course-card">
<div className="absolute inset-0 bg-green-500
opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex flex-col items-center">
<div className="text-4xl text-green-500 mb-4">
<FaAngular />
</div>
<h2 className="text-xl font-bold text-gray-800">Angular</h2>
</div>
</div>
<div className="w-full max-w-xs p-6 bg-white rounded-lg
shadow-lg transition-transform transform hover:scale-105
hover:shadow-xl relative overflow-hidden course-card">
<div className="absolute inset-0 bg-green-500
opacity-0 hover:opacity-100 transition-opacity
duration-300"></div>
<div className="relative z-10 flex flex-col items-center">
<div className="text-4xl text-green-500 mb-4">
<FaPhp />
</div>
<h2 className="text-xl font-bold text-gray-800">PHP</h2>
</div>
</div>
{/* Row 3 */}
<div className="w-full max-w-xs p-6 bg-white rounded-lg
shadow-lg transition-transform transform hover:scale-105
hover:shadow-xl relative overflow-hidden course-card">
<div className="absolute inset-0 bg-green-500
opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex flex-col items-center">
<div className="text-4xl text-green-500 mb-4">
<FaDatabase />
</div>
<h2 className="text-xl font-bold text-gray-800">
Database Management</h2>
</div>
</div>
<div className="w-full max-w-xs p-6 bg-white rounded-lg
shadow-lg transition-transform transform hover:scale-105
hover:shadow-xl relative overflow-hidden course-card">
<div className="absolute inset-0 bg-green-500
opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex flex-col items-center">
<div className="text-4xl text-green-500 mb-4">
<SiSwift />
</div>
<h2 className="text-xl font-bold text-gray-800">Swift</h2>
</div>
</div>
<div className="w-full max-w-xs p-6 bg-white
rounded-lg shadow-lg transition-transform transform
hover:scale-105 hover:shadow-xl relative overflow-hidden course-card">
<div className="absolute inset-0 bg-green-500
opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex flex-col items-center">
<div className="text-4xl text-green-500 mb-4">
<SiKotlin />
</div>
<h2 className="text-xl font-bold text-gray-800">Kotlin</h2>
</div>
</div>
<div className="w-full max-w-xs p-6 bg-white rounded-lg
shadow-lg transition-transform transform hover:scale-105
hover:shadow-xl relative overflow-hidden course-card">
<div className="absolute inset-0 bg-green-500
opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
<div className="relative z-10 flex flex-col items-center">
<div className="text-4xl text-green-500 mb-4">
<SiGo />
</div>
<h2 className="text-xl font-bold text-gray-800">Go</h2>
</div>
</div>
</div>
</div>
);
}
export default App;
To start the Application run the following command:
npm start
Output:
Conclusion
In summary the React and Tailwind CSS application effectively combines modern design principles with practical functionality. The responsive layout and interactive course cards provide an appealing user experience while the use of Tailwind CSS ensures efficient styling and easy scalability. This project highlights best practices in creating a user friendly and visually attractive web application making it a solid example of integrating React with Tailwind CSS for web development.
Similar Reads
Create Header Sections using React and Tailwind CSS
React is a JavaScript library for building UI components combined with Tailwind CSS a utility-first CSS framework that offers a flexible approach to create beautiful responsive header sections. In this article, we will walk through creating a responsive header section using React and Tailwind CSS fo
4 min read
Create Feature Sections using React and Tailwind CSS
Creating feature sections in a React application enhances the UI by providing structured and interactive components. Using Tailwind CSS for styling and React Icons for adding icons can simplify the development process.In this article, we will learn how to create feature sections using React and Tail
4 min read
Create Team Sections Using React and Tailwind CSS
In this article, we will create a Team Section using React and Tailwind CSS. The team section will display team member information including their name role, and profile picture with a responsive and modern layout. Tailwind CSS simplifies styling by using utility first classes making the development
3 min read
Create Newsletter Sections using React and Tailwind CSS
A Newsletter section is a place in the footer that allows the user to access any further updates or notifications regarding the website after getting his or her email. It accepts a declaration from the user about receiving updates that have several links to other social media sites & links withi
3 min read
Create Hero Sections using Next.JS and Tailwind CSS
We will learn how to create a beautiful Hero Section using Next.js and Tailwind CSS. A Hero Section is the first visual element a user sees on a website and it is very important for making a good first impression. It contains a bold headline, a call to action (CTA), and sometimes an image or video.
3 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 Reviews using React and Tailwind CSS
In general, reviews, are the most essential feedback mechanisms that serve multiple purposes like User feedback, Product rating, Content rating, etc. And if we use a reviews system in our website then it also helps the new users to know about the product or the users easily.In this article, we will
4 min read
Create Team Sections using Next.JS and Tailwind CSS
We'll learn how to create a beautiful and responsive "Team Section" on a website using Next.js and Tailwind CSS. The team section is a common part of many websites, especially for company portfolios, to display members, their roles, and social media links. Let's break down everything step-by-step to
3 min read
Create Select Menus UI using React and Tailwind CSS
We will build a Select Menu UI using React and Tailwind CSS. Select menus are dropdowns that allow users to choose one option from a predefined list. We'll style the dropdown using Tailwind CSS for a modern, clean look and integrate React Icons to improve user experience.PrerequisitesReact.jsTailwin
5 min read
Create Feature Section Using Next.JS and Tailwind CSS
A feature section is a key part of a modern website that highlights the essential products or services a company offers. It's an interactive section that grabs the user's attention and communicates the core values or features of the brand or platform. In this tutorial, we'll walk through the process
3 min read