But I don't know how to create one as below, I'm stuck on how we create this sort of messagebox..

The dialog you have showed seems a "custom" dialog, that you can create extending JDialog and creating its UI using a mix of components and eventually more layout managers.
The pink area where there is the error message, can be a simple JLabel (with appropriate styles). And it can be made visible when there is the error.

All this has nothing (by itself) to do with JOptionPane. To develop a similar dialog you need knowledges on components, layout managers and also requires a bit of "logic". Nothing more.