React Tailwind Hero Section Components

In this article, you'll find the code for 3 versions hero section that you can use on your directory, info, or blog website. It's made with React and Tailwind CSS. Plus, you'll get versions for both light and dark modes.

Minimal Hero Section Light Mode

Hero Section Light Mode Component Code

Copy
1import React from 'react'
2
3interface HeroProps {
4  title: string
5  description?: string
6}
7
8const Hero: React.FC<HeroProps> = ({ title, description }) => {
9  return (
10    <div className="bg-zinc-100">
11      <div className="mx-auto max-w-3xl px-3 py-6 text-center md:py-11">
12        <h1 className="text-3xl font-semibold leading-tight text-stone-900 md:text-[40px]">
13          {title}
14        </h1>
15        {description && (
16          <h2 className="mt-5 text-lg text-stone-900 md:font-medium">
17            {description}
18          </h2>
19        )}
20      </div>
21    </div>
22  )
23}
24
25export default Hero

Minimal Hero Section Dark Mode

Hero Section Dark Mode Component Code

Copy
1import React from 'react'
2
3interface HeroProps {
4  title: string
5  description?: string
6}
7
8const Hero: React.FC<HeroProps> = ({ title, description }) => {
9  return (
10    <div className="bg-gray-900">
11      <div className="mx-auto max-w-3xl px-3 py-6 text-center md:py-11">
12        <h1 className="text-3xl font-semibold leading-tight text-white md:text-[40px]">
13          {title}
14        </h1>
15        {description && (
16          <h2 className="mt-5 text-lg text-gray-300 md:font-medium">
17            {description}
18          </h2>
19        )}
20      </div>
21    </div>
22  )
23}
24
25export default Hero

Gradient Hero Component

The screenshot of gradient hero component UI

React Tailwind Gradient Hero Component Code

Copy
1interface HeroProps {
2  title: string[]
3  description: string
4}
5
6const Hero: React.FC<HeroProps> = ({ title, description }) => {
7  return (
8    <section className="my-16 px-4 sm:mx-auto sm:max-w-4xl">
9      <h1 className="mb-6 flex flex-wrap items-center gap-3 text-3xl font-bold text-gray-900 md:text-5xl">
10        <mark className="mr-2 inline-block rounded bg-gradient-to-r from-blue-500 to-purple-500 px-3 py-1.5 tracking-wide text-white">
11          {title[0]}
12        </mark>
13        {title[1]}
14      </h1>
15      <p className="text-lg text-gray-600 md:text-xl">{description}</p>
16    </section>
17  )
18}
19
20export default Hero

How to use in App.tsx

Copy
1function App() {
2  return (
3    <div className="mx-auto my-12 max-w-7xl px-3">
4      <Hero
5        title={['React 50', 'Projects']}
6        description="The latest resources, templates, and strategies for technical interviews, coding & frontend challenges"
7      />
8      <div className="grid grid-cols-3 gap-7 px-4">
9        {posts.map((post, idx) => (
10          <BlogCard key={idx} post={post} />
11        ))}
12      </div>
13      <Faq items={Faqs} />
14    </div>
15  )
16}
17
18export default App

Happy Coding!