JSFiddle - React, Tailwind, and code Playground

by S1l3

HTML

<div id="heart">
    
</div>

CSS

#heart { 
    margin:30px;
    position: relative; 
    width: 100px; 
    height: 90px; } 
#heart:before, #heart:after{ 
    position: absolute; 
    content: ""; 
    left: 50px; 
    top: 0; 
    width: 50px; 
    height: 80px; 
    background: transparent; 
    border:1px solid #900;
    border-bottom:none;
   

    -moz-border-radius: 5px 50px 0 0; 
    border-radius: 50px 50px 0 0; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; } 
#heart:after { 
   
    left: 0; 
    -moz-border-left-colors:rgba(0,0,0,1) rgba(0,0,0,0);
    
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    -ms-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    transform: rotate(45deg); 
    -webkit-transform-origin: 100% 100%; 
    -moz-transform-origin: 100% 100%; 
    -ms-transform-origin: 100% 100%; 
    -o-transform-origin: 100% 100%; 
    transform-origin :100% 100%; } 
#heart:before{
     -moz-border-right-colors:#900 rgba(0,0,0,1) #a18a66 #900 #900 #900 #900 #900;
}