JSFiddle - React, Tailwind, and code Playground

by aanita0309

HTML

<div class="usFlag" />

CSS

:root{
  --starCount: 35px 0 0 #f3f3f3, 70px 0 0 #f3f3f3;
}
.usFlag{
  
  width:500px;
  height:20px;
  background:red;
  display:block;
  position:absolute;
  box-shadow: 0 20px 0 white, 0 40px 0 red;
}

.usFlag:before{
  content: "";
  width:200px;
  height:140px;
  background:blue;
  display:block;
  position:absolute;
}

.usFlag:after{
  content: "\2605";
  width:500px;
  color:white;
  font-size:14px;
  display:block;
  position:absolute;
  text-shadow: var(--starCount);
}