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 820 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
Intelligent AI tools built to help.
Unlock smarter workflows with AI tools designed to boost productivity, simplify tasks and help you do more with less effort.

Alif Bima Pradana

7 months ago

613
Code Editor UI
Simple code editor prototype made with HTML and TailwindCSS. A lightweight template to explore and customize.

Indra

1 year ago

1k
App Hero Section With header

Abdul Baset Bappy

1 year ago

1.5k
Software Developer
A software developer designs, builds, tests, and maintains software applications and systems. They use programming languages to create code that meets user needs and client specifications. Software developers may work on various projects, including applications, systems software, or web development

nii fanny

1 year ago

1.3k
PrimeCorp | Professional Business Solutions
We deliver cutting-edge business solutions through strategic consulting, tailored services, and continuous support. Partner with us to optimize operations, drive growth, and achieve sustainable success in today's competitive market.

Code Master(Mfuranziza Dusabe Hamza)

1 year ago

1.4k
Sidebar with Tailwind CSs and alpinejs

Michael Andreuzza

2 years ago

4.6k
Animated Website
Welcome to our animated and engaging website built with Tailwind CSS. We provide top-notch web design, development, SEO, and consulting services to help your business grow.

Nicole Shalom

1 year ago

1.8k
Hero Components

Sherry Lynne

1 month ago

95
Startup Glassmorphism Navbar with Neon Gradient & Floating Navigation
AI startup navbar built with pure HTML and Tailwind CSS.

JUGENDRA GANGWAR

3 months ago

315
Active Beauty Main Page

Maxim

1 year ago

1.8k
Tailwind Header
responsive mobile menu with a smooth transition

Anonymous

1 year ago

4.4k