Reusable React Tailwind Section Heading Components - 4 Unique Styles with TypeScript Support

No matter what app we are working on, we need section headings, since all apps have sections.

If we talk about blogs, e-commerce sites, landing pages, dashboards, agency pages, all kinds of apps consist of sections, and not all but some sections need section headings.

In section headings, we have a title (section title) and a subtitle (a little bit of description of the title). The subtitle is optional.

I'm sharing four versions of section headings and will update this page from time to time by adding new variants.

Why use these section heading components?

  • Easy to integrate into any React project
  • Built with Tailwind CSS for quick customization
  • TypeScript support for better type safety and code predictability

Section Heading Version 1 | Minimal Colors Heading

Since the section heading component is built using TypeScript, the interface needs two props: title and subtitle, and both are strings.

Result UI

This is how our minimal colors section heading UI will look.

Minimal Section Heading

Tailwind CSS Section Heading Version 1 Code

1import { FC } from 'react' 2 3interface SectionHeadingProps { 4 title: string 5 subtitle?: string 6} 7 8const SectionHeading: FC<SectionHeadingProps> = ({ title, subtitle }) => ( 9 <div className="my-7"> 10 <h2 className="text-2xl font-bold text-stone-900">{title}</h2> 11 {subtitle && <p className="text-slate-500">{subtitle}</p>} 12 </div> 13) 14 15export default SectionHeading

Use Case

1<SectionHeading 2 title="Latest Articles" 3 subtitle="Diverse Range of articles related to html css and javascript" 4/>

Section Heading Version 2 | Colored Heading

This version also needs two props, but title is an array of strings. We pass the title like this: ['Latest', 'Articles']. According to our logic, the second element of the title (index 1) will be colored.

If you have a longer title with more than two words, you need to adjust the title to fit your aesthetic.

Result UI

Result of colored Heading UI.

Colored Section Heading

Tailwind CSS Section Heading Version 2 Code

1import { FC } from 'react' 2 3interface SectionHeadingProps { 4 title: string[] 5 subtitle?: string 6} 7 8const SectionHeading: FC<SectionHeadingProps> = ({ title, subtitle }) => ( 9 <div className="my-7"> 10 <h2 className="text-2xl font-bold text-[#161616]"> 11 {title[0]} <span className="text-[#63D471]">{title[1]}</span> 12 </h2> 13 {subtitle && <p className="text-gray-600">{subtitle}</p>} 14 </div> 15) 16 17export default SectionHeading

Use Case

1<SectionHeading 2 title={['Latest', 'Articles']} 3 subtitle="Diverse Range of articles related to html css and javascript" 4/>

Section Heading Version 3 | Detailed Center Heading

The interface needs three props: title, subtitle and shortDescription, and all of them are strings. You can adjust it as per your need.

Result UI

This is how our Detailed Center Heading UI will look.

Detailed Center Heading

Tailwind CSS Detailed Center Heading Code

1interface SectionHeadingTypes { 2 title: string 3 subtitle: string 4 shortDescription: string 5} 6 7const SectionHeading: React.FC<SectionHeadingTypes> = ({ 8 title, 9 subtitle, 10 shortDescription, 11}) => { 12 return ( 13 <div className="mx-auto my-7 max-w-lg text-center"> 14 <h2 className="mb-2.5 text-sm font-bold uppercase tracking-wider text-[#4491FB]"> 15 {title} 16 </h2> 17 <h3 className="text-3xl font-semibold text-stone-900">{subtitle}</h3> 18 <p className="mt-4 text-lg text-slate-500">{shortDescription}</p> 19 </div> 20 ) 21} 22 23export default SectionHeading

Use Case

1<SectionHeading 2 title="Featured Categories" 3 subtitle="Shop by Category" 4 shortDescription="Explore our curated collection of top products and discover the perfect items for your needs" 5/>

Section Heading Version 4 | Wide Section Heading with Light Text

This section heading component offers a wide layout with a light and airy feel.

If you want your title to be foucused prefer this section heading component UI, it's perfect for spacious sections.

The interface needs two props: title (required) and subtitle (optional).

Result UI

This is how our Wide Section Heading with Light Text UI will look.

Wide Section Heading with Light Text

Tailwind CSS Wide Section Heading with Light Text Code

1interface SectionHeadingTypes { 2 title: string 3 subtitle?: string 4} 5 6const SectionHeading: React.FC<SectionHeadingTypes> = ({ title, subtitle }) => { 7 return ( 8 <div className="lg:max-w-[50dvw]"> 9 <h2 className="text-2xl font-bold tracking-wider text-[#607B96]"> 10 {title} 11 </h2> 12 <p className="mt-5 text-pretty text-lg font-extralight text-gray-400"> 13 {subtitle} 14 </p> 15 </div> 16 ) 17} 18 19export default SectionHeading

Use Case

1<SectionHeading 2 title="// Services / Offers:" 3 subtitle="I offer a wide range of services to ensure you have the best written code and stay ahead in the competition." 4/>

If you found this resource helpful, don’t forget to share it with your network and explore more React components in our library. You can also share your opinion on LinkedIn.


Flexy UI Newsletter

Build better and faster UIs.Get the latest components and hooks directly in your inbox. No spam!