Create Banners using React and Tailwind CSS

We will build a responsive banner component using React and Tailwind CSS. Tailwind CSS allows us to create highly customizable and modern UI components with minimal effort. The banner will include a heading and subheading and a call to action button styled for responsiveness and accessibility.

Prerequisites

• React.js
• Tailwind CSS
• Node.js npm
• React Icons

Approach

• The banner should be fully responsive adapting to different screen sizes.
• We will use Tailwind CSS for easy styling making it customizable with utility classes.
• The banner will be built as a reusable component in React.
• Use semantic HTML and ARIA labels for accessibility.

Steps to Create & Configure the Project

Here, we will create a sample React JS project then we will install Tailwind CSS once it is completed we will start development for Banners using React and Tailwind CSS. Below are the steps for creating and configuring the project:

Step 1: Set up a React Application

First, let's create a sample React JS application by using the mentioned command and then navigate to the project folder:

npx create-react-app react-app
cd react-app

Project Structure:

Updated Dependencies:

"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.3.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

Step 2: Install and Configure Tailwind CSS

Once Project is created successfully Now install and configure the Tailwind css by using below commands in your project.

cd react-app
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Step 3: Develop Business logic

Once Tailwind css installation and configuration is completed. Now we need develop user interface for Banners using tailwind css and html. And it is responsive web page for this we use App.js and App.css files we provide that source code for your reference.

• App.js
• index.css
• tailwind.config.js

Example: This example demonstrates the creation of Banners using React and Tailwind CSS:

/*index.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.js
import React from 'react';

const App = () => {
    return (
        <div className="bg-green-500
                        text-white py-20 px-10">
            <div className="container mx-auto
                            text-center">
                <h1 className="text-5xl 
                               font-bold mb-4">
                    Welcome to Our Website
                </h1>
                <p className="text-xl mb-6">
                    Join us to explore
                    the amazing features
                    we offer!
                </p>
                <button className="bg-white text-green-500
                                   font-semibold py-2 px-6 
                                   rounded-full hover:bg-Green-700 
                                   transition duration-300">
                    Get Started
                </button>
            </div>
        </div>
    );
};

export default App;

/*tailwind.config.js*/
/** @type {import('tailwindcss').Config} */
module.exports = {
    content: [
        "./src/**/*.{js,jsx,ts,tsx}",
    ],
    theme: {
        extend: {},
    },
    plugins: [],
}

Step 4: Run the Application

Once Development is completed Now we need run the react js application by using below command. By default the react js application run on port number 3000.

npm start

Output: Once Project is successfully running then open the below URL to test the output.

http://localhost:3000/

Conclusion

We have successfully created a responsive banner component using React and Tailwind CSS. We followed a structured approach to set up Tailwind CSS in a React project created reusable components and implemented modern styling using utility first CSS classes. The banner is easy to customize scalable and can be integrated into any part of the application.