Home
KULDEEP
Heading

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 CSS v3. It is responsive. similar terms for this example are Typography, Title, h1, h2, h3

Team Heading Other

Author KULDEEP

639

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

Author:
Simon Scheffer

3 years ago

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

Author:
Deepak Sharma

1 year ago

1.1k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

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

Author:
Abhiraj

1 year ago

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

Author:
Ameth Galarcio

11 months ago

1.8k
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.

Author:
Code Master(Mfuranziza Dusabe Hamza)

7 months ago

1.1k
Heading Style

Author:
KULDEEP

7 months ago

506
Team Members

Author:
Abdul Baset Bappy

7 months ago

955
Heading

Author:
KULDEEP

7 months ago

1k
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

7 months ago

1.2k
Card KPI
Targetas

Author:
Raul antonio de la cruz hernandez

2 months ago

394
Sign up
sign up page

Author:
gidy

8 months ago

1.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components