Centered Headers.

15 Blocks

Centering elements in a web design is a very effective way to create visual balance. Centered designs can also facilitate responsiveness, a property that is becoming increasingly desirable with the growth of the 'mobile web'.

1

         <section class="text-gray-700 body-font">
            <div class="container px-8 pt-48 pb-24 mx-auto lg:px-4">
                <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                    <h2 class="mb-1 text-xs font-semibold tracking-widest text-blue-600 uppercase title-font">a great
                        header right here</h2>
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-5xl title-font">
                        A centered
                        <br class="md:hidden">
                        medium length display headline.
                    </h1>
                    <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-2/3">Whatever cardigan
                        tote bag tumblr hexagon brooklyn
                        asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                        them man
                        bun deep.</p>
                </div>
                <div class="flex lg:justify-center">
                    <button
                        class="inline-flex px-4 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">Button</button>
                </div>
            </div>
        </section>
        <section class="block " id="section">
            <div class="container flex flex-col items-center justify-center px-10 py-2 mx-auto lg:px-48">
                <img class="object-cover object-center mx-auto mb-10 rounded-lg lg:w-full md:w-15/5 w-20/6" alt="hero"
                    src="https://dummyimage.com/720x600/F3F4F7/64748b">
            </div>
        </section>
                                    

WICKEDTEMPLATES
"Free & premium Well designed landing pages to integrate with your next project."

Have a look to Wicked Templates.
2

        <section class="text-gray-700 body-font">
            <div class="container px-8 py-48 mx-auto lg:px-4">
                <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                    <h2 class="mb-1 text-xs font-semibold tracking-widest text-blue-600 uppercase title-font">a great
                        header right here</h2>
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-5xl title-font">
                        A centered
                        <br class="md:hidden">
                        medium length display headline.
                    </h1>
                    <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-2/3">Whatever cardigan
                        tote bag tumblr hexagon brooklyn
                        asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                        them man
                        bun deep.</p>
                </div>
                <div class="flex lg:justify-center">
                    <button
                        class="inline-flex px-4 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">Button</button>
                    <button
                        class="inline-flex items-center px-4 py-2 ml-4 font-semibold text-blue-800 transition duration-500 ease-in-out transform bg-white border rounded-lg shadow-xl hover:border-gray-600 hover:bg-gray-600 hover:text-white focus:shadow-outline focus:outline-none">Button</button>
                </div>
        </section>
                                    
3

        <section class="text-gray-700 body-font">
            <div class="container px-8 py-48 mx-auto lg:px-4">
                <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                    <h2 class="mb-1 text-xs font-semibold tracking-widest text-blue-600 uppercase title-font">a great
                        header right here</h2>
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-5xl title-font">
                        A centered
                        <br class="md:hidden">
                        medium length display headline.
                    </h1>
                    <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-2/3">Whatever cardigan
                        tote bag tumblr hexagon brooklyn
                        asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                        them man
                        bun deep.</p>
                </div>
                <div class="flex justify-center">
                    <a href="#" class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                        Learn More
                        <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
                            fill="currentColor">
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" /></svg>
                    </a>
                </div>
        </section>
                                                                        
4

        <section class="text-gray-700 body-font">
            <div class="container px-8 mx-auto pt-36 lg:px-4">
                <div class="flex flex-col w-full mx-auto mb-12 text-left lg:w-2/3 lg:text-center">
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-5xl title-font">
                        A centered
                        <br class="md:hidden">
                        medium length display headline.
                    </h1>
                    <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-2/3">Whatever cardigan
                        tote bag tumblr hexagon brooklyn
                        asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                        them man
                        bun deep.</p>
                </div>
                <div class="flex flex-col w-full px-0 mx-auto lg:w-2/3 sm:flex-row md:px-8">
                    <input
                        class="flex-grow w-full px-4 py-2 mb-4 mr-4 text-base text-purple-700 bg-gray-100 border border-gray-400 rounded-lg focus:outline-none focus:border-purple-500 sm:mb-0 focus:bg-white"
                        placeholder="Your Name" type="text">
                    <input
                        class="flex-grow w-full px-4 py-2 mb-4 mr-4 text-base text-purple-700 bg-gray-100 border border-gray-400 rounded-lg focus:outline-none focus:border-purple-500 sm:mb-0 focus:bg-white"
                        placeholder="Your Email" type="email">
                    <button
                        class="w-1/2 px-8 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">Sign
                        Up</button>
                </div>
                <p class="w-full mt-12 mb-8 text-sm text-center text-gray-500">Neutra shabby chic ramps, viral
                    fixie.<a href="#"
                        class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                        Learn More
                        <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20"
                            height="20" fill="currentColor">
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path
                                d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
                        </svg>
                    </a></p>
        </section>
                                
