JSFiddle - React, Tailwind, and code Playground

by iamanubhavsaini

HTML

<div id="heart1"></div>
    <div id="heart2"></div>

CSS

body{
        background-color: #777;
    }
    #heart1{
        margin: 30px 0;
        height: 60px;
        width: 60px;
        background-color: black;
        -webkit-transform: rotate(45deg);
        box-shadow: 0 0 10px 0 black;
    }
    #heart1::before{
        display: block;
        content: "";
        width:0;
        border: 30px solid black;
        border-right: none;
        border-radius: 30px 0 0 30px ;
        position: relative;
        top: 0px;
        left: -29px;
        box-shadow: 0 0 10px 0 black;
    }
    #heart1::after{
        display: block;
        content: "";
        width:0;
        border: 30px solid black;
        border-bottom: none;
        border-radius: 30px 30px 0 0;
        position: relative;
        top: -89px;
        left: 0px;
        box-shadow: 0 0 10px 0 black;
    }
    
    #heart2{
        margin: 30px 0;
        height: 120px;
        width: 80px;
        background-color: red;
        border-radius: 40px 40px  0 0;
        -webkit-transform: rotate(45deg);
        box-shadow: 0 0 10px 0 red;
    }
    
    #heart2::after{
        display: block;
        content: "";
        height: 120px;
        width: 80px;
        background-color: red;
        border-radius: 40px 40px  0 0;
        -webkit-transform: rotate(-90deg);
        position: relative; 
        top: 20px;
        left:-20px;
        box-shadow: 0 0 10px 0 red;
    }