What would be the best way to achieve this design in CSS?

[![enter image description here](https://i.stack.imgur.com/mKoWn.png)](https://i.stack.imgur.com/mKoWn.png)

and this:
[![enter image description here](https://i.stack.imgur.com/SsqW8.png)](https://i.stack.imgur.com/SsqW8.png)

Thanks for your help!