JSFiddle - React, Tailwind, and code Playground

by neilheinrich

HTML

<div id="outer">
    <div id="header"></div>


    <div class="wrapper">
     <img class="one" src="images/music.jpg" alt="My Music" title="Music" />
     <img class="two" src="images/photos.jpg" alt="My Photography" title="Photography" />
     <img class="three" src="images/about.jpg" alt="About me" title="About" />

    </div>

    <div id="footer"></div>
</div>

CSS

body {
background-image:url('images/bgcolour.jpg');
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

div#outer {
width: 100%;
background-color:#000000;
}

div#header {
background-position: center top;
height: 30px;   
margin: 0px;
text-align: center;
}

.wrapper {
padding:10px;  
position:relative;
min-width: 750px;
}

img {
width:250px;
height:250px;   
display:block;
position: absolute;
}

.one {
  left: 10px;
}
.two {
  left: 50%;
  margin-left: -125px;
}
.three {
  right: 10px;
}





div#main {
margin-left: 30%;
margin-top: 1px;
padding: 10px;

}


div#footer {

background-image:url('images/sig.jpg');
background-repeat: no-repeat;
background-position: right bottom;
height: 50px;   
margin: 0px;
text-align: center;


}