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

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

2 years ago

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

Author:
Deepak Sharma

5 months ago

657
Table
Table with image and status with pagination buttons

Author:
Abhiraj

5 months ago

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

Author:
Abhiraj

4 months ago

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

Author:
Ameth Galarcio

4 months ago

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

2 weeks ago

200
Heading Style

Author:
KULDEEP

2 weeks ago

124
Team Members

Author:
Abdul Baset Bappy

4 days ago

11
Collapsible content

Author:
Rafferty Kim

2 years ago

13.2k
Skill Cards with Tailwind CSS
A responsive and modern card section designed with Tailwind CSS to showcase professional skills. Each card features a smooth fade-in animation and hover scaling effect for an engaging user experience. Ideal for portfolio websites, developer profiles, and personal branding pages. Fully customizable and mobile-friendly.

Author:
irahoza daniel

1 month ago

50
Best Log In page ever
Instagram look like but not copy right 🤗,best login and sign and even for many others

Author:
ORGIN_DREAMS

1 month ago

42
Responsive 3-Tier Pricing Card Section
A clean and responsive pricing table component featuring three distinct tiers (e.g., Basic, Standard, Premium) presented in a card layout. Built with HTML and Tailwind CSS, it stacks vertically on small screens and transitions to a side-by-side view on medium screens (md breakpoint - 768px) and up. Each plan card includes a placeholder icon, title, description, price details, a call-to-action button, and a bulleted list of features with checkmarks. The generic content makes it easy to adapt for various websites or applications needing a clear pricing comparison structure.

Author:
Hamza Atig

2 months ago

176

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components