<section class="py-20 md:py-40 bg-gray-900 overflow-hidden">
<div class="container px-4 mx-auto">
<h1 class="text-6xl sm:text-8xl md:text-10xl xl:text-11xl font-heading font-semibold text-white mb-32">View projects</h1>
<div class="flex flex-wrap -mx-4">
<div class="w-full md:w-1/2 px-4 mb-24 md:mb-0">
<div class="flex flex-wrap justify-center xl:justify-end -mx-3">
<div class="w-full xs:w-1/2 xl:w-auto px-3 mb-8 xs:mb-0 xl:mr-6">
<img class="w-full xs:w-auto xl:w-60 xl:h-88 mx-auto rounded-lg object-cover" src="suncealand-assets/images/portfolio-template1-1.png" alt="">
</div>
<div class="w-full xs:w-1/2 xl:w-auto px-3 mb-8 xs:mb-0">
<img class="xs:animate-bouncingSlow mx-auto w-full xs:w-auto xl:w-60 xl:h-88 xs:mt-24 rounded-lg" src="suncealand-assets/images/portfolio-template1-5.png" alt="">
</div>
</div>
<div class="flex flex-wrap justify-end">
<div class="w-full xs:w-1/2 xl:w-auto px-3 xl:mr-auto mb-8 xs:mb-0">
<img class="w-full xs:w-auto xl:w-60 xl:h-60 mx-auto xl:-mt-8 rounded-lg" src="suncealand-assets/images/portfolio-template1-3.png" alt="">
</div>
<div class="w-full xs:w-1/2 xl:w-auto px-3">
<img class="w-full xs:w-auto xl:w-60 xl:h-60 mx-auto xs:mt-20 xl:mt-32 rounded-lg" src="suncealand-assets/images/portfolio-template1-4.png" alt="">
</div>
</div>
</div>
<div class="w-full md:w-1/2 px-4">
<div>
<img class="hidden md:block animate-photo w-60 h-60 ml-auto mb-16 rounded-lg" src="suncealand-assets/images/portfolio-template1-2.png" alt="">
<a class="group flex h-full w-full md:max-w-md xl:max-w-lg ml-auto md::mr-12 py-20 px-6 xl:px-16 items-center justify-center bg-gray-800 rounded-3xl" href="#">
<div class="flex items-center justify-center w-40 xs:w-72 xl:w-88 h-40 xs:h-72 xl:h-88 px-4 rounded-full border border-gray-500 group-hover:border-gray-300 transition duration-300">
<span class="text-center xs:text-2xl text-white font-semibold transform group-hover:rotate-45 transition duration-700">Click here and see more</span>
</div>
</a>
<img class="md:hidden animate-photo w-60 h-60 ml-auto mt-20 rounded-lg" src="suncealand-assets/images/portfolio-template1-2.png" alt="">
</div>
</div>
</div>
</div>
</section>Framework
Tailwind CSS
UI Library
Suncealand
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Portfolio Components by Shuffle
Choose from 6 variations of Tailwind Portfolio components. Presented here are variants available in Suncealand library.
Get access to all Tailwind Portfolio components, code and our visual editor. Try the demo for free!
