JSFiddle - React, Tailwind, and code Playground

by Md. Atiquzzaman Soikat

HTML

<div class="heart">
  <img src="http://placekitten.com/240/240">
  <span class="left" ></span>
  <span class="right"></span>
</div>

CSS

.heart {
	    width: 60em;
	    height: 20em;
	    position: relative;
	    /* overflow: hidden; */
	}
	.heart span {

	  display: block;
	  position: absolute;
	  width: 14em;
	  height: 20em;
	  background-color: #c50011;
	  -webkit-border-top-left-radius: 10em;
	  -webkit-border-top-right-radius: 10em;
	  -moz-border-radius-topleft: 10em;
	  -moz-border-radius-topright: 10em;
	  border-top-left-radius: 10em;
	  border-top-right-radius: 10em;
	  -webkit-animation-duration: 2s;
	  -webkit-animation-iteration-count: infinite;
	  -webkit-animation-timing-function: ease-in-out;
	  -webkit-animation-direction: alternate;
	}
	.heart span.left {
		 -o-transform:rotate(-45deg);
	  -webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
			left: 2.85em;
			bottom: 2.2em;
	  -webkit-border-bottom-right-radius: 10em;
	  -webkit-border-bottom-left-radius: 0;
	  -moz-border-radius-topleft: 10em;
	  -moz-border-radius-bottomleft: 0;
			border-bottom-right-radius: 10em;
			border-bottom-left-radius: 0;
	  -webkit-animation-name: shadows-side;
	}
	.heart span.right {
		 -o-transform:rotate(45deg);
	  -webkit-transform:rotate(45deg);
	   -moz-transform:rotate(45deg);
	  -webkit-border-bottom-right-radius: 0;
	  -webkit-border-bottom-left-radius: 10em;
	   -moz-border-radius-bottomright: 0;
	   -moz-border-radius-bottomleft: 10em;
			border-bottom-right-radius: 0;
			border-bottom-left-radius: 10em;
			left: 7.1em;
			bottom: 2.2em;
	    -webkit-animation-name: shadows;
	}
	.heart {
	  -webkit-animation-name: beat;
	  -webkit-animation-duration: 2s;
	  -webkit-animation-iteration-count: infinite;
	  -webkit-animation-timing-function: ease-in-out;
	  -webkit-animation-direction: alternate;
	  color:red;
	}
	 #colophon {
	  color:#e1e1e1;
	  position:fixed;
	  bottom:5%;
	  right: 5%;
	}
	#colophon a{
	  text-decoration: none;
	  color: inherit;
	}
	@-webkit-keyframes shadows {
	 from {
	    box-shadow: .4875em .1875em .1875em rgba(90, 90, 90, .5);
	      }
	 to {
	  ...