In some parts of my code I need to use the same css for some elements, but it is repetitive and the same code is used several times, and it looks meshy in html it looks something like this.

`<p style="color: red; height: 50%;">orange</p>`

`<p style="color: red; height: 50%;">apple</p>`

It is the same code repeated several times, so I would like to know the best way to implement a css, which is easier and more understandable.

```
const ItemPage = () => {
    const item = ({name}) => <p style={{
        color: 'red',
        height: '50%'
    }}>{name}</p>;

    return(
        <div>
            <item name='orange'/>
            <item name='apple'/>
        </div>
    )
}

```