JSFiddle - React, Tailwind, and code Playground

by Kamlesh Kushwaha

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="description col-lg-12">
    <div class="heart col-lg-3">
        <p>11</p>
    </div>
</div>
<div class="description col-lg-12">
    <div class="heart col-lg-3">
        <p>3</p>
    </div>
</div>

CSS

.description {
    position:relative;
    height:100px;
}
.heart {
    z-index:-500;
    position: absolute;
    top:70%;
    right:20%;
    width: 30px;
    height: 30px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #BF4139;
}
.heart:before, .heart:after {
    position: absolute;
    width: 30px;
    height: 30px;
    content:'';
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    background-color: #BF4139;
}
.heart:before {
    bottom: 0px;
    left: -15px;
}
.heart:after {
    top: -15px;
    right: 0px;
}
.heart p {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    position:absolute;
    z-index: 800;
    left:3px;
    top:0px;
    font-size:18px;
    color:white;
    width:20px;
    text-align:center;
}