section header

This tailwind example is contributed by Raul antonio de la cruz hernandez, on 27-Nov-2025. Component is made with Tailwind v3.4. It is responsive.

Header

Author Raul antonio de la cruz hernandez

Tailwind v3.4 823 1

Fork Fullscreen

<div>
  <div class="min-h-screen bg-white text-slate-900 font-sans p-6 md:p-12 lg:p-20 selection:bg-rose-100 selection:text-rose-600">
    
    
    <div class="max-w-7xl mx-auto mb-16">
      <div class="flex flex-col lg:flex-row lg:items-end justify-between gap-8">
        <div class="max-w-2xl">
          <h2 class="text-sm font-semibold text-slate-500 mb-3 tracking-wide uppercase">Features</h2>
          <h1 class="text-5xl md:text-6xl font-bold tracking-tight text-slate-900">
            Engineered for <span class="text-[#ff2d55]">Impact</span>
          </h1>
        </div>
        
        <div class="flex flex-col items-start lg:items-end gap-6 max-w-md">
          <p class="text-slate-600 leading-relaxed text-lg">
            Built for developers, validators, and creators who want sovereignty, speed, and zero compromise.
          </p>
          <a href="#" class="group inline-flex items-center justify-center px-5 py-2.5 text-sm font-medium text-slate-700 bg-slate-100 rounded-lg hover:bg-slate-200 transition-all duration-200">
            Learn More
            <svg class="w-4 h-4 ml-2 group-hover:translate-x-1 group-hover:-translate-y-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7V17"></path></svg>
          </a>
        </div>
      </div>
    </div>

<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6">

<div class="group relative bg-white border border-slate-100 rounded-[2rem] p-8 md:p-10 shadow-[0_4px_20px_-10px_rgba(0,0,0,0.05)] hover:shadow-[0_20px_40px_-15px_rgba(255,45,85,0.15)] transition-all duration-300 overflow-hidden min-h-[400px] flex flex-col justify-end">
        
        
        <div class="absolute inset-x-0 top-0 h-2/3 flex items-center justify-center bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-rose-50/80 via-white to-white">
            
            <div class="absolute top-8 left-8 w-10 h-10 rounded-full bg-white shadow-sm border border-rose-100 flex items-center justify-center text-rose-500">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 2L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-3z"/></svg>
            </div>

<div class="relative w-48 h-56 perspective-1000">
              <div class="absolute inset-0 bg-gradient-to-br from-rose-500 to-rose-600 rounded-2xl opacity-10 transform translate-x-4 translate-y-4 scale-90"></div>
              <div class="absolute inset-0 bg-gradient-to-br from-rose-500 to-rose-600 rounded-2xl opacity-20 transform translate-x-2 translate-y-2 scale-95"></div>
              <div class="relative w-full h-full bg-gradient-to-b from-white to-rose-50 border border-rose-100 rounded-2xl shadow-xl flex items-center justify-center overflow-hidden">
                 <div class="absolute inset-0 bg-grid-slate-500/[0.05] [mask-image:linear-gradient(0deg,white,transparent)]"></div>
                 <svg class="w-20 h-20 text-rose-200" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
                 
                 <div class="absolute top-4 right-4 w-2 h-2 rounded-full bg-rose-500"></div>
              </div>
            </div>
        </div>

<div class="relative z-10 mt-48">
          <h3 class="text-xl font-bold text-slate-900 mb-2">Own Your Data, End-to-End</h3>
          <p class="text-slate-500 leading-relaxed text-sm">
            CipherMesh gives you total control with native encryption, permission layers, and zero-knowledge privacy baked into every interaction.
          </p>
        </div>
      </div>

<div class="group relative bg-white border border-slate-100 rounded-[2rem] p-8 md:p-10 shadow-[0_4px_20px_-10px_rgba(0,0,0,0.05)] hover:shadow-[0_20px_40px_-15px_rgba(255,45,85,0.15)] transition-all duration-300 overflow-hidden min-h-[400px] flex flex-col justify-end">
        
         
         <div class="absolute inset-x-0 top-0 h-2/3 flex items-center justify-center overflow-hidden">
             
            <div class="absolute top-8 left-8 w-10 h-10 rounded-full bg-white shadow-sm border border-rose-100 flex items-center justify-center text-rose-500 z-20">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
            </div>