5

        <section class="text-gray-700 body-font">
            <div class="container px-8 mx-auto py-36 lg:px-4">
                <div class="flex flex-col w-full mx-auto mb-12 text-left lg:w-2/3 lg:text-center">
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-5xl title-font">
                        A centered
                        <br class="md:hidden">
                        medium lenght display headline.
                    </h1>
                    <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-2/3">Whatever cardigan
                        tote bag tumblr hexagon brooklyn
                        asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                        them man
                        bun deep.</p>
                </div>
                <p class="w-full mt-12 mb-8 text-sm text-center text-gray-500"><a href="#" class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                    First Action
                    <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
                        fill="currentColor">
                        <path fill="none" d="M0 0h24v24H0z" />
                        <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
                    </svg>
                </a>
                <a href="#" class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                    Second Action
                    <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
                        fill="currentColor">
                        <path fill="none" d="M0 0h24v24H0z" />
                        <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" />
                    </svg>
                </a></p>
        </section>
                                    
6

                                        <section class="text-gray-700 body-font">
                                        <div class="container px-8 mx-auto pt-36 lg:px-4">
                                        <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                                        <h2 class="mb-1 text-xs font-semibold tracking-widest text-blue-600 uppercase title-font">a great
                                        header right here</h2>
                                        <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-6xl title-font">
                                        A Long headline
                                        <br class="">
                                        to convey your users.
                                        </h1>
                                        <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-2/3">Whatever cardigan
                                        tote bag tumblr hexagon brooklyn
                                        asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                                        them man
                                        bun deep.</p>
                                        <div class="flex items-end justify-center w-full mx-auto mt-12 lg:w-1/2">
                                        <div class="relative w-2/4 mr-4 text-left lg:w-full xl:w-1/2 md:w-full">
                                        <input type="text" id="hero-field" name="hero-field"
                                        class="flex-grow w-full px-4 py-2 mb-4 mr-4 text-base text-purple-700 bg-gray-100 border border-gray-400 rounded-lg focus:outline-none focus:border-purple-500 sm:mb-0 focus:bg-white">
                                        </div>
                                        <button
                                        class="flex items-center px-4 py-2 mt-auto font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 hover:-translate-y-1 hover:scale-110 focus:shadow-outline focus:outline-none">Action</button>
                                        </div>
                                        <p class="w-1/3 mx-auto mt-6 mb-8 text-sm text-gray-600 ">It enables developers to host Jamstack websites and web
                                        services that deploy instantly.</p>
                                        </div>
                                        </section>
                                                                        
7

        <section class="text-gray-700 body-font">
            <div class="container px-8 mx-auto py-36 lg:px-4">
                <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                    <h2 class="mb-1 text-xs font-semibold tracking-widest text-blue-600 uppercase title-font">a great
                        header right here</h2>
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-6xl title-font">
                        A Long headline
                        <br class="">
                        to convey your users.
                    </h1>
                    <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-1/2">Tailwind CSS templates
                    with a wicked design.
                    Professionally designed and 100% responsive static templates for startups and personal use.Whatever cardigan
                        tote bag tumblr hexagon brooklyn
                        asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                        them man
                        bun deep. </p>
                </div>
       </section>
                                                                        
