JSFiddle - React, Tailwind, and code Playground

HTML

<div id="buttons">
		<ul>
			<li style="top: 100px; left: 300px; width: 100px"><a href="http://de.wikipedia.org">Ich bin Button 1</a></li>
			<li style="top: 200px; left: 100px; width: 100px"><a href="http://duckduckgo.com">Ich bin Button 2</a></li>
			<li style="top: 10px; left: 1px; width: 100px"><a href="http://www.google.de">Ich bin Button 3</a></li>
		</ul>
	</div>

CSS

body
		{
			background-image: url("http://www.tactic.at/wp-content/gallery/herbst-im-salzkammergut-wallpaper/herbst-im-salzkammergut-wallpaper-1.jpg");
			background-size: fill:
			background-repeat: no-repeat;
		}

		div#buttons ul,
		div#buttons ul li
		{
			padding-left: 0em;
			list-style: none;
		}
	
		div#buttons ul li
		{
			position: absolute;
		}

		div#buttons ul li a
		{
			display: inline-block;
			background: #fcfcfc;
			color: #000000;
			font-size: 1em;
			border-radius: 1px;
			border-style: none;
			padding-top: 0.3em;
			padding-bottom: 0.3em;
			padding-left: 1em;
			padding-right: 1em;
			cursor: pointer;
			text-decoration: none;
			text-align: center;
			border-style: solid;
			border-width: 1px;
			border-color: #dddddd;
			outline: 0;
		}

		div#buttons ul li a:active
		{
			background: #c1c1c1;
			outline: 0;
		}