featured-showcase.html

<section class="relative py-16 bg-white min-w-screen animation-fade animation-delay">
    <div class="container px-10 mx-auto sm:px-5">
        <div class="w-full lg:flex">
            <div class="w-full lg:w-1/2 xl:w-2/3">
                <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-2 xl:grid-cols-3 gap-5">
                    <img src="https://picsum.photos/300/300?grayscale&random=1">
                    <img src="https://picsum.photos/300/300?grayscale&random=2">
                    <img src="https://picsum.photos/300/300?grayscale&random=3">
                    <img src="https://picsum.photos/300/300?grayscale&random=4">
                    <img src="https://picsum.photos/300/300?grayscale&random=5">
                    <img src="https://picsum.photos/300/300?grayscale&random=6">
                </div>
            </div>
            <div class="mt-10 lg:mt-0 w-full lg:flex-1 lg:w-1/2 xl:w-1/3 ml-0 lg:ml-10">
                <div class="bg-black text-white px-20 py-10 lg:h-full">
                    <div class="uppercase text-sm mt-2">Featured</div>
                    <div class="text-2xl mt-10 mb-5">Works of Arts</div>
                    <p class="leading-7">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                    <div class="mt-10">
                        <a class="flex text-green-500 hover:text-green-800" href="#">
                            <div class="flex-initial">Learn more about us</div>
                            <svg class="flex-shrink ml-5 w-4 fill-current" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                            viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
                                <path style="fill:#2196F3;" d="M511.189,259.954c1.649-3.989,0.731-8.579-2.325-11.627l-192-192
                                c-4.237-4.093-10.99-3.975-15.083,0.262c-3.992,4.134-3.992,10.687,0,14.82l173.803,173.803H10.667
                                C4.776,245.213,0,249.989,0,255.88c0,5.891,4.776,10.667,10.667,10.667h464.917L301.803,440.328
                                c-4.237,4.093-4.355,10.845-0.262,15.083c4.093,4.237,10.845,4.354,15.083,0.262c0.089-0.086,0.176-0.173,0.262-0.262l192-192
                                C509.872,262.42,510.655,261.246,511.189,259.954z"/>
                                <path d="M309.333,458.546c-5.891,0.011-10.675-4.757-10.686-10.648c-0.005-2.84,1.123-5.565,3.134-7.571L486.251,255.88
                                L301.781,71.432c-4.093-4.237-3.975-10.99,0.262-15.083c4.134-3.992,10.687-3.992,14.82,0l192,192
                                c4.164,4.165,4.164,10.917,0,15.083l-192,192C314.865,457.426,312.157,458.546,309.333,458.546z"/>
                                <path d="M501.333,266.546H10.667C4.776,266.546,0,261.771,0,255.88c0-5.891,4.776-10.667,10.667-10.667h490.667
                                c5.891,0,10.667,4.776,10.667,10.667C512,261.771,507.224,266.546,501.333,266.546z"/>
                            </svg>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>