Blocks
/ Application

Section Headers Tailwind CSS

A Section Header in Tailwind CSS is a structurally defining element used to introduce and label distinct sections of content on a webpage.

Default section header

Use this example to high-light your section with specific information about section

Preview
Code

                                                <section class="py-24">
        <div class="w-full max-w-7xl mx-auto px-6 md:px-8">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 lg:gap-0">
                <div class="block">
                    <h2 class="font-manrope font-bold text-2xl leading-9 text-gray-900 mb-3">Visitors Reports</h2>
                    <p class="font-normal text-sm leading-6 text-gray-500">We're delighted to share our recent Visitors Report, a reflection of the vibrant community that has graced our online space. </p>
                </div>
                <div class="grid grid-cols-2 min-[450px]:flex items-center gap-4">
                    <button class="rounded-full border border-solid border-gray-300 bg-gray-50 py-2.5 px-5 font-semibold text-sm text-gray-900 shadow-sm shadow-gray-100 transition-all duration-500 hover:shadow-gray-50 hover:border-gray-400 hover:bg-gray-100">Report</button>
                    <button class="rounded-full border border-solid border-gray-300 bg-gray-50 py-2.5 px-5 font-semibold text-sm text-gray-900 shadow-sm shadow-gray-100 transition-all duration-500 hover:shadow-gray-50 hover:border-gray-400 hover:bg-gray-100">Calculator</button>
                    <button class="rounded-full border border-solid border-indigo-600 bg-indigo-600 py-2.5 px-5 font-semibold text-sm text-white shadow-sm shadow-gray-100 transition-all duration-500 hover:shadow-gray-300 hover:border-indigo-700 hover:bg-indigo-700">Connect</button>
                    <button class="rounded-full border border-solid border-gray-300 bg-white font-semibold text-sm leading-6 text-white w-max shadow-sm shadow-gray-100 transition-all duration-500 hover:shadow-gray-50 hover:border-gray-400 hover:bg-gray-100">
                        <svg width="44" height="44" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <g filter="url(#filter0_d_1115_54108)">
                            <circle cx="24" cy="23" r="21.5" stroke="#EEF2FF"/>
                            <path d="M24.0161 27.9896V28.0396M24.0161 22.976V23.026M24.0161 17.9623V18.0123" stroke="#111827" stroke-width="2.5" stroke-linecap="round"/>
                            </g>
                            <defs>
                            <filter id="filter0_d_1115_54108" x="0" y="0" width="48" height="48" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
                            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
                            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
                            <feOffset dy="1"/>
                            <feGaussianBlur stdDeviation="1"/>
                            <feComposite in2="hardAlpha" operator="out"/>
                            <feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
                            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_1115_54108"/>
                            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_1115_54108" result="shape"/>
                            </filter>
                            </defs>
                            </svg>
                            
                    </button>
                </div>
            </div>
        </div>
    </section>

Section Header with cta buttons

Use this example to high-light your section with CTA buttons

Preview
Code

                                                <section class="py-24">
        <div class="w-full max-w-7xl mx-auto px-6 md:px-8">
          <div
            class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 lg:gap-0"
          >
            <div class="block">
              <h2
                class="font-manrope font-bold text-2xl leading-9 text-gray-900 mb-3"
              >
                last Tasks
              </h2>
              <p class="font-normal text-sm leading-6 text-gray-500">
              In my most recent task, I was engaged in creating detailed descriptions for a range of design components in project
              </p>
            </div>
            <ul class="flex items-center gap-4">
              <li>
                <a
                  href="javascript:;"
                  class="rounded-lg bg-gray-50 text-indigo-600 py-3 px-6 min-[470px]:px-7 font-medium text-base transition-all duration-500 hover:bg-indigo-50 tab-active:bg-indigo-50"
                  >Home</a
                >
              </li>
              <li>
                <a
                  href="javascript:;"
                  class="rounded-lg bg-gray-50 text-indigo-600 py-3 px-6 min-[470px]:px-7 font-medium text-base transition-all duration-500 hover:bg-indigo-50 tab-active:bg-indigo-50"
                  >About</a
                >
              </li>
              <li>
                <a
                  href="javascript:;"
                  class="rounded-lg bg-gray-50 text-indigo-600 py-3 px-6 min-[470px]:px-7 font-medium text-base transition-all duration-500 hover:bg-indigo-50 tab-active:bg-indigo-50"
                  >Contect</a
                >
              </li>
            </ul>
          </div>
        </div>
      </section>

