Headers

Header with Pattern

<header class="max-w-full md:w-1/2 mx-auto">
    <div class="relative flex flex-col justify-center items-center py-10 space-y-3 mx-10">
        <svg viewBox="0 0 80 120" fill="currentColor" class="absolute bottom-10 left-0 z-0 w-32 text-gray-300">
            <defs>
                <pattern id="1" x="0" y="0" width=".1" height=".1">
                    <circle cx="1" cy="1" r=".7"></circle>
                </pattern>
            </defs>
            <rect fill="url(#1)" width="80" height="120"></rect>
        </svg>
        <svg viewBox="0 0 80 120" fill="currentColor" class="absolute top-10 right-0 z-0 w-32 text-gray-300">
            <defs>
                <pattern id="2" x="0" y="0" width=".1" height=".1">
                    <circle cx="1" cy="1" r=".7"></circle>
                </pattern>
            </defs>
            <rect fill="url(#2)" width="80" height="120"></rect>
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 mb-5 text-blue-600" viewBox="0 0 20 20"
            fill="currentColor">
            <path fill-rule="evenodd"
                d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"
                clip-rule="evenodd" />
        </svg>
        <h1 class="text-3xl font-bold text-center">Lorem Ipsum <span class="text-blue-600">Dolor Sit Amet</span></h1>
        <p class="text-lg font-medium text-center">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua.
        </p>
        <div class="flex items-center space-x-5 text-md font-semibold pt-6">
            <a href="#" class="px-5 py-2 bg-blue-600 text-white rounded-md hover:bg-gray-900">Know More</a>
            <a href="#" class="px-5 py-2 bg-gray-900 text-white rounded-md hover:bg-blue-600">Contact Us</a>
        </div>
    </div>
</header>

Header with Dark Background

<header class="bg-blue-600 text-white">
    <div class="max-w-full md:w-1/2 mx-auto">
        <div class="relative flex flex-col justify-center items-center py-10 space-y-3 mx-10">
            <svg viewBox="0 0 80 120" fill="currentColor" class="absolute bottom-10 left-0 z-0 w-32 text-gray-300">
                <defs>
                    <pattern id="1" x="0" y="0" width=".1" height=".1">
                        <circle cx="1" cy="1" r=".7"></circle>
                    </pattern>
                </defs>
                <rect fill="url(#1)" width="80" height="120"></rect>
            </svg>
            <svg viewBox="0 0 80 120" fill="currentColor" class="absolute top-10 right-0 z-0 w-32 text-gray-300">
                <defs>
                    <pattern id="2" x="0" y="0" width=".1" height=".1">
                        <circle cx="1" cy="1" r=".7"></circle>
                    </pattern>
                </defs>
                <rect fill="url(#2)" width="80" height="120"></rect>
            </svg>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-24 w-24 mb-5 text-yellow-300" viewBox="0 0 20 20"
                fill="currentColor">
                <path fill-rule="evenodd"
                    d="M6.625 2.655A9 9 0 0119 11a1 1 0 11-2 0 7 7 0 00-9.625-6.492 1 1 0 11-.75-1.853zM4.662 4.959A1 1 0 014.75 6.37 6.97 6.97 0 003 11a1 1 0 11-2 0 8.97 8.97 0 012.25-5.953 1 1 0 011.412-.088z"
                    clip-rule="evenodd" />
                <path fill-rule="evenodd"
                    d="M5 11a5 5 0 1110 0 1 1 0 11-2 0 3 3 0 10-6 0c0 1.677-.345 3.276-.968 4.729a1 1 0 11-1.838-.789A9.964 9.964 0 005 11zm8.921 2.012a1 1 0 01.831 1.145 19.86 19.86 0 01-.545 2.436 1 1 0 11-1.92-.558c.207-.713.371-1.445.49-2.192a1 1 0 011.144-.83z"
                    clip-rule="evenodd" />
                <path fill-rule="evenodd"
                    d="M10 10a1 1 0 011 1c0 2.236-.46 4.368-1.29 6.304a1 1 0 01-1.838-.789A13.952 13.952 0 009 11a1 1 0 011-1z"
                    clip-rule="evenodd" />
            </svg>
            <h1 class="text-3xl font-bold text-center">
                Lorem Ipsum <span class="text-yellow-300">Dolor Sit Amet</span>
            </h1>
            <p class="text-lg font-medium text-center">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <div class="flex items-center space-x-5 text-md font-semibold pt-6">
                <a href="#"
                    class="px-5 py-2 bg-yellow-300 text-black rounded-md hover:bg-gray-900 hover:text-white">Know
                    More</a>
                <a href="#"
                    class="px-5 py-2 bg-gray-900 text-white rounded-md hover:bg-yellow-300 hover:text-black">Contact
                    Us</a>
            </div>
        </div>
    </div>
</header>

Header with Background Image

<header class="relative overflow-hidden">
    <div class="relative">
        <div class="absolute top-0 left-0 z-20 w-full bg-green-900 bg-opacity-50 h-96"></div>
        <img class="h-96 w-full object-cover filter grayscale brightness-50"
            src="https://images.pexels.com/photos/3184357/pexels-photo-3184357.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
            alt="bg">
    </div>
    <div class="absolute top-0 left-0 my-10 w-full z-50">
        <div class="flex flex-col justify-center items-center text-white space-y-5">
            <div class="text-5xl font-bold text-center space-y-3">
                <h2>Lorem Ipsum</h2>
                <h2 class="text-yellow-300">Dolor Sit Amet</h2>
            </div>
            <p class="max-w-full md:w-3/5 md:text-md lg:text-lg xl:text-xl font-medium text-center">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
                rem
                aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
                explicabo.
            </p>
            <div class="flex items-center space-x-5 text-md font-semibold pt-6">
                <a href="#"
                    class="px-5 py-2 bg-yellow-300 text-black rounded-md hover:bg-gray-900 hover:text-white">Know
                    More</a>
                <a href="#"
                    class="px-5 py-2 bg-gray-900 text-white rounded-md hover:bg-yellow-300 hover:text-black">Contact
                    Us</a>
            </div>
        </div>
    </div>
</header>