JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="container">	<a href="index.html">
<div class="logo">
		<img  src="logo.png" title=HOME alt=logo> </a>
</div>
<div>
        <ul>
            <li><a href="index.html">
			<img class=nav src="nav1.png" alt=nav></a>
            </li>
            <li><a href="http://google.com">
			<img class=nav src="nav2.png" alt=nav></a>
            </li>
            <li><a href="software-and-web-development-spikes-interactive.html">
			<img class=nav src="nav3.png" alt=nav></a>
            </li>
            <li><a href="http://waftr.com">
			<img class=nav src="nav4.png" alt=nav></a>
            </li>
            <li><a href=http://coffecup.com>
			<img class=nav src="nav5.png" alt=nav></a>
            </li>
        </ul>

 </div>
      <div id="slide">
            <img src="slide.png" alt=slide>
        </div>
        <div id=circle>
            <img src="circle.png" alt=circle>
        </div>
<div>
        <img class="coupon" src="meet.png" alt=coupon>
        <img class="coupon1" src="quote.png" alt=coupon1>
        <img class="coupon2" src="brief.png" alt=coupon2>
</div>
    </div>
</body>

CSS

body {
    background-image: url("bodybg.png");
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat:no-repeat;
}
#container {
    background-image: url("containerbg.png");
    background-size: 100% 100%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.logo {
    position: relative;
    top: 30px;
    left: 45px;
    height : 20%;
    width: 12%;
}
.nav {
    position: relative;
    left: 9%;
    top: 5px;
    width: 16%;
    float: left;
    height: 3%;
}
a {
    display: block;
}
ul {
    list-style-type: none;
}
#slide {
    position: relative;
    top: 10%;
    left: 18%;
    height : 15%;
    width: 15%;
}
#circle {
    position: relative;
    top: 20%;
    left: 40%;
    height : 3%;
    width: 17%;
}
.coupon, .coupon1, .coupon2 {
    position: relative;
    top: 70% height : 10%;
    width: 11%;
}
.coupon {
    left: 16%;
    float: none;
}
.coupon1 {
    left: 50%;
}
.coupon2 {
    left: 70%;
}