Building a Stunning Hero Section in React with Tailwind CSS

Devmaster — Sun, 04 Aug 2024 05:44:15 +0000

In modern web development, a well-designed hero section serves as the focal point of a website, capturing the visitor's attention and setting the tone for the rest of the site. In this article, we'll walk through the creation of an eye-catching hero section using React and Tailwind CSS.

Creating a Dynamic Hero Section

The HeroSection component featured here demonstrates how to leverage React's capabilities alongside Tailwind CSS to create a visually appealing and responsive hero section. Here's a breakdown of the implementation:

import React from 'react';

const HeroSection = () => {
  return (
    <div className="bg-gradient-to-r from-purple-900 via-black to-blue-900 min-h-screen flex flex-col text-white">
      {/* Navbar */}
      <nav className="w-full flex justify-between items-center py-4 px-8">
        <div className="text-2xl font-bold text-white">Bakar</div>
        <ul className="hidden md:flex space-x-8 text-lg">
          <li><a href="#home" className="hover:underline">Home</a></li>
          <li><a href="#about" className="hover:underline">About</a></li>
          <li><a href="#service" className="hover:underline">Service</a></li>
          <li><a href="#portfolio" className="hover:underline">Portfolio</a></li>
          <li><a href="#contact" className="hover:underline">Contact</a></li>
        </ul>
        <button className="bg-pink-600 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded">Hire Me</button>
      </nav>

      {/* Hero Section */}
      <div className="flex-grow flex flex-col lg:flex-row items-center justify-center text-center lg:text-left space-y-8 lg:space-y-0 lg:space-x-8 mt-12">
        <div className="flex flex-col items-center lg:items-start max-w-lg">
          <p className="text-lg mb-2">HELLO THERE, WELCOME TO MY SITE</p>
          <h1 className="text-5xl font-bold mb-2">I'm Alex Stark</h1>
          <h2 className="text-3xl font-bold text-pink-500 mb-4">A Full Stack Developer & UI/UX Designer</h2>
          <div className="flex space-x-4 mb-4">
            <button className="bg-pink-600 hover:bg-pink-700 text-white font-bold py-2 px-4 rounded">See Portfolio</button>
            <button className="bg-gray-800 hover:bg-gray-900 text-white font-bold py-2 px-4 rounded">Contact Me</button>
          </div>
        </div>
        <div className="relative">
          <img 
            src="https://img.freepik.com/premium-photo/flat-style-vector-illustration-web-developer-character_1237084-86771.jpg?w=740" 
            alt="Alex Stark" 
            className="w-64 h-64 lg:w-80 lg:h-80 rounded-lg border-4 object-cover border-pink-500" 
          />
        </div>
      </div>
    </div>
  );
};

export default HeroSection;

Key Features:

**
Gradient Background: The section utilizes a gradient background (bg-gradient-to-r from-purple-900 via-black to-blue-900) to create a vibrant and engaging visual experience that transitions smoothly between colors.

Responsive Design: Tailwind CSS's utility classes ensure that the component is responsive, adapting gracefully to different screen sizes. For example, the navbar and hero text scale accordingly, providing a seamless user experience across devices.

Modern Navbar: The navbar is designed with a clean, minimalistic approach, featuring navigation links and a "Hire Me" button that stands out with its pink background and hover effects.

Hero Content Layout: The hero content is split into two sections: text and an image. This layout is adaptable to both small and large screens, enhancing the overall visual hierarchy and making the content more accessible.

Interactive Elements: The buttons within the hero section are styled to offer clear call-to-action prompts. The "See Portfolio" and "Contact Me" buttons are prominently displayed, encouraging user engagement with interactive hover effects.

Image Styling: The hero image is carefully chosen and styled with rounded corners and a border, which complements the overall theme while drawing attention to the central visual element.

Conclusion

**
This HeroSection component showcases how to effectively combine React and Tailwind CSS to build a striking hero section that not only looks great but also performs well on various devices. By employing responsive design techniques and Tailwind's utility classes, developers can create components that are both visually appealing and user-friendly.

Creating a Stylish 404 Not Found Page in React with Tailwind CSS

Devmaster — Fri, 02 Aug 2024 05:56:24 +0000

A well-designed 404 Not Found page can greatly improve user experience on your website. In this article, I'll show you how to create a visually appealing 404 page using React and Tailwind CSS. This page will have a sleek design with a gradient background and a message guiding users back to the home page.

What You Will Learn

**
Setting up a NotFound component in React
Styling the component with Tailwind CSS
Implementing the NotFound component in your React Router setup
**

Prerequisites

**
Before you begin, ensure you have the following:

Basic knowledge of React
Tailwind CSS installed in your React project
**

Step-by-Step Guide

**
**

1. Create the NotFound Component

**
First, create a new file named NotFound.jsx in your src directory.

import React from 'react';
import { Link } from 'react-router-dom';

const NotFound = () => {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-black text-white">
      <div className="text-9xl font-bold flex items-center justify-center">
        <span className="relative">
          <span className="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 rounded-full blur-2xl"></span>
          <span className="relative">4</span>
        </span>
        <span className="relative">
          <span className="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 rounded-full blur-2xl"></span>
          <span className="relative">0</span>
        </span>
        <span className="relative">
          <span className="absolute top-0 left-0 right-0 bottom-0 bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 rounded-full blur-2xl"></span>
          <span className="relative">4</span>
        </span>
      </div>
      <p className="mt-4 text-lg">This page doesn't exist. <Link to="/" className="text-pink-500 hover:underline">Go back home.</Link></p>
    </div>
  );
};

export default NotFound;

2. Styling with Tailwind CSS

**
In the code above, Tailwind CSS is used to style the NotFound component:

Container: The div is centered both vertically and horizontally with flex flex-col items-center justify-center min-h-screen bg-black text-white.
404 Text: The large "404" text is styled with text-9xl font-bold.
Gradient and Blur Effect: The gradient and blur effect are added with relative, absolute, bg-gradient-to-r from-purple-600 via-pink-500 to-red-500 rounded-full blur-2xl.

Update Your Routing To ensure this 404 page is displayed for any undefined route, update your React Router setup.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import NotFound from './NotFound';
// Import other components...

function App() {
  return (
    <Router>
      <Switch>
        {/* Define other routes here... */}
        <Route path="*" component={NotFound} />
      </Switch>
    </Router>
  );
}

export default App;

This setup ensures that any undefined route will display the NotFound component.

4. Test Your 404 Page

**
Run your development server and navigate to a non-existent route to see your new 404 page in action.

Conclusion
**
Creating a stylish 404 Not Found page using React and Tailwind CSS is straightforward and enhances the user experience. By following this guide, you can build a visually appealing page that gently guides users back to the main content of your site.

Feel free to share your thoughts or any improvements in the comments below. Happy coding!

Forem: Devmaster