JSFiddle - React, Tailwind, and code Playground

by aanita0309

HTML

<div class="usFlag">

</div>

CSS

:root{
  --starCount: 35px 0 0 white, 70px 0 0 #f3f3f3;
}

.usFlag{
	left: -250px;
	top: 10%;
	margin-left: 50%;
	display: block;
	position: absolute;
  width: 500px;
	height: 20px;
	background: #cc0000;
	box-shadow: 0 20px 0 #f3f3f3, 0 40px 0 #cc0000, 0 60px 0 #f3f3f3, 0 80px 0 #cc0000, 0 100px 0 #f3f3f3, 0 120px 0 #cc0000, 0 140px 0 #f3f3f3, 0 160px 0 #cc0000, 0 180px 0 #f3f3f3, 0 200px 0 #cc0000, 0 220px 0 #f3f3f3, 0 240px 0 #cc0000;
}
 
  
.usFlag:before{
  content:'';
   width:200px;
  height:140px;
  background:blue;
    display:block;
  position:absolute;
  
}
.usFlag:after{
  content: '\2605';
  width:500px;
  font:14px;
  color:white;
   display:block;
  position:absolute;
  
  text-shadow: var(--starCount);
  
}