JSFiddle - React, Tailwind, and code Playground

by Barry Margolin

HTML

<body id="body" class="" >
		
	<!-- header -->        
        <div id="menu" class="">
            <div class="  menu " id="top-menu"> 
                <div class="menu-central "> 
                    <ul >
                        <li> SP </li>
                    </ul>
                </div> 
            </div>  
                
            <div class="menu  " id="low-menu"> 
                <div class="" id="low-menu-scroll">
                    <div class="">
                    <ul >
                        <li>Weddings</li>
                        <li>Enquire</li>
                    </ul>
                    </div>
                </div>
            </div>      
		</div>
		<!-- topimage -->        
 			<div id="image" class="">		</div>
	<!-- header end -->        
    
    <!-- content -->        
        <div id="spacer"></div>

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


	</body>

CSS

.image01 { background:url(http://seriousphotography.co.uk/HD-Site/images/album/01/01.jpg); }
					.image02 { background:url(http://seriousphotography.co.uk/HD-Site/images/album/01/02.jpg); }
					.image03 { background:url(http://seriousphotography.co.uk/HD-Site/images/album/03.jpg); }
					.image04 { background:url(http://seriousphotography.co.uk/HD-Site/images/album/01/04.jpg); }
					.image05 { background:url(http://seriousphotography.co.uk/HD-Site/images/album/01/05.jpg); }
					.image06 { background:url(http://seriousphotography.co.uk/HD-Site/images/album/01/06.jpg); }
					.image07 { background:url(http://seriousphotography.co.uk/HD-Site/images/album/01/header/07.jpg); }
					.image08 { background:url(http://seriousphotography.co.uk/HD-Site/images/album/01/08.jpg); }
					.image09 { background:url(http://seriousphotography.co.uk/HD-Site/images/album/01/09.jpg); }
					.image10 { background:url(http://seriousphotography.co.uk/HD-Site/images/album/01/10.jpg); }
	


/** can the above be used to simplify the javascript to randomly add class image[RandomNumber] to #immage **/	




/** page css  **/	
	
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:...

JavaScript

var imgCount = 10;
var images = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10"];
var randomCount = Math.floor(Math.random() * images.length);
$("#image").addClass("image"+images[randomCount]);