JSFiddle - React, Tailwind, and code Playground

by Felis Catus

HTML

<svg viewBox="0 0 100 25">
    <path class="border" d="M0,0 H100 V25 H0 z"/>
    <path class="nice" d="M0,12.5 h10 m5,0 h10 m5,0 h10"/>
</svg>
<div>Hello, world</div>

CSS

.nice {
    stroke: red;
    stroke-width: 24.5;
    stroke-linecap: butt;
}
.border {
    fill: transparent;
    stroke: black;
    stroke-width: .5;
    stroke-dasharray: 7,5;
}
svg {
    overflow: visible;
}
div {
    position: absolute;
    font-size: 20px;
    font-family: 'Arial', sans-serif;
    color: red;
    top: 30px;
    text-shadow: -1px 0 1px black,-1px 1px 1px black,0 1px 1px black,
        1px 1px 1px black, 1px 0 1px black, 1px -1px 1px black,
        0 -1px 1px black, -1px -1px 1px black;
}