feature-content-image.html

<div class="bg-white relative min-h-screen min-w-screen">
    <div class="relative lg:absolute left-0 top-0 w-full lg:w-1/2 h-64 lg:h-full">
        <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2850&q=80" class="lg:absolute inset-0 w-full h-full object-cover">
    </div>
    <div class="max-w-6xl mx-auto flex items-center pb-20 pt-0 lg:pt-24 flex items-center justify-center h-full">
        <div class="w-1/2 hidden lg:block"></div>
        <div class="relative w-full lg:w-1/2 h-full pl-12 pr-10 lg:pl-16 lg:pr-0 flex flex-col items-start justify-center">
            <p class="text-sm uppercase font-bold text-indigo-500 tracking-wide">Cool Features</p>
            <h2 class="text-4xl font-bold text-gray-900 mt-5 leading-tight">Awesome Features to <br> help build your Empire.</h2>
            <p class="text-gray-600 text-base mt-5">Are you ready for some badass features? If so, we've got you covered. From Cotton Candy Flavored Donuts to Fully Featured Eggs and Bacon. Whatever the fuck that means.</p>
            <a href="#_" class="underline font-medium flex items-center inline-block text-indigo-500 mt-8">
                <span>Learn More</span>
                <svg class="w-4 h-4 ml-1 mt-1 transform -rotate-45" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path>
                </svg>
            </a>
        </div>
    </div>
</div>