JSFiddle - React, Tailwind, and code Playground

by pleinx

HTML

<div class="illustration">
			<div class="i-medium"></div>
		</div>

CSS

body {
				background: white;
				color: #444;
				font-family: "PT Sans", "Open Sans", "Segoe UI", Helvetica, Arial, sans-serif;
				font-weight: lighter;
			}
			h1, p {
				text-align: center;
				font-weight: lighter;
			}
			.illustration {
				position: relative;
				width: 716px;
				height: 413px;
				background : url("https://www.creativejuiz.fr/blog/doc/snow-animation-css3/illustration.jpg") no-repeat top center;
				margin : 0 auto;
			}
			.i-large,
			.i-medium,
			.i-small{
				position : absolute;
				top : 0; left :0; bottom: 0; right: 0;
			}
			.i-large {
				background:url(https://www.creativejuiz.fr/blog/doc/snow-animation-css3/particules_large.png) repeat 0px 0px;
				-webkit-animation : dropFlowParticles 2s linear infinite;
				     -o-animation : dropFlowParticles 2s linear infinite;
						animation : dropFlowParticles 2s linear infinite;
			}
			.i-medium {
				background:url(https://www.creativejuiz.fr/blog/doc/snow-animation-css3/particules_medium.png) repeat 0px 0px;
				-webkit-animation : dropFlowParticles 12s linear infinite;
				     -o-animation : dropFlowParticles 12s linear infinite;
						animation : dropFlowParticles 12s linear infinite;
			}
			.i-small {
				background:url(https://www.creativejuiz.fr/blog/doc/snow-animation-css3/particules_small.png) repeat 0px 0px;
				-webkit-animation : dropFlowParticles 27s linear infinite;
				     -o-animation : dropFlowParticles 27s linear infinite;
						animation : dropFlowParticles 27s linear infinite;
			}
			@-webkit-keyframes dropFlowParticles {
				from { background-position: 0 0; }
				to { background-position: 0 413px; }
			}
			@keyframes dropFlowParticles {
				from { background-position: 0 0; }
				to { background-position: 0 413px; }
			}