Verse Labs Learning Interface - Copy this Html, Tailwind Component to your project
<header class="relative flex flex-col items-center justify-center min-h-screen py-20 px-4 bg-cover bg-center" style="background-image: url('https://media.discordapp.net/attachments/1219863263073009755/1299386021762306078/8315b4a4-094a-4257-8248-7dfea1c6335b.png?ex=671d0309&is=671bb189&hm=ec96c66e3da08c2c0b12e68a37a3bb8c11411ad73d66e010fa9e2576d76521d2&=&format=webp&quality=lossless');"> <div class="absolute inset-0 bg-black opacity-50"></div> <div class="container mx-auto text-center fade-in"> <h1 class="text-5xl font-extrabold text-white mb-6 text-shadow-lg" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">Create and Customize Your Own Experiences</h1> <p class="text-gray-300 text-lg mb-8 max-w-2xl mx-auto" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);"> Discover the Unreal Editor for Fortnite through our unique templates and ready-to-use devices that boost your creative experience. </p> <div class="flex gap-4 justify-center"> <button class="px-6 py-3 bg-blue-600 text-white rounded-lg shadow-md hover:bg-blue-500 transition" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">Start Learning Now</button> <button class="px-6 py-3 border border-blue-600 text-blue-600 rounded-lg bg-white hover:bg-gray-200 transition" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">Explore Tutorials</button> </div> </div> </header> <section class="py-16 px-4"> <div class="container mx-auto"> <h2 class="text-3xl font-bold text-white mb-12 text-center">Popular Tutorials</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <div class="bg-gray-800/50 rounded-xl overflow-hidden border border-blue-500/20 hover:border-blue-500/50 transition"> <img src="https://images.unsplash.com/photo-1542831371-29b0f74f9713" alt="Tutorial" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold text-white mb-3">Getting Started with UEFN</h3> <p class="text-gray-400 mb-4">Learn the basics of Unreal Editor for Fortnite and start creating your first world.</p> <button class="w-full py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">View Tutorial</button> </div> </div> <div class="bg-gray-800/50 rounded-xl overflow-hidden border border-blue-500/20 hover:border-blue-500/50 transition"> <img src="https://images.unsplash.com/photo-1555949963-aa79dcee981c" alt="Tutorial" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold text-white mb-3">Advanced Verse Programming</h3> <p class="text-gray-400 mb-4">Deep dive into Verse programming language with practical examples and projects.</p> <button class="w-full py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">View Tutorial</button> </div> </div> <div class="bg-gray-800/50 rounded-xl overflow-hidden border border-blue-500/20 hover:border-blue-500/50 transition"> <img src="https://images.unsplash.com/photo-1629654297299-c8506221ca97" alt="Tutorial" class="w-full h-48 object-cover"> <div class="p-6"> <h3 class="text-xl font-semibold text-white mb-3">Game Mechanics & Physics</h3> <p class="text-gray-400 mb-4">Master advanced game mechanics and physics simulation in UEFN.</p> <button class="w-full py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition">View Tutorial</button> </div> </div> </div> </div> </section> How can i blend these 2 sections with ablur