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

730

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.9k
Career Page
This is a career page component built in tailwind

Author:
Deepak Sharma

1 year ago

1.2k
Table
Table with image and status with pagination buttons

Author:
Abhiraj

1 year ago

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

Author:
Abhiraj

1 year ago

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

Author:
Ameth Galarcio

1 year ago

2k
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)

10 months ago

1.2k
Heading Style

Author:
KULDEEP

10 months ago

594
Team Members

Author:
Abdul Baset Bappy

10 months ago

1k
Heading

Author:
KULDEEP

9 months ago

1.1k
Contact Us / Enquiry-form Responsive

Author:
KULDEEP

9 months ago

1.5k
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/

Author:
Achraf Testq

1 week ago

164
Hero Section
Responsive Hero Section for you Project Background Image: A stunning, high-quality Unsplash photo that creates a unique visual impact. Overlay: Semi-transparent black overlay with blur effect for readability and a modern aesthetic. Content Area: Centered with a gradient background overlay for contrast, bold headline, engaging subtext. Buttons: Vibrant gradient and clean border with smooth hover animations to draw attention. Responsive Design: Looks great on all screen sizes with adaptable padding and font sizes.

Author:
KULDEEP

10 months ago

1.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components