Adding style in jsx react

adding style in jsx react
dynamic data in jsx react
data passing in react

                                                    **SUBSCRIPTION.JS**

                                         import './subscription.css';
   function subscription (){
    let date = (new date('2022','06','14'));
    let Title ="monthly subscription";
    let Amount = '125.60';  
       
return(
    <div className='subscription'>
        <div > {date.toISOstring()}</div>
        <h2 className='subscription-title'>{Title}</h2>
        <div className='subscription-price'>{ Amount}</div>
    </div>
    
)

}
export default subscription;

                          SUBSCRIPTION.CSS

subscription{

display: flex;

justify-content:  space-between;

align-items: center;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

padding: 0.5rem;

margin: 1rem;

border-radius: 12px;

background-color: #4b4b44;

}

.subcription title{

 display: flex;

 flex-direction: column;

 gap: 1rem;

 align-items: flex-end;

 flex-flow: column-reverse;

 justify-content: flex-start;

 flex: 1;

}

.subscription h2 {

 color: #3a3a3a;

 font-size: 1rem;

 flex: 1;

 margin: 0rem;

 color:  white;

}

.subcription-price{

   font-size: 1rem;

   font-weight: bold;

   color: white;

   background-color: #4000 5d;

   border: 1px solid white;

   padding: 00.5rem;

   border-radius: 12 px;

}