JSFiddle - React, Tailwind, and code Playground

by Abhishek Hingu

HTML

<div>
<div class="card red">

</div>
</div>
<div>
<div class="card green">

</div>
</div>
<div>
<div class="rating">
  <span></span>
  <span></span>
  <span></span>
</div>
<div class="card">

</div>
</div>

CSS

div{
  width:200px;
  height:200px;
  position:relative;
}
.card{
  width:100%;
  height:100%;
  background:white;
  border:1px solid gray;
}
.rating {
    position: absolute;
    width: 35px;
    height: 20px;
    top: 0px;
    right: 2px;
    /* border: 1px solid red; */
    /* background-color: red; */
    z-index: 11;
}
.rating span {
    display: inline-flex;
    padding: 2px 2px;
    right: 2px;
    background-color: green;
    justify-content: end;
    width: 5px;
    height: 5px;
    border-radius: 50%;
}
.card.red::before{
    content: '';
    position:absolute;
    width: 5px;
    height: 5px;
    top: 0;
    right:2px;
    background: red;
    display: flex;
    padding: 2px 2px;
    border-radius: 50%;
    margin-top: 2px;
    margin-left: 2px;
}
.card.green::before{
    content: '';
    position:absolute;
    width: 5px;
    height: 5px;
    top: 0;
    right:2px;
    background: green;
    display: flex;
    padding: 2px 2px;
    border-radius: 50%;
    margin-top: 2px;
    margin-left: 2px;
}