JSFiddle - React, Tailwind, and code Playground

by al nmeri

HTML

<!DOCTYPE HTML>
<body>
    <div id="container">	<a href="index.html">
		<img class="logo" src="logo.png" title="HOME" alt="logo"> </a>

        <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 id="slide">
            <img src="slide.png" alt=slide>
        </div>
        <div id=circle>
            <img src="circle.png" alt=circle>
        </div>
        <div class="coupon">
            <img src="meet.png" alt=coupon>
        </div>
        <div class="coupon1">
            <img src="quote.png" alt=coupon1>
        </div>
        <div class="coupon2">
            <img src="brief.png" alt="coupon2">
        </div>
    </div>

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: 115px;
        top: 5px;
        width: 16%;
        float: left;
        height: 3%;
    }
    a {
        display: block;
    }
    ul {
        list-style-type: none;
    }
    #slide {
        position: relative;
        top: 10px;
        left: 100px;
        height : 5%;
        width: 15%;
    }
    #circle {
        position: relative;
        top: 80px;
        left: 580px;
        height : 3%;
        width: 17%;
    }
    .coupon, .coupon1, .coupon2 {
        position: relative;
        top: 90px;
        height : 10%;
        width: 11%;
    }
    .coupon {
        left: 350px;
    }
    .coupon1 {
        left: 500px;
    }
    .coupon2 {
        left: 630px;
    }