<div id="root"></div>

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
root.render(
  <div style={{position: "relative",  height: "300px", width: "300px"}}>
    <img style={{ objectFit: "cover", width: "100%", height: "100%", objectPosition: "top" }}  src="https://images.pexels.com/photos/10390238/pexels-photo-10390238.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1" />
     <div  style={{position: "absolute", top: "0px", bottom: "0px", left: "0px", right: "0px",  display: "flex", flexDirection: "column", padding: "1rem"}}>    
    <h1 style={{marginTop:"auto", fontSize: "1.5rem", marginBottom: "0.8rem", color: "white", textShadow: "1px 1px 1px #222", fontWeight: "800" }}>I am a title a title a title I am a title a title a title</h1>
    <h3 style={{ fontSize: "1rem",  color: "white", textShadow: "1px 1px 1px #222", marginTop: "0px", marginBottom: "0px" }}>Автор: Admin</h3>    
  </div>
  </div>
 
  

);