JSFiddle - React, Tailwind, and code Playground

by parkji

HTML

<div class="infinity"></div>

CSS

.infinity {
    position: relative;
    width: 212px;
    height: 100px;
}

.infinity:before,
.infinity:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;    
    border: 20px solid #fc2e5a;
    -moz-border-radius: 50px 50px 0 50px;
         border-radius: 50px 50px 30px 50px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}
.infinity:before {
    width: 45px;
    height: 45px;
    top: 8px;
    left: 20px;
}

.infinity:after {
    left: auto;
    right: 0;
    -moz-border-radius: 50px 50px 50px 0;
         border-radius: 50px 50px 50px 0;
    -webkit-transform:rotate(45deg);
       -moz-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
         -o-transform:rotate(45deg);
            transform:rotate(45deg);
}