Input Card - Copy this React, Tailwind Component to your project

.container { height: 100vh; width: 100%; padding: 1rem; font-size: 1.2rem; overflow: hidden; padding: 1.2rem 2rem 1.2rem 2rem; background-color: #F9F9F9; box-shadow: 0px 1px 4.8px rgba(0, 0, 0, 0.1); border-radius: 1.6rem; } .head { position: relative; height: 5.4rem; width: fit-content; max-width: 100%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-family: "Urbanist"; color: #3D3D3D; background-color: #FFFFFF; text-align: center; white-space: nowrap; margin-bottom: 0; border-top-left-radius: 1.6rem; border-top-right-radius: 0.45rem; padding: 1.8rem 2.3rem 1.2rem 2.3rem; box-shadow: -2px -2px 2.8px rgba(0, 0, 0, 0.03), -2px -2px 2.8px rgba(0, 0, 0, 0.02), -2px -2px 2.8px rgba(0, 0, 0, 0.02); } .head .square { position: absolute; right: -3rem; bottom: -1rem; width: 1.6rem; height: 1.6rem; background-color: #FFFFFF; border-radius: 0.2rem; z-index: 1000; } .head .right_angle_triangle { content: ''; position: absolute; top: 0; right: -5.4rem; width: 0; height: 0; border-bottom: 5.4rem solid #FFFFFF; border-right: 5.4rem solid transparent; clip-path: polygon(0% 0%, 45% 100%, 0% 100%, 0% 100%, 0% 0%); border-top-left-radius: 1rem; border-top-right-radius: 1rem; box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1); } .head .circle { position: absolute; right: -3.7912rem; bottom: -0.01rem; width: 1.6rem; height: 1.6rem; background-color: #F9F9F9 !important; border-radius: 50%; z-index: 1001; } .head .circle_top_right { position: absolute; top: 0rem; right: -0.3rem; width: 1.6rem; height: 1.6rem; background-color: #FFFFFF; border-radius: 50%; z-index: 1007; } .content { flex-grow: 1; height: 94.6vh; font-size: 1.2rem; color: #fff; background-color: #FFFFFF; border-top-right-radius: 1.6rem; border-bottom-right-radius: 1.6rem; border-bottom-left-radius: 1.6rem; box-shadow: 0px 1px 4.8px rgba(0, 0, 0, 0.1); } */import styles from './Wrapper.module.css'; const Wrapper = ({ dynamicName = "Default Name", children }) => { return ( <div className={styles.container}> <p className={styles.head}> {dynamicName} {/* Square, Triangle, and Circle */} <div className={styles.square}></div> <div className={styles.right_angle_triangle}></div> <div className={styles.circle}></div> <div class={styles.circle_top_right}></div> </p> <div className={styles.content}>{children}</div> </div> ); }; export default Wrapper; i want to add the box-shadow and clip path for right-angle-triangle could you give me like that this is my requirmemnt could you give me like that this is my requirment