Section Header with Filter

Use this example to high-light your section with Filter

Preview
Code

                                                <section class="py-24">
        <div class="w-full max-w-7xl mx-auto px-6 md:px-8">
            <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-6 lg:gap-0">
                <div class="block">
                    <h2 class="font-manrope font-bold text-2xl leading-9 text-gray-900 mb-3">Your Data</h2>
                    <p class="font-normal text-sm leading-6 text-gray-500">Remember to avoid sharing sensitive personal information online</p>
                </div>
                <div class="flex flex-col-reverse sm:flex-row sm:items-center gap-3.5">
                    <ul class="flex items-center gap-2">
                        <li> 
                            <a href="javascript:;" class="rounded-full text-gray-900 bg-gray-50 py-3 px-7 min-[470px]:px-7 font-medium text-base transition-all duration-500 hover:bg-indigo-50 tab-active:bg-indigo-50 hover:text-indigo-600">Home</a>
                        </li>
                        <li> 
                            <a href="javascript:;" class="rounded-full text-gray-900 bg-gray-50 py-3 px-7 min-[470px]:px-7 font-medium text-base transition-all duration-500 hover:bg-indigo-50 tab-active:bg-indigo-50 hover:text-indigo-600">About</a>
                        </li>
                        <li> 
                            <a href="javascript:;" class="rounded-full text-gray-900 bg-gray-50 py-3 px-7 min-[470px]:px-7 font-medium text-base transition-all duration-500 hover:bg-indigo-50 tab-active:bg-indigo-50 hover:text-indigo-600">Contact</a>
                        </li>
                    </ul>
                    <button class="flex items-center py-2.5 pr-7 pl-5 max-sm:w-max rounded-full bg-indigo-600 gap-2 font-semibold text-base text-white transition-all duration-500 hover:bg-indigo-700">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M16.5553 2.5H3.44439C2.46249 2.5 1.6665 3.29599 1.6665 4.27788C1.6665 4.73582 1.84321 5.1761 2.15979 5.50698L6.83672 10.3951C6.96997 10.5343 7.03659 10.604 7.09715 10.6748C7.57182 11.2299 7.85102 11.9256 7.89183 12.6548C7.89703 12.7479 7.89703 12.8443 7.89703 13.037V15.419C7.89703 16.8534 9.30152 17.8668 10.6627 17.4146C11.5225 17.129 12.1026 16.3249 12.1026 15.419V13.4451C12.1026 12.8505 12.1026 12.5531 12.152 12.2695C12.2321 11.8095 12.4079 11.3715 12.668 10.9838C12.8284 10.7447 13.034 10.5299 13.4451 10.1002L17.8399 5.50698C18.1565 5.1761 18.3332 4.73582 18.3332 4.27788C18.3332 3.29599 17.5372 2.5 16.5553 2.5Z" stroke="white" stroke-width="1.6" stroke-linecap="round"/>
                            </svg>                            
                            Filter                            
                    </button>
                </div>
              
            </div>
        </div>
    </section>

Section Header with svg buttons

Use this example to high-light your section with SVG buttons

Preview
Code

Section Header with tabs

Use this example to high-light your section with TABS

Preview
Code

Section Header with cta tabs

Use this example to high-light your section with cta tabs

Preview
Code