8

        <section class="text-gray-700 body-font">
            <div class="container px-8 mx-auto py-36 lg:px-4">
                <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                    <h2 class="mb-1 text-xs font-semibold tracking-widest text-blue-600 uppercase title-font">a great
                        header right here</h2>
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-6xl title-font">
                        A Long headline
                        <br class="">
                        to convey your users.
                    </h1>
                    <div class="flex mt-12 lg:justify-center">
                        <button
                            class="inline-flex px-4 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">Button</button>
                    </div>
                </div>
        </section>
                                                                        
9

        <section class="text-gray-700 body-font">
            <div class="container px-8 mx-auto pt-36 lg:px-4">
                <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                    <h2 class="mb-1 text-xs font-semibold tracking-widest text-blue-600 uppercase title-font">a great
                        header right here</h2>
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-6xl title-font">
                        A Long headline
                        <br class="">
                        to convey your users.
                    </h1>
                    <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-1/2">Tailwind CSS
                        templates
                        with a wicked design.
                        Professionally designed and 100% responsive static templates for startups and personal
                        use.Whatever cardigan
                        tote bag tumblr hexagon brooklyn
                        asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                        them man
                        bun deep. </p>
                  <div class="flex mt-12 lg:justify-center">
                    <button
                        class="inline-flex px-4 py-2 font-semibold text-white transition duration-500 ease-in-out transform rounded-lg shadow-xl bg-gradient-to-r from-blue-700 hover:from-blue-600 to-blue-600 hover:to-blue-700 focus:shadow-outline focus:outline-none">Button</button>
                </div>
                </div>
        </section>
                                                                        
10

        <section class="text-gray-700 body-font">
            <div class="container px-8 mx-auto pt-36 lg:px-4">
                <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                    <div
                        class="inline-flex items-center justify-center flex-shrink-0 w-20 h-20 mx-auto mb-5 text-blue-800 bg-gray-200 rounded-full">
                        <svg class="w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="34" height="24"
                            fill="currentColor">
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path
                                d="M5.68 7.314l-1.82 5.914L12 19.442l8.14-6.214-1.82-5.914L16.643 11H7.356L5.681 7.314zM15.357 9l2.888-6.354a.4.4 0 0 1 .747.048l3.367 10.945a.5.5 0 0 1-.174.544L12 21.958 1.816 14.183a.5.5 0 0 1-.174-.544L5.009 2.694a.4.4 0 0 1 .747-.048L8.644 9h6.712z" />
                        </svg>
                    </div>
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-6xl title-font">
                        A Long headline
                        <br class="">
                        to convey your users.
                    </h1>
                    <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-1/2">Tailwind CSS
                        templates
                        with a wicked design.
                        Professionally designed and 100% responsive static templates for startups and personal
                        use.Whatever cardigan
                        tote bag tumblr hexagon brooklyn
                        asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                        them man
                        bun deep. </p>
                </div>
        </section>
                                                                        