<div class="relative w-full h-full">
              
              <div class="absolute top-0 right-0 w-[150%] h-[150%] bg-[radial-gradient(#ff2d55_1px,transparent_1px)] [background-size:20px_20px] opacity-[0.03]"></div>
              
              
              <div class="absolute top-1/2 right-0 transform -translate-y-1/2 translate-x-10">
                 
                 <div class="w-64 h-40 bg-gradient-to-l from-rose-100 to-transparent transform -skew-y-12 translate-y-12 translate-x-12 rounded-lg opacity-50 blur-sm"></div>
                 
                 <div class="w-64 h-40 bg-gradient-to-l from-rose-300 to-rose-100 transform -skew-y-12 translate-y-6 translate-x-6 rounded-lg opacity-80 shadow-lg"></div>
                 
                 <div class="w-64 h-40 bg-gradient-to-br from-[#ff2d55] to-rose-600 transform -skew-y-12 rounded-lg shadow-2xl flex items-center justify-center relative overflow-hidden group-hover:-translate-y-2 transition-transform duration-500">
                    
                    <div class="grid grid-cols-2 gap-2 p-6 w-full h-full opacity-30">
                        <div class="bg-white rounded"></div><div class="bg-white rounded"></div>
                        <div class="bg-white rounded"></div><div class="bg-white rounded"></div>
                    </div>
                 </div>
              </div>
            </div>
         </div>

<div class="relative z-10 mt-48 max-w-sm">
          <h3 class="text-xl font-bold text-slate-900 mb-2">Modular by Default</h3>
          <p class="text-slate-500 leading-relaxed text-sm">
            Plug into just the parts you need — run a node, store data, or launch apps.
          </p>
        </div>
      </div>

<div class="group relative bg-white border border-slate-100 rounded-[2rem] p-8 md:p-10 shadow-[0_4px_20px_-10px_rgba(0,0,0,0.05)] hover:shadow-[0_20px_40px_-15px_rgba(255,45,85,0.15)] transition-all duration-300 overflow-hidden min-h-[360px] flex flex-col justify-end">
        
        
        <div class="absolute inset-x-0 top-0 h-3/4 flex items-center justify-center">
             
            <div class="absolute top-8 left-8 w-10 h-10 rounded-full bg-white shadow-sm border border-rose-100 flex items-center justify-center text-rose-500 z-20">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
            </div>

