Why Choose Section - Copy this React, Tailwind Component to your project

import React from "react"; import { FaCube, FaCogs, FaHospital, FaIndustry, FaGraduationCap, FaRocket } from "react-icons/fa"; const ThreeDPrintingApplications = () => { const applications = [ { icon: <FaCube className="text-4xl text-blue-400" />, title: "Prototyping", description: "Rapid prototyping for product development and testing." }, { icon: <FaCogs className="text-4xl text-blue-400" />, title: "Manufacturing", description: "Custom parts and tooling for industrial applications." }, { icon: <FaHospital className="text-4xl text-blue-400" />, title: "Medical", description: "Customized prosthetics and medical devices." }, { icon: <FaIndustry className="text-4xl text-blue-400" />, title: "Aerospace", description: "Lightweight components for aircraft and spacecraft." }, { icon: <FaGraduationCap className="text-4xl text-blue-400" />, title: "Education", description: "Learning tools and visual aids for students." }, { icon: <FaRocket className="text-4xl text-blue-400" />, title: "Innovation", description: "Breakthrough solutions for next-gen technologies." } ]; return ( <div className="min-h-screen bg-gradient-to-br from-blue-900 to-purple-900 relative"> {/* Background Image */} <div className="absolute inset-0 z-0 opacity-20 bg-cover bg-center" style={{ backgroundImage: "url('https://images.unsplash.com/photo-1516192518150-0d8fee5425e3?ixlib=rb-4.0.3&auto=format&fit=crop&w=1350&q=80')" }} ></div> {/* Content */} <div className="relative z-10 container mx-auto px-4 py-16"> {/* Header Section */} <div className="text-center mb-16"> <h1 className="text-4xl md:text-6xl font-bold text-white mb-6 tracking-tight drop-shadow-lg"> 3D Printing Applications </h1> <p className="text-xl text-gray-300 mb-8 max-w-2xl mx-auto"> Explore the limitless potential of additive manufacturing across various industries. </p> <button className="bg-gradient-to-r from-blue-500 to-purple-600 text-white px-8 py-3 rounded-lg font-semibold transform transition-all duration-300 hover:scale-105 hover:shadow-xl focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50" aria-label="Learn more about 3D printing applications" > Learn More </button> </div> {/* Applications Grid */} <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> {applications.map((app, index) => ( <div key={index} className="bg-white bg-opacity-10 backdrop-blur-lg rounded-xl p-6 transform transition-all duration-300 hover:scale-105 hover:shadow-2xl hover:bg-opacity-20" role="article" aria-label={`${app.title} application`} > <div className="flex flex-col items-start"> {app.icon} <h3 className="text-xl font-bold text-white mt-4">{app.title}</h3> <p className="text-gray-300 mt-2">{app.description}</p> </div> </div> ))} </div> </div> </div> ); }; export default ThreeDPrintingApplications; make backgorund light color