JSFiddle - React, Tailwind, and code Playground
by ZeNz0r
HTML
<div class="star"></div>
<div class="circle">Ribbon Rosette</div>
CSS
.star {
left: 100px;
top: 100px;
height: 80px;
width: 80px;
background: silver;
position: absolute;
text-align:left;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.star:before {
height: 80px;
width: 80px;
background: silver;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.star:after {
padding-top: 10px;
text-align: center;
vertical-align: middle;
height: 70px;
width: 80px;
background: silver;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.circle {
font: 400 18px/1.1 "freight-sans-pro",sans-serif;
color: #000000;
left: 95px;
top: 95px;
position: absolute;
text-align:center;
padding-top: 25px;
width: 90px;
height: 65px;
background: silver;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
background:...