JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div class="heart"><img src="http://f.cl.ly/items/1b2I3W1d2234251W2J0p/logo.png"></div>

CSS

body {
 background: #000;   
}
.heart {
 display: block;
 position: absolute;
 width: 50px;
 height: 50px;
 -webkit-transform: rotate(45deg);    
  background: red;
}
.heart:before, 
.heart:after {
 content: '';
 display: block;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background: red;     
 position: absolute;
    z-index:-1;
}
.heart:before {
 top: 0;
 left: -22px;
}
.heart:after {
 top: -22px;
 right: 0;
}
.heart img {
    margin: 6px 0 0 6px;
 width: 25px;  
-webkit-transform: rotate(-45deg);    
}

JavaScript

var heart = $('.heart'),
    body = $('body'),
    width = parseInt($(document).width()),
    height = parseInt($(document).height()),
    rand = function(too){
        return Math.floor(Math.random() * too) + 1;
    };
for(var x=0;x<600;x++){
    console.log(rand(0,height));
    var heart = heart.clone();
    heart.css({ top: rand(height) + 'px', left: rand(width) + 'px', opacity: Math.random()}).appendTo(body);
}