Blurred Section Interface - Copy this Html, Tailwind Component to your project
How can i blend these 2 sections with a blur? <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>
