section header

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

Header

Author Raul antonio de la cruz hernandez

339

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

Responsive Navbar
Tailwind Navbar

Author:
Md. Tofayel islam

1 year ago

7.9k
Responsive Header
Beautiful responsive header component

Author:
Rajesh Maheshwari

11 months ago

2.1k
Creative Hero Section

Author:
Ijila Itunu

9 months ago

1.4k
tinderclone By omerlinks
tinderclone By omerlinks

Author:
Omer fils ELENGA

1 month ago

56
page heaading stacked
yeah booy, oh booy, o buy

Author:
Anonymous

2 years ago

10.2k
Next-Gen Hero Section – Tailwind CSS Component
A stunning, futuristic Hero Section built with Tailwind CSS, designed to capture user attention with glowing animations, smooth gradients, and bold typography. Perfect for modern web apps, education platforms like EduForce, landing pages, or portfolios. This component is responsive, interactive, and visually unique — not commonly found in typical UI libraries.

Author:
Code Master(Mfuranziza Dusabe Hamza)

8 months ago

1.3k
New Nav Component
A new navigation component

Author:
Amit PR

1 year ago

3.5k
header

Author:
alex_bel

1 year ago

3.9k
Tailwind Pricing Section
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

1.8k
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

11 months ago

5.4k
Responsive portfolio with dark mode
responsive and support dark mode .portfolio website

Author:
ABDESLAMI ACHRAF

1 year ago

3.8k
Tailwind Pricing Section 2
Fully Responsive Pricing Section

Author:
AKASH GANDHAR

1 year ago

2.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components