JSFiddle - React, Tailwind, and code Playground

HTML

<body id="body" class="" >
		
	<!-- header -->        
        <div id="menu" class="">
            <div class="  menu " id="top-menu"> 
                <div class="menu-central "> 
                    <ul >
                        <li> SP </li>
                        <li> Weddings </li>
                        <li> Portraits </li>
                        <li id="events"> Events </li>
                        <li> Events </li>
                        <li> About </li>
                        <li><span>Client </span> <span>Images</span></li>
                        <li> <i class="fa fa-search"></i>  </li>
                    </ul>
                </div> 
            </div>  
                
            <div class="menu  " id="low-menu"> 
                <div class="" id="low-menu-scroll">
                    <div class="">
                    <ul >
                        <li>Weddings</li>
                        <li><span>Your</span> <span>Album</span></li>
                        <li><span>Your</span> <span>Day</span></li>
                        <li>Portfolio</li>
                        <li>Details</li>
                        <li>Enquire</li>
                    </ul>
                    </div>
                </div>
            </div>      
		</div>
		<!-- topimage -->        
 			<div id="image" class="">		</div>
		<!-- arrow -->        
 			<div id="scroll" class="">	<div> </div>		</div>
	<!-- header end -->        
    
    <!-- content -->        
        <div id="spacer"></div>

        <div id="sp"></div>

        <div id="content">
        

           <div class="segment" id="albums">
                <div><img src="images/covers.png" width="4074" height="2121" alt=""/></div>
                <div><h1>The H1 albums are amazing</h1>
                abced adsfd fd daf f asd
                <h2>we H3 use graphi</h2>
                abced adsfd fd daf f asd
                <h3>we H3 use graphi</h3>
                abced adsfd fd daf f asd
                ...

CSS

/** All Pages  **/	
	
html { font-size: 10px; } 

		/** Body  **/	
			@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,300italic,400italic);
			body {font-family: 'Lato', sans-serif; font-weight: 300; margin:0px; }
			
		/** Header  **/	

			.menu  { 	-webkit-transition: 	0.5s ease-in-out;
						-moz-transition:	0.5s ease-in-out;
						-o-transition: 		0.5s ease-in-out;
						transition: 		0.5s ease-in-out; }
			.menu 		{ width: 100%; 	left:0px; 		position: fixed; z-index:100;}
				.menu-central { width:85%; max-width:1100px; margin:auto;   margin-top:0;   }
			#top-menu	{ color:rgba(255,255,255,1); height:40px; background: rgba(30,30,30,0.9); top:0px; text-align:center; font-weight: 400; }
				#top-menu div {}
				#top-menu div ul { top:0; position:absolute; width:85%; max-width:1100px; margin:auto; padding:0px; font-size:20px;  text-align:center; list-style: none;}
					#top-menu div ul li	{ float:left; width:calc(90% / 6 - 1px); background: rgba(255,255,255,0.0); margin-right:1px; padding-top:5px; height:35px;}
					#top-menu div ul li:first-child	{  width:calc(5% - 2px); text-align:left; }
					#top-menu div ul li:last-child	{ width:calc(5%); text-align:right; margin-right:0px; }
			#low-menu	{        top:40px; font-weight: 400; }
				#low-menu-scroll  {   background:rgba(255,255,255,0.00); height:50px;border-bottom: 1px solid rgba(150,150,150,1.00); text-shadow:	1px 1px 10px white, -1px -1px 10px white, 
																																					-1px 1px 10px white, 1px -1px 10px white; } 
				#low-menu-scroll  ul li:first-child { text-shadow: -1px 1px 10px white, -1px 1px 10px white !important; } 
			 #low-menu-scroll   { width: 85%; max-width: 1100px; margin:auto; 
					-webkit-transition:  	background-color 0.5s ease-in-out;
						-moz-transition:	0.5s ease-in-out;
						-o-transition: 		0.5s ease-in-out;
						transition: 		background-color 0.5s  ease-in-out; }
			 #low-menu-scroll div { width:100%; } 
				#low-menu  ul 	{ top:0;...

JavaScript

var imgCount = 10;
        var dir = 'http://seriousphotography.co.uk/HD-Site/images/album/01/';
        var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
        var images = new Array
                images[1] = "01",
                images[2] = "02",
                images[3] = "03",
                images[4] = "04",
                images[5] = "05",
                images[6] = "06",
                images[7] = "07",
                images[8] = "08",
                images[9] = "09",
                images[10] = "10"
        document.getElementById("image").style.backgroundImage = "url(" + dir + images[randomCount] + ".jpg" +  ")";