JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div id="frame"></div>

CSS

* {
  box-sizing: content-box;
  margin: 0;
  padding: 0;
}
div#frame {
  width: 19.2cm;
  height: 13.8cm;
  border: 1px black solid;
  border-radius: 50%;
  position: relative;
}

div#frame:after {
  --margin: 2.3cm;
  content: "";
  display: block;
  margin: var(--margin);
  border: 1px black solid;
  width: calc(100% - calc(var(--margin) * 2));
  height: calc(100% - calc(var(--margin) * 2));
  border-radius: 50%;
}

#card {
  position: absolute;
  top: 65px;
  left: 102px;
  width: 13.8cm;
  height: 10.4cm;
  border: 1px red dotted;
}

/* 19.2, 13.8 */
/* 14.7, 10.4 */
/*  4.5,  3.4 */