11

        <section class="text-gray-700 body-font">
            <div class="container px-8 mx-auto pt-36 lg:px-4">
                <div class="flex flex-col w-full mx-auto mb-12 text-left lg:text-center">
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-6xl title-font">
                        A Long headline
                        <br class="">
                        to convey your users.
                    </h1>
                    <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-1/2">Tailwind CSS
                        templates
                        with a wicked design.
                        Professionally designed and 100% responsive static templates for startups and personal
                        use.Whatever cardigan
                        tote bag tumblr hexagon brooklyn
                        asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                        them man
                        bun deep. </p>
                </div>
                <section class="mx-auto">
                    <div class="container px-5 mx-auto lg:px-24 lg:py-4">
                        <div class="grid grid-cols-3 gap-2 mb-16 text-center lg:grid-cols-4">
                            <div class="flex items-center justify-center ">
                                <svg width="42" height="42" viewBox="0 0 32 32" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0)">
                                        <path d="M16 32.076L30 24.065V8.05701L16 16.067V32.076Z" fill="#000001" />
                                        <path d="M19 24.5556V27L25 23.4444V21L19 24.5556Z" fill="white" />
                                        <path d="M16 0.076004L2 8.057V24.065L16 32.076V16.067L30 8.057L16 0.076004Z"
                                            fill="url(#paint0_linear)" />
                                    </g>
                                    <defs>
                                        <linearGradient id="paint0_linear" x1="2.18" y1="23.255" x2="30.041" y2="8.782"
                                            gradientUnits="userSpaceOnUse">
                                            <stop offset="0.043" stop-color="#FF8618" />
                                            <stop offset="0.382" stop-color="#FF246E" />
                                            <stop offset="0.989" stop-color="#AF1DF5" />
                                        </linearGradient>
                                        <clipPath id="clip0">
                                            <rect width="32" height="32" fill="white" />
                                        </clipPath>
                                    </defs>
                                </svg>
                            </div>
                            <div class="flex items-center justify-center ">
                                <svg width="42" height="42" viewBox="0 0 32 32" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <circle cx="16" cy="16" r="14" fill="#FF3366" />
                                    <path
                                        d="M11.3594 10.8594C12.3259 10.8594 13.1094 10.0759 13.1094 9.10938C13.1094 8.14288 12.3259 7.35938 11.3594 7.35938C10.3929 7.35938 9.60938 8.14288 9.60938 9.10938C9.60938 10.0759 10.3929 10.8594 11.3594 10.8594Z"
                                        fill="white" />
                                    <path
                                        d="M7.70312 12.3594L7.09375 14.5938H9.09375C8.69271 16.224 7.85312 19.6531 7.70312 20.3281C7.51562 21.1719 7.48433 23.5781 10.0156 23.5781C11.7824 23.5781 12.9093 22.4368 13.5379 21.5048L13.0625 23.4062H15.9062L17.3906 17.3981C17.6016 16.3984 18.0981 14.4688 19.8906 14.4688C22.0225 14.4688 21.2404 16.9933 20.8571 18.2305C20.8415 18.2809 20.8266 18.3291 20.8125 18.375C20.525 19.3125 20.2188 20.4062 20.2188 21.1562C20.2188 22 20.6094 23.5781 22.7969 23.5781C24.9844 23.5781 25.9167 21.4115 26.1094 20.3281L25 19.875C24.9219 20.4531 24.2188 21.7031 23.5625 21.7031C22.6641 21.7031 23.1154 20.1885 23.597 18.5721C23.8106 17.8551 24.0302 17.1181 24.1406 16.4844C24.4198 14.8821 24.1406 12.1562 21.3594 12.1562C19.632 12.1562 18.2756 13.6955 17.6303 14.7641L18.1719 12.3594H13.8438L13.25 14.5938H15.2656C15.2656 14.5938 14.0695 19.4683 13.9922 19.6211C13.1797 21.2266 11.9508 21.7655 11.0312 21.7031C10.2938 21.6531 10.3802 20.7656 10.5156 20.3281L12.5156 12.3594H7.70312Z"
                                        fill="white" />
                                </svg>
                            </div>
                            <div class="flex items-center justify-center ">
                                <svg width="42" height="42" viewBox="0 0 32 32" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M16 16C16 13.7909 17.7909 12 20 12C22.2091 12 24 13.7909 24 16C24 18.2091 22.2091 20 20 20C17.7909 20 16 18.2091 16 16Z"
                                        fill="#1ABCFE" />
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M8 24C8 21.7909 9.79086 20 12 20H16V24C16 26.2091 14.2091 28 12 28C9.79086 28 8 26.2091 8 24Z"
                                        fill="#0ACF83" />
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M16 4V12H20C22.2091 12 24 10.2091 24 8C24 5.79086 22.2091 4 20 4H16Z"
                                        fill="#FF7262" />
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M8 8C8 10.2091 9.79086 12 12 12H16V4H12C9.79086 4 8 5.79086 8 8Z"
                                        fill="#F24E1E" />
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M8 16C8 18.2091 9.79086 20 12 20H16V12H12C9.79086 12 8 13.7909 8 16Z"
                                        fill="#A259FF" />
                                </svg>
                            </div>
                            <div class="flex items-center justify-center ">
                                <svg width="42" height="42" viewBox="0 0 32 32" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" clip-rule="evenodd"
                                        d="M5.58991 11C2.5245 11 -0.0510283 13.5306 0.000767908 16.5905C0.0516066 19.5934 2.54027 22 5.59027 22C6.8999 22 8.10608 21.5563 9.06016 20.812C10.0143 21.5562 11.2205 22 12.5302 22C13.8398 22 15.046 21.5563 16.0001 20.812C16.9542 21.5562 18.1604 22 19.4701 22C20.7798 22 21.986 21.5563 22.94 20.812C23.8942 21.5562 25.1004 22 26.4101 22C29.4597 22 31.9484 19.5938 31.9992 16.5905C32.051 13.5304 29.4754 11 26.4099 11C25.1111 11 23.9003 11.4542 22.94 12.2104C21.9795 11.4542 20.7686 11 19.4698 11C18.171 11 16.9603 11.4542 15.9999 12.2104C15.0396 11.4542 13.8288 11 12.53 11C11.2312 11 10.0204 11.4542 9.06004 12.2105C8.09965 11.4542 6.88874 11 5.58991 11ZM12.5302 20.7518C11.5705 20.7518 10.6833 20.4441 9.96546 19.9232C10.7071 19.0067 11.1581 17.8512 11.1794 16.5905C11.2016 15.2766 10.7395 14.0604 9.96228 13.1002C10.686 12.5665 11.578 12.2482 12.53 12.2482C13.4821 12.2482 14.374 12.5665 15.0977 13.1001C14.3204 14.0604 13.8582 15.2768 13.8803 16.5906C13.9018 17.8512 14.3529 19.0068 15.0947 19.9233C14.3769 20.4442 13.4898 20.7518 12.5302 20.7518ZM9.91349 16.5697C9.92973 15.6102 9.60767 14.7149 9.06006 13.9908C8.51245 14.7149 8.19039 15.6102 8.20663 16.5697C8.22228 17.4943 8.5373 18.3464 9.06013 19.0368C9.58286 18.3464 9.89783 17.4944 9.91349 16.5697ZM6.94071 16.5905C6.91847 15.2766 7.38057 14.0604 8.15783 13.1002C7.43411 12.5665 6.54203 12.2482 5.58991 12.2482C3.2229 12.2482 1.22685 14.2162 1.26669 16.5697C1.30595 18.8891 3.2289 20.7518 5.59027 20.7518C6.54983 20.7518 7.43703 20.4442 8.15483 19.9232C7.41304 19.0067 6.96205 17.8512 6.94071 16.5905ZM18.1193 16.5905C18.1416 15.2766 17.6795 14.0604 16.9022 13.1001C17.6258 12.5665 18.5178 12.2482 19.4698 12.2482C20.4219 12.2482 21.314 12.5665 22.0378 13.1002C21.2605 14.0604 20.7984 15.2766 20.8206 16.5905C20.8419 17.8512 21.2929 19.0067 22.0347 19.9232C21.3169 20.4442 20.4297 20.7518 19.4701 20.7518C18.5105 20.7518 17.6233 20.4441 16.9054 19.9232C17.6471 19.0067 18.098 17.8512 18.1193 16.5905ZM22.0865 16.5697C22.0703 15.6102 22.3924 14.7148 22.94 13.9907C23.4877 14.7148 23.8097 15.6102 23.7934 16.5697C23.7777 17.4944 23.4627 18.3464 22.94 19.0368C22.4172 18.3464 22.1022 17.4943 22.0865 16.5697ZM26.4101 20.7518C25.4504 20.7518 24.5632 20.4441 23.8453 19.9232C24.587 19.0068 25.0379 17.8513 25.0593 16.5906C25.0817 15.2765 24.6196 14.0603 23.8423 13.1001C24.5659 12.5665 25.4579 12.2482 26.4099 12.2482C28.7771 12.2482 30.7732 14.216 30.7333 16.5697C30.694 18.8895 28.7711 20.7518 26.4101 20.7518ZM16.8534 16.599C16.8696 15.6395 16.5476 14.7442 15.9999 14.0201C15.4523 14.7442 15.1303 15.6395 15.1465 16.599C15.1622 17.5236 15.4772 18.3757 16 19.0661C16.5227 18.3757 16.8377 17.5237 16.8534 16.599Z"
                                        fill="black" />
                                </svg>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </section>
                                                                        
