Feature Rich Component - Copy this React, Tailwind Component to your project

<div className="flex"> {/* Main Content Column */} {/* side bar */} <div className="lg:w [25%] md:w [40%] p 2 sm:block hidden sm:w [40%]"> {/* new content */} <button type="button" // onClick={feedContent} // Attach the onClick handler here className="w full text white bg [#10806A] hover:bg [#10806A] focus:outline none focus:ring 4 focus:ring green 300 font medium rounded full text sm px 4 py 2 text center m 1" > ព័ត៌មានទូទៅ </button> <div className="w full flex p 3 bg gray 100 m 1 rounded lg"> <div> <div className="rounded lg bg white"> <img src={logo} alt="news" className="p 3 rounded lg" /> </div> {/* description, date and time */} <div> <p className="p 3"> ការផ្លាស់ប្តូរទីតាំងថ្មីរបស់​(ស.ស.ភ.) ទៅ​ OCIC </p> <div className="flex flex col md:flex row justify between"> <p className="p 3 text sm">Date: 15/07/2024</p> <p className="p 3 text sm">Time: 9:45am</p> </div> </div> {/* button */} <button type="button" className="p 1 w full text white bg [#10806A] hover:bg [#10806A] focus:outline none focus:ring 4 focus:ring green 300 font medium rounded full text sm text center" > សេចក្តីប្រកាសផ្សេងៗ </button> </div> </div> {/* video card */} <button type="button" // onClick={videoContent} className="w full text white bg [#10806A] hover:bg [#10806A] focus:outline none focus:ring 4 focus:ring green 300 font medium rounded full text sm px 4 py 2 text center m 1" > វីដេអូ </button> <div className="w full flex p 3 bg gray 100 m 1 rounded lg"> <div> <div className="rounded lg bg white"> <img src={logo} alt="news" className="p 3 rounded lg" /> </div> <div> <p className="p 3"> ការផ្លាស់ប្តូរទីតាំងថ្មីរបស់​(ស.ស.ភ.) ទៅ​ OCIC </p> <div className="flex flex col md:flex row justify between"> <p className="p 3 text sm">Date: 15/07/2024</p> <p className="p 3 text sm">Time: 9:45am</p> </div> </div> <div> <button type="button" className="p 1 w full text white bg [#10806A] hover:bg [#10806A] focus:outline none focus:ring 4 focus:ring green 300 font medium rounded full text sm text center" > វីដេអូផ្សេងៗ </button> </div> </div> </div> </div> <div className="flex p 2"> <div className="flex col"> <div className="p 3 grid grid cols 1 sm:grid cols 1 md:grid cols 2 lg:grid cols 1"> <div className="p 2"> <a href="#" className="block py 1 px 2 text gray 900 rounded hover:bg gray 100 md:hover:bg transparent md:border 0 md:hover:text blue 700 md:p 0" > ទំព័រដើម </a> </div> {newContent.slice(0, 6).map((item) => ( <div key={item.id} className="flex bg white shadow md rounded lg p 3 m 1 justify between" > <img src={item.image} alt="News" className="w 48 h 48 object contain rounded lg mb 3 mx auto" /> {/* <h2 className="text lg font bold mb 2">News Item {item.id}</h2> */} <div className="p 2"> <h1 className="text 2xl">{item.title}</h1> <p className="text md text gray 600 mb 2 line clamp 3 mt 3"> {item.description} </p> <div className="flex mt 3 justify between"> <div className="flex"> <img className="h 12 w 12" src={logo}></img> <p className="ms 3"> សហគ្រាសគ្រប់គ្រងសំរាម <br /> សំណល់រឹងទីប្រជុំជន រាជធានីភ្នំពេញ </p> </div> <p>{item.dateTime}</p> </div> </div> </div> ))} </div> </div> <div className="lg:w [35%] p 2 sm:block hidden"></div> </div> </div>