Introduction:
In this tutorial, we’ll walk through the process of building a visually appealing hero section with stunning gradients using React and Tailwind CSS. We’ll create a component named “Hero.jsx” that combines various gradients and images to create a captivating user interface. Additionally, we’ll implement a “GetStarted.jsx” component that showcases a beautiful call-to-action button with a gradient effect. Let’s dive in and create an eye-catching hero section for your web application.
Prerequisites:
To follow along with this tutorial, you should have a basic understanding of React and Tailwind CSS. Make sure you have set up a React project and installed Tailwind CSS.
Step 1: Setting Up Tailwind CSS:
Before we begin, ensure you have a proper Tailwind CSS configuration in your project. You can use the provided “tailwind.config.js” file to customize the theme and extend the default styles. Import the necessary CSS file in your “index.css” file.
Step 2: Creating the Hero Component (Hero.jsx):
In this step, we’ll create the “Hero” component that will display the main hero section on the webpage. This component will showcase a background image with multiple gradient overlays.
// Hero.jsx
import styles from "../style";
import GetStarted from "./GetStarted";
const Hero = () => {
const pink_gradiant = 'bg-gradient-to-r from-pink-300 to-pink-600 filter blur-[900px]'
const white_gradiant = 'bg-white bg-opacity-60 filter blur-[750px]'
const blue_gradiant = 'bg-gradient-to-t from-transparent via-blue-800 to-transparent filter blur-[123px]'
const bg_discount_gradient = 'bg-gradient-to-tr from-gray-700 to-indigo-900'
const text_gradient = ' bg-gradient-to-br from-teal-100 via-teal-200 to-teal-500 text-transparent bg-clip-text'
return (
<section id="home" className={`flex md:flex-row flex-col ${styles.paddingY}`}>
<div className={`flex-1 ${styles.flexStart} flex-col xl:px-0 sm:px-16 px-6`}>
<div className={`flex flex-row items-center py-[6px] px-4 ${bg_discount_gradient} rounded-[10px] mb-2`}>
<img src={'https://i.imgur.com/5BZrGDw.png'} alt="discount" className="w-[32px] h-[32px]" />
<p className={`${styles.paragraph} ml-2`}>
<span className="text-white">20%</span> Discount For{" "}
<span className="text-white">1 Month</span> Account
</p>
</div>
<div className="flex flex-row justify-between items-center w-full">
<h1 className="flex-1 font-poppins font-semibold ss:text-[72px] text-[52px] text-white ss:leading-[100.8px] leading-[75px]">
The Next <br className="sm:block hidden" />{" "}
<span className={`${text_gradient}`}>Generation</span>{" "}
</h1>
<div className="ss:flex hidden md:mr-4 mr-0">
<GetStarted />
</div>
</div>
<h1 className="font-poppins font-semibold ss:text-[68px] text-[52px] text-white ss:leading-[100.8px] leading-[75px] w-full">
Payment Method.
</h1>
<p className={`${styles.paragraph} max-w-[470px] mt-5`}>
Our team of experts uses a methodology to identify the credit cards
most likely to fit your needs. We examine annual percentage rates,
annual fees.
</p>
</div>
<div className={`flex-1 flex ${styles.flexCenter} md:my-0 my-10 relative`}>
<img src={'https://i.imgur.com/8RJDGMU.png'} alt="billing" className="w-[100%] h-[100%] relative z-[5]" />
{/* gradient start */}
<div className={`absolute z-[0] w-[40%] h-[35%] top-0 ${pink_gradiant} `} />
<div className={`absolute z-[1] w-[80%] h-[80%] rounded-full ${white_gradiant} bottom-40`} />
<div className={`absolute z-[0] w-[50%] h-[50%] right-20 bottom-20 ${blue_gradiant}`} />
{/* gradient end */}
</div>
<div className={`ss:hidden ${styles.flexCenter}`}>
<GetStarted />
</div>
</section>
);
};
export default Hero;
Step 3: Creating the GetStarted Component (GetStarted.jsx):
In this step, we’ll create the “GetStarted” component, which will be a reusable call-to-action button with a gradient effect.
// GetStarted.jsx
import styles from "../style";
import { arrowUp } from "../assets";
const bg_blue_gradient = 'bg-gradient-to-br from-teal-100 via-teal-200 to-teal-500';
const text_gradient = 'bg-gradient-to-br from-teal-100 via-teal-200 to-teal-500 text-transparent bg-clip-text';
const GetStarted = () => (
<div className={`${styles.flexCenter} w-[140px] h-[140px] rounded-full ${bg_blue_gradient} p-[2px] cursor-pointer`}>
<div className={`${styles.flexCenter} flex-col bg-primary w-[100%] h-[100%] rounded-full`}>
<div className={`${styles.flexStart} flex-row`}>
<p className="font-poppins font-medium text-[18px] leading-[23.4px]">
<span className={text_gradient}>Get</span>
</p>
<img src={arrowUp} alt="arrow-up" className="w-[23px] h-[23px] object-contain" />
</div>
<p className="font-poppins font-medium text-[18px] leading-[23.4px]">
<span className={text_gradient}>Started</span>
</p>
</div>
</div>
);
export default GetStarted;
Step 4: Integrating the Components (App.jsx):
Now, let’s integrate the “Hero” component into our main “App” component.
// App.jsx
import styles from "./style";
import { Hero } from "./components";
const App = () => (
<div className={`bg-primary ${styles.flexStart}`}>
<div className={`${styles.boxWidth}`}>
<Hero />
</div>
</div>
);
export default App;
Step 5: Styling and Theming:
We’ve used Tailwind CSS utility classes and custom CSS variables (gradients) to style the hero section. You can customize the colors and styles by modifying the theme in the “tailwind.config.js”
In the “tailwind.config.js” file, you can customize colors, fonts, breakpoints, and more:
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
theme: {
extend: {
colors: {
primary: "#00040f", // Your primary background color
secondary: "#00f6ff", // Your secondary accent color
dimWhite: "rgba(255, 255, 255, 0.7)", // A dimmed white color
dimBlue: "rgba(9, 151, 124, 0.1)", // A dimmed blue color
},
fontFamily: {
poppins: ["Poppins", "sans-serif"], // Use the Poppins font family
},
},
screens: {
xs: "480px",
ss: "620px",
sm: "768px",
md: "1060px",
lg: "1200px",
xl: "1700px",
},
},
// ...
};
Step 6: Wrapping Up:
Congratulations! You have successfully created a stunning hero section with gradients using React and Tailwind CSS. The “Hero” component showcases a captivating background image with various gradient overlays, while the “GetStarted” component offers a beautiful call-to-action button with a gradient effect.
Feel free to further customize the hero section by tweaking the gradients, colors, and content. You can extend this design to other sections of your website, making it visually engaging and attractive to your users.
Remember to run your React project using your preferred development environment or build tools to see the hero section in action.
Before i forgot :
//style.js
const styles = {
boxWidth: "xl:max-w-[1280px] w-full",
heading2: "font-poppins font-semibold xs:text-[48px] text-[40px] text-white xs:leading-[76.8px] leading-[66.8px] w-full",
paragraph: "font-poppins font-normal text-dimWhite text-[18px] leading-[30.8px]",
flexCenter: "flex justify-center items-center",
flexStart: "flex justify-center items-start",
paddingX: "sm:px-16 px-6",
paddingY: "sm:py-16 py-6",
padding: "sm:px-16 px-6 sm:py-12 py-4",
marginX: "sm:mx-16 mx-6",
marginY: "sm:my-16 my-6",
};
export default styles;
Conclusion:
In this article, we explored how to create an eye-catching hero section with gradients using React and Tailwind CSS. By combining different gradient overlays and images, we achieved a visually appealing user interface that can enhance the overall user experience on your web application.
Tailwind CSS’s utility classes and customization options made it easier to style the components and create stunning visual effects without the need for extensive custom CSS. You can use the same approach to build other components and sections on your website, following the principles of visual design and user experience.
By combining the power of React and Tailwind CSS, you can create modern and visually impressive web applications that captivate your users and leave a lasting impression.
Happy coding!
Top comments (0)