12

        <section class="text-gray-700 body-font">
            <div class="container px-8 mx-auto py-36 lg:px-4">
                <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                    <h2 class="mb-1 text-xs font-semibold tracking-widest text-blue-600 uppercase title-font">a great
                        header right here</h2>
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-6xl title-font">
                        A Long headline
                        <br class="">
                        to convey your users.
                    </h1>
                <div class="flex justify-center mt-6">
                    <a href="#" class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                        Learn More
                        <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
                            fill="currentColor">
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" /></svg>
                    </a>
                    <span class="inline-flex justify-center mt-4 sm:ml-4 sm:mt-0 sm:justify-start">
                        <a class="text-gray-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5"
                                viewBox="0 0 24 24">
                                <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
                            </svg>
                        </a>
                        <a class="ml-3 text-gray-500">
                            <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5"
                                viewBox="0 0 24 24">
                                <path
                                    d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
                                </path>
                            </svg>
                        </a>
                        <a class="ml-3 text-gray-500">
                            <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
                                <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
                            </svg>
                        </a>
                        <a class="ml-3 text-gray-500">
                            <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0"
                                class="w-5 h-5" viewBox="0 0 24 24">
                                <path stroke="none"
                                    d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
                                <circle cx="4" cy="4" r="2" stroke="none"></circle>
                            </svg>
                        </a>
                    </span>
                </div>
                </div>
        </section>
                                                                        
