Tailwind header

<div class="flex bg-white max-h-full font-roboto" style="height:580px">
    <div class="md:w-1/2">
        <div class="flex flex-col justify-center items-center h-full px-16">
            <div>
                <h2 class="text-4xl font-semibold text-gray-900">Build Your New <span class="text-indigo-500">Idea</span></h2>
                <p class="text-gray-500">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis commodi cum cupiditate ducimus, fugit harum id necessitatibus odio quam quasi, quibusdam rem tempora voluptates. Cumque debitis dignissimos id quam vel!</p>
            </div>
            <div class="mt-8 flex w-full">
                <a class="bg-gray-900 text-gray-200 text-xs px-4 py-3 font-semibold rounded" href="#">Start now</a>
                <a class="bg-gray-200 text-xs px-4 py-3 font-semibold rounded ml-6" href="#">Learn More</a>
            </div>
        </div>
    </div>
    <div class="flex-none md:w-1/2" style="clip-path: polygon(10% 0, 100% 0%, 100% 100%, 0 100%);">
        <div class="h-full object-cover" style="background-image: url('https://images.unsplash.com/photo-1498050108023-c5249f4df085?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1352&q=80')">
            <div class="bg-black h-full opacity-25"></div>
        </div>
    </div>
</div>