JSFiddle - React, Tailwind, and code Playground

HTML

<title>E-nology</title>
  <link rel="stylesheet" href="sheet.css">

</head>  
<body>
<a href="#news1"><img src="Pictures/control.png" id="icon"></a>
<p></p>
<a href="#news2"><img src="Pictures/desktop.png" id="desk"></a>

<p id="news1"><img src="Pictures/chat.png" id="chat"/>
<img src="Pictures/outlook.png" id="outlook"/></p>
<p id="news2"><img src="Pictures/wine.png" id="outlook2"/></p>
</div>
</body>

CSS

body
{
	background-image:url("Pictures/background.jpg");

	background-image: no-repeat;
	position: relative;
}

#icon
{
		margin-left:35%;
		margin-top:25%;
		position: fixed;

}

#desk
{
	margin-left:35%;
	margin-top: 18%;
	position: fixed;
}
#chat
{
	top: -400px;
	margin-left:50%;
	position: fixed;
}
#outlook
{
	top: -400px;
	margin-left:50%;
	position: fixed;

}
#outlook2
{
	top: -400px;
	margin-left:10%;
	position: fixed;
}


:target
{
		-webkit-animation: soBounceBitch 1.6s linear;

}

@-webkit-keyframes soBounceBitch {

	from { -webkit-transform:translateY( 1200px); }
        46%  { -webkit-transform:translateY( 1110px); }
	48%  { -webkit-transform:translateY( 1020px); }
	50%  { -webkit-transform:translateY( 1000px); }
	52%  { -webkit-transform:translateY( 940px); }
	60% { -webkit-transform:translateY ( 900px ) ; }
	64% { -webkit-transform:translateY ( 880px ) ; }
	70% { -webkit-transform:translateY ( 840px ) ; }
	74% { -webkit-transform:translateY ( 790px ) ; }
	80% { -webkit-transform:translateY ( 760px ) ; }
	100% { -webkit-transform:translateY ( 760px ) ; }
	to   { -webkit-transform:translateY(  700px  ); }

}