13

        <section class="text-gray-700 body-font">
            <div class="container px-8 py-48 mx-auto lg:px-4">
                <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-3xl title-font">
                        A Short and small headline
                        <br class="">
                        to explain some more to your users.
                    </h1>
                <div class="flex justify-center mt-6">
                    <a href="#" class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                        Learn More
                        <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
                            fill="currentColor">
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" /></svg>
                    </a>
                </div>
                </div>
        </section>
                                                                        
14

        <section class="text-gray-700 body-font">
            <div class="container px-8 py-48 mx-auto lg:px-4">
                <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                    <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-1/2">Tailwind CSS
                        templates
                        with a wicked design.
                        Professionally designed and 100% responsive static templates for startups and personal
                        use.Whatever cardigan
                        tote bag tumblr hexagon brooklyn
                        asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                        them man
                        bun deep. </p>
                    <div class="flex justify-center mt-6">
                        <a href="#" class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                            Learn More
                            <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
                                fill="currentColor">
                                <path fill="none" d="M0 0h24v24H0z" />
                                <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" /></svg>
                        </a>
                    </div>
                </div>
        </section>
                                                                        
15

                                        <section class="block " >
            <div class="container flex flex-col items-center justify-center px-10 pt-8 mx-auto lg:px-32">
                <img class="object-cover object-center mx-auto mb-10 rounded-lg lg:w-full md:w-15/5 w-20/6" alt="hero"
                    src="https://dummyimage.com/620x200/F3F4F7/64748b/64748b">
            </div>
        </section>
        <section class="text-gray-700 body-font">
            <div class="container px-8 pt-2 pb-2 mx-auto lg:px-4">
                <div class="flex flex-col w-full mb-12 text-left lg:text-center">
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-blue-800 sm:text-3xl title-font">
                        A centered
                        <br class="md:hidden">
                        medium lenght display headline.
                    </h1>
                    <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-2/3">Whatever cardigan
                        tote bag tumblr hexagon brooklyn
                        asymmetrical gentrify, subway tile poke farm-to-table. Franzen you probably haven't heard of
                        them man
                        bun deep.</p>
                </div>
                <div class="flex justify-center">
                    <a href="#" class="inline-flex items-center font-semibold text-blue-700 md:mb-2 lg:mb-0 hover:text-blue-400 ">
                        Learn More
                        <svg class="w-4 h-4 ml-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="20" height="20"
                            fill="currentColor">
                            <path fill="none" d="M0 0h24v24H0z" />
                            <path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" /></svg>
                    </a>
                </div>
            </div>
        </section>