content-browser.html

<div class="px-8 mx-auto flex items-center min-h-screen min-w-screen bg-white">
    <div class="w-1/2">
        <div class="flex flex-col overflow-hidden shadow-2xl rounded-lg">
            <div class="h-8 bg-gray-900 text-white flex items-center">
                <div class="w-3 h-3 rounded-full ml-3 bg-red-400"></div>
                <div class="w-3 h-3 rounded-full ml-2 bg-yellow-400"></div>
                <div class="w-3 h-3 rounded-full ml-2 bg-green-400"></div>
            </div>
            <img src="https://images.unsplash.com/photo-1504985954001-5737b2af529e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2879&q=80" class="w-full h-full object-cover">
        </div>
    </div>
    <div class="relative w-1/2 h-full pl-12">
        <p class="text-sm uppercase font-bold text-indigo-500 tracking-wide">Awesome Features</p>
        <h2 class="text-4xl font-bold text-gray-900 mt-5 leading-tight">Awesome Features<br> for Everyone to Enjoy.</h2>
        <p class="text-gray-600 text-base mt-3">Perhaps the coolest features since the introduction of Poprocks! We've got some rock'n poppin features that will leave you wanting more. We've got a jampacked feature set of awesomeness that will blow your pants right off!</p>
        <a href="/security-awareness-training-topics/" class="underline font-medium flex items-center inline-block text-indigo-500 mt-8">
            <span>View All Features</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>