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:

Updated 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.

Create Promo Sections using React and Tailwind CSS

myarticp87y

Improve

Article Tags :

Create Promo Sections using React and Tailwind CSS

Prerequisites

Steps to Create Promo Sections

Project Structure:

Updated Dependencies:

Conclusion

Similar Reads

Thank You!

What kind of Experience do you want to share?