Heading

Subtle Script Background - Large, very light script font in the background ("Amazing")

Light-to-Dark Gradient Heading - Main heading fades from light gray to dark gray

Layered Typography - Secondary heading in medium weight for contrast

Elegant Divider - With centered italic text

Minimalist Border Accents - Thin borders in corners for sophistication

Responsive Design - Scales beautifully on all devices

This tailwind example is contributed by KULDEEP, on 22-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Typography, Title, h1, h2, h3

Team Heading Other

Author KULDEEP

Tailwind v3.4 970 5

Fork Fullscreen

<section class="relative py-20 px-4 sm:px-6 lg:px-8 overflow-hidden bg-gray-50">
  
  <div class="absolute inset-0 flex items-center justify-center opacity-5">
    <p class="text-[10rem] md:text-[20rem] font-script tracking-wide leading-none text-gray-400 select-none">Amazing</p>
  </div>
  
  <div class="relative max-w-7xl mx-auto text-center">
    
    <h1 class="mb-8 text-5xl md:text-7xl lg:text-8xl font-bold tracking-tight">
      <span class="bg-clip-text text-transparent bg-gradient-to-b from-gray-300 via-gray-500 to-gray-800">
        Stunning Visual
      </span>
      <span class="block text-4xl md:text-5xl lg:text-6xl font-medium text-gray-600 mt-4">Heading Effect</span>
    </h1>
    
    
    <div class="relative my-10">
      <div class="absolute inset-0 flex items-center">
        <div class="w-full border-t border-gray-200"></div>
      </div>
      <div class="relative flex justify-center">
        <span class="px-4 bg-gray-50 text-xl text-gray-500 font-serif italic">
          Elegant & Modern
        </span>
      </div>
    </div>
    
    
    <p class="max-w-2xl mx-auto text-xl text-gray-600 font-light leading-relaxed">
      This design features a subtle script background with a beautiful light-to-dark gradient heading that creates depth and visual interest.
    </p>
  </div>
  
  
  <div class="absolute top-0 left-0 w-32 h-32 border-t-2 border-l-2 border-gray-300"></div>
  <div class="absolute bottom-0 right-0 w-32 h-32 border-b-2 border-r-2 border-gray-300"></div>
</section>

Related Examples

Fancy underline

Simon Scheffer

3 years ago

13.2k
Career Page
This is a career page component built in tailwind

Deepak Sharma

1 year ago

1.7k
Table
Table with image and status with pagination buttons

Abhiraj

1 year ago

2.9k
Ai clone, chat ui
Chat interface for ai builder, dont toomuch focused on designing responsive

Abhiraj

1 year ago

3k
DailyDev Card
Card -based card used in the Dailydev Card, this is created to be modified to taste of each user

Ameth Galarcio

1 year ago

2.3k
A Code Master Academy
A Code Master Academy – Empowering the Next Generation of Tech Leaders in Rwanda 👨‍💻 I'm Acode Master, the founder of A Code Master Academy, a practical and inclusive coding school based in Rubavu, Rwanda. The academy is dedicated to transforming lives by equipping unemployed youth and passionate learners with job-ready skills in modern software development.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.7k
Heading Style

KULDEEP

1 year ago

763
Team Members

Abdul Baset Bappy

1 year ago

1.2k
Heading

KULDEEP

1 year ago

1.5k
Contact Us / Enquiry-form Responsive

KULDEEP

1 year ago

2.1k
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Achraf Testq

5 months ago

603
The Free AI Tools Grid Section (210+ Tools, No Signup)
A responsive and SEO-optimized grid section showcasing over 210 free AI tools. Designed with Tailwind CSS, fully responsive, fast-loading, and built for high user engagement. No sign-up required, privacy-friendly, and optimized for performance and discoverability.https://www.thefreeaitools.com/

Hasan AlDoy (McDoy)

4 months ago

441