Centered Headers.

5 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'.


        <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-black 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">You're about to launch soon and must be 100% focused on your product. Don't loose precious days designing, coding the landing page and testing a site. Instead, integrate one with your favourite framework.
.</p>
                </div>
                <div class="flex lg:justify-center">
                    <button
                        class="inline-flex px-6 py-2 font-semibold text-white transition duration-500 ease-in-out transform bg-black rounded-lg hover:bg-gray-800 hover:to-black focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">Button</button>
                    <button
                        class="inline-flex items-center px-6 py-2 ml-4 font-semibold text-black 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 focus:ring-2 ring-offset-current ring-offset-2">Button</button>
                </div>
        </section>
                                    

wickedtemplates

Spring Offer is live! 50% discount on all products. Use the Code wicked50

Tired of designing?

Don't lose precious days designing the landing page and testing a site. Instead, integrate one with your favourite framework.


        <section class="text-gray-700 body-font">
            <container flex flex-col px-5 py-20 mx-auto lg:items-center">
                <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-black sm:text-5xl title-font">
                        A  medium length display headline.
                    </h1>
                    <p class="mx-auto text-base font-medium leading-relaxed text-gray-700 lg:w-2/3">You're about to launch soon and must be 100% focused on your product. Don't loose precious days designing, coding the landing page and testing a site. Instead, integrate one with your favourite framework.
.</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-black transition duration-1000 ease-in-out transform bg-gray-200 rounded-lg focus:outline-none focus:border-purple-500 sm:mb-0 focus:bg-white focus:shadow-outline focus:ring-2 ring-offset-current ring-offset-2"
                        placeholder="Your Name" type="text">
                    <input
                        class="flex-grow w-full px-4 py-2 mb-4 mr-4 text-base text-black transition duration-1000 ease-in-out transform bg-gray-200 rounded-lg focus:outline-none focus:border-purple-500 sm:mb-0 focus:bg-white focus:shadow-outline focus:ring-2 ring-offset-current ring-offset-2"
                        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 bg-black rounded-lg hover:bg-gray-900 focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">Sign
                        Up</button>
                </div>
                <p class="w-full mt-12 mb-8 text-sm text-gray-500 lgtext-center">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>
                                

                                        <section class="text-gray-700 body-font">
            <div class="container flex flex-col px-5 py-8 mx-auto lg:items-center">
                <div class="flex flex-col w-full mb-8 text-left lg:text-center">
                    <h2 class="mb-1 text-xs font-semibold tracking-widest text-black uppercase title-font">a great
                        header right here</h2>
                    <h1 class="mb-6 text-2xl font-semibold tracking-tighter text-black 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">You're about to launch soon and must be 100% focused on your product. Don't loose precious days designing, coding the
                    landing page and testing a site. Instead, integrate one with your favourite framework.
.</p>
                        <div class="flex items-start w-full mt-12 lg:mx-auto lg:justify-center 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-black transition duration-1000 ease-in-out transform bg-gray-200 rounded-lg focus:outline-none focus:border-purple-500 sm:mb-0 focus:bg-white focus:shadow-outline focus:ring-2 ring-offset-current ring-offset-2">
                            </div>
                            <button
                                class="flex items-center px-6 py-2 font-semibold text-white transition duration-500 ease-in-out transform bg-black rounded-lg hover:bg-gray-900 focus:shadow-outline focus:outline-none focus:ring-2 ring-offset-current ring-offset-2">Action</button>
                        </div>
                        <p class="mt-6 mb-8 text-sm text-gray-600 lg:mx-auto lg:w-1/3 ">It enables developers to host Jamstack websites and web services that deploy instantly.</p>
                </div>
        </section>
                                                                        

        <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-black 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.You're about to launch soon and must be 100% focused on your product. Don't loose precious days designing, coding the landing page and testing a site. Instead, integrate one with your favourite framework.
. </p>
                </div>
       </section>