JSFiddle - React, Tailwind, and code Playground

by Nonamenonamevi4

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flag of Japan</title>
</head>
<body>
<div class="square">
  <div class="circle"></div>
</div>
</body>
</html>

CSS

.square {
  width: 300px;
  height: 200px;
  background-color: white;
  border: 2px solid #cccccc;
  position: relative;
}

.circle {
  width: 120px;
  height: 120px;
  background-color: #bc002d;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}