JSFiddle - React, Tailwind, and code Playground
HTML
<div id="DIV_1">
<span id="SPAN_2">days</span>
<div id="DIV_3">
<a id="A_4">X</a>
</div>
</div>
CSS
#DIV_1 {
position:relative;
block-size: 16px;
border-end-end-radius: 6px;
border-end-start-radius: 6px;);
border-start-end-radius: 6px;
border-start-start-radius: 6px;
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: default;
display: flex;
height: 16px;
inline-size: 67.5781px;
min-block-size: auto;
min-height: auto;
min-inline-size: auto;
min-width: auto;
perspective-origin: 33.7812px 8px;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
transform-origin: 33.7891px 8px;
width: 67.5781px;
background: rgb(179, 229, 255) none repeat scroll 0% 0% / auto padding-box border-box;
border: 0px none rgb(255, 255, 255);
border-radius: 6px;
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
margin: 2px 3px 2px 0px;
outline: rgb(255, 255, 255) none 0px;
padding: 2px 22px 2px 6px;
}/*#DIV_1*/
#DIV_1:after {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: default;
display: block;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none 0px;
}/*#DIV_1:after*/
#DIV_1:before {
box-sizing: border-box;
caret-color: rgb(255, 255, 255);
color: rgb(255, 255, 255);
column-rule-color: rgb(255, 255, 255);
cursor: default;
display: block;
text-align: center;
text-decoration: none solid rgb(255, 255, 255);
text-size-adjust: 100%;
border: 0px solid rgba(0, 0, 0, 0);
font: 600 12px / 12px "Source Sans Pro", Helvetica, Arial, sans-serif;
outline: rgb(255, 255, 255) none...