<div class="relative w-full max-w-[300px] h-[150px] overflow-hidden mt-10">
               
               <div class="absolute bottom-0 left-0 w-full h-[300px] rounded-full border-[20px] border-rose-50 border-t-rose-100"></div>
               
               <div class="absolute bottom-0 left-0 w-full h-[300px] rounded-full border-[20px] border-transparent border-t-[#ff2d55] opacity-20"></div>
               
               <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-[90%] h-[90%] bg-gradient-to-t from-white via-rose-50 to-[#ff2d55] rounded-t-full opacity-10"></div>
               
               
               <div class="absolute bottom-0 left-0 w-full h-full flex justify-center items-end pb-4">
                  <div class="w-full h-full absolute flex justify-center items-end">
                      <div class="w-[280px] h-[140px] border-t border-dashed border-rose-300 rounded-t-full opacity-50"></div>
                  </div>
                  
                  <div class="bg-white rounded-full p-3 shadow-lg border border-rose-100 mb-2 relative z-10">
                    <svg class="w-8 h-8 text-[#ff2d55]" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>
                  </div>
               </div>
               
               
               <div class="absolute bottom-0 left-1/2 -translate-x-1/2 w-3/4 h-3/4 bg-[#ff2d55] blur-[60px] opacity-20 rounded-full"></div>
            </div>
        </div>

<div class="relative z-10 mt-12">
          <h3 class="text-xl font-bold text-slate-900 mb-2">Cross-Chain Ready</h3>
          <p class="text-slate-500 leading-relaxed text-sm">
            Bridge assets, logic, and identity across Ethereum, Cosmos, and beyond — fast, gas-optimized.
          </p>
        </div>
      </div>

<div class="group relative bg-white border border-slate-100 rounded-[2rem] p-8 md:p-10 shadow-[0_4px_20px_-10px_rgba(0,0,0,0.05)] hover:shadow-[0_20px_40px_-15px_rgba(255,45,85,0.15)] transition-all duration-300 overflow-hidden min-h-[360px] flex flex-col justify-end">
        
        
        <div class="absolute inset-x-0 top-0 h-3/4">
             
            <div class="absolute top-8 left-8 w-10 h-10 rounded-full bg-white shadow-sm border border-rose-100 flex items-center justify-center text-rose-500 z-20">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
            </div>

<div class="absolute inset-0 flex items-center justify-center pt-8">
               <div class="w-full h-full relative">
                  
                  <svg class="absolute bottom-0 left-0 w-full h-[70%]" viewBox="0 0 400 150" preserveAspectRatio="none">
                     <defs>
                        <linearGradient id="chartGradient" x1="0" y1="0" x2="0" y2="1">
                           <stop offset="0%" stop-color="#ff2d55" stop-opacity="0.2"/>
                           <stop offset="100%" stop-color="#fff" stop-opacity="0"/>
                        </linearGradient>
                     </defs>
                     <path d="M0,100 C100,20 200,100 300,50 C350,25 400,0 400,0 V150 H0 Z" fill="url(#chartGradient)" />
                     <path d="M0,100 C100,20 200,100 300,50 C350,25 400,0 400,0" fill="none" stroke="#ff2d55" stroke-width="3" stroke-linecap="round" vector-effect="non-scaling-stroke" />
                  </svg>
                  
                  
                  <div class="absolute top-[28%] right-[25%] flex flex-col items-center">
                     <div class="text-[#ff2d55] font-bold text-lg mb-1">99.9%</div>
                     <div class="text-xs text-rose-300 uppercase tracking-wider mb-2">Uptime Rate</div>
                     <div class="w-3 h-3 bg-[#ff2d55] rounded-full border-2 border-white shadow-md relative z-10"></div>
                     <div class="w-[1px] h-32 border-l border-dashed border-rose-200 mt-0"></div>
                  </div>
               </div>
            </div>
        </div>

<div class="relative z-10 mt-12">
          <h3 class="text-xl font-bold text-slate-900 mb-2">Always Uptime Infrastructure</h3>
          <p class="text-slate-500 leading-relaxed text-sm">
            CipherMesh runs on a globally distributed mesh of validators and relayers, ensuring high availability and redundancy.
          </p>
        </div>
      </div>

</div>
  </div>
</div>

Related Examples

vanessa
nice

Umutoniwase Yvette

1 year ago

1.1k
canvas fully covers
canvas fully covers

Balogun David Olajuwon

1 year ago

1.3k
Full-page header for landing pages
an attention-grabbing header with a strong message and clear calls to action.

Junclarkaizen Pagu

3 years ago

12.3k
card section neon
card section neon

Omer fils ELENGA

8 months ago

1.3k
App Hero Section With header

Abdul Baset Bappy

1 year ago

1.5k
Modern SaaS Agency Landing Page with Dark Mode & Mobile MenuE-Com With nav and filter
A premium SaaS agency landing page built with HTML, Tailwind CSS, and JavaScript. It features a sticky glassmorphism navbar, responsive mobile navigation drawer, light/dark mode toggle, animated hero section, case studies, services, process timeline, testimonial, FAQ accordion, booking CTA, and a clean modern footer. Perfect for startups, AI products, software agencies, creative studios, and digital businesses.

JUGENDRA GANGWAR

3 months ago

407
Active Beauty Main Page

Maxim

1 year ago

1.8k
canvas fully covers
canvas fully covers

ABDESLAMI ACHRAF

1 year ago

5.1k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

4 months ago

284
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.6k
Animated navigation with Tailwind CSS and Apinejs

Michael Andreuzza

2 years ago

5.8k
e-commerce website landing page template with Tailwind CSS.
A clean, responsive e-commerce & blog template built with Tailwind CSS. Features light/dark mode, dynamic featured posts, hero, CTA, and SEO-ready sections.

Homayoun

9 months ago

1.2k