News Block - Copy this React, Tailwind Component to your project

Create block like the following code <section className="flex items-center justify-center flex-none flex-col flex-nowrap gap-2 h-min w-full pt-8 pb-0 relative z-30 bg-white px-4 py-8"> <div className="flex justify-between items-center mb-6"> <h2 className="text-2xl font-bold text-gray-800">HIGHLIGHT NEWS</h2> <a href="#" className="text-red-600 hover:underline text-sm font-medium" > VIEW ALL HIGHLIGHT NEWS </a> </div> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> {newsItems.map((item, index) => ( <article key={index} className="bg-white rounded-lg overflow-hidden shadow-md" > <div className="relative"> <img src={item.image} alt={item.title} className="w-full h-48 object-cover" /> <div className="absolute top-2 left-2 bg-blue-500 text-white p-1 rounded"> <Zap size={16} /> </div> {item.isPremium && ( <div className="absolute bottom-2 left-2 bg-yellow-500 text-white text-xs font-bold px-2 py-1 rounded"> PREMIUM </div> )} </div> <div className="p-4"> <p className="text-red-600 text-sm font-medium mb-2"> {item.category} </p> <h3 className="text-gray-800 font-bold text-lg mb-2"> <a href="#" className="hover:underline"> {item.title} </a> </h3> </div> </article> ))} </div> </section>