如何在椭圆框中为该数组设置样式-CSS

Question

我正在使用此演示工作区-Demo

这里有一个数组。

var a = [{"id":"firstName","value":["Sam3","Sam5"]},{"id":"lastName","value":["Jones4","Jones5"]}] 

这是一个基于React的项目。我想将此显示为页面中的样式（而不是数组）。我想像这张图片一样显示。

这是椭圆形，不是任何不规则形状。

还有一个十字按钮和数组。

<div>
<div>id: val0,val1 (and a cross button to remove this filter)</div>
<div>id: val0,val1 (and a cross button to remove this filter)</div> .... so on
</div>

如何以这种椭圆形显示此数组

请回答我的Demo小提琴

名字：Sam2，Sam3将在一个椭圆框中，而名字：Jones3，Jones5将在另一个框中。可能有几十个盒子，我现在正在处理两个盒子。

盒子会像这样

在椭圆框的空白区域中，文本将显示，然后是十字按钮/图标