JSFiddle - React, Tailwind, and code Playground

by hslincoln

HTML

<div class="kitchencontainer">
	<div class="labels">
		<div id="label1" class="label" href="#">Go Chef
			<span />
		</div>
		<div id="label2" class="label" href="#">Mop
			<span />
		</div>
		<div id="label3" class="label" href="#">Pans
			<span />
		
		
		</div>
	</div>
	
	<div class="kitchendialog">
	<p></p>
		<div class="gochefcontent">
    			<div id="title">
        			<p>Go Chef</p>
    			</div>
    				<div id="description">
        				<p>Blah blah blahblah blah blah blah blah blah blah blah blah blah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblah blahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblahblah</p>
    				</div>
    					<div class="priceDetails">
        					<p class="price">£69.99</p>
    					</div>
    						<div id="moreinfowrapper"><a href="http://www.jmldirect.com/uk/cooking+baking/gochef/invt/g0bgs20100000001" target="_blank"><div class="button"></a>
						</div>
		</div>

	<a class="kitchenclose">X</a>
	</div>
	</div>
		<div id="gochef" href="#"></div>
		<div id="whizzmop" href="#"></div>
		<div id="pan" href="#"></div>
		<div id="flyin">Header</div>

CSS

.kitchencontainer {
    background: url("http://jmldirect.uat.venda.com/content/ebiz/shop/resources/exp/kitchen/images/kitchen_layout_traced_no_background_920x450px.png") no-repeat scroll transparent;
    color: #000000;
    height: 450px;
    margin: 20px;
    overflow: hidden;
    position: relative;
    width: 920px;
    float:left;
}

.kitchendialog {
    background-color: rgba(163, 154, 77, 0.9);
    color: #FFFFFF;
    display: none;
    height: 140px;
    left: 274px;
    line-height: 24px;
    padding: 100px 30px;
    position: absolute;
    text-align: center;
    top: 57px;
    width: 280px;
    z-index: 10;

    -moz-border-radius: 170px;
    -ms-border-radius: 170px;
    -o-border-radius: 170px;
    -webkit-border-radius: 170px;
    border-radius: 170px;
}

.kitchendialog p {
	font-size: 12px;
}


.kitchendialog .kitchenclose {
	color: black;
    background-color: #65683b;
    cursor: pointer;
    font-size: 22px;
    font-weight: bold;
    height: 36px;
    line-height: 36px;
    position: absolute;
    right: 10px;
    top: 60px;
    width: 36px;

    -moz-border-radius: 18px;
    -ms-border-radius: 18px;
    -o-border-radius: 18px;
    -webkit-border-radius: 18px;
    border-radius: 18px;
}
.labels p {
    display: none;
}
.labels div {
    background-color: rgba(65,185,120, 0.8);
    color: #FFFFFF;
    display: none;
    height: 50px;
    padding: 30px 0 0;
    position: absolute !important;
    text-align: center;
    text-decoration: none;
    width: 80px;

    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
}
.labels > div {
    background-color: rgba(65,185,255, 0.8);

    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -webkit-transition: .3s;
    transition: .3s;
}
.labels div:hover {
    background-color: rgba(128, 128, 128, 0.8);
}
.labels div span {
    border-left: 10px solid transparent;
    border-right: 10px solid...

JavaScript

function preload(arrayOfImages) {
    jQuery(arrayOfImages).each(function () {
        jQuery('<img/>')[0].src = this;
    });
}
preload(['http://jmldirect.uat.venda.com/content/ebiz/shop/resources/exp/kitchen/images/kitchen_layout_traced_no_background_920x450px.png']);


<!-- 2 of 2 Bounces and slide in -->


	jQuery(function(){
    // initialize of labels
    jQuery('.labels div#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
        jQuery('.labels div#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
            jQuery('.labels div#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                jQuery('.labels div#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                    jQuery('.labels div#label5').fadeIn(100).effect('bounce', { times:3 }, 300, function() {
                        jQuery('.labels div#label6').fadeIn(100).effect('bounce', { times:3 }, 300);
                    });
                });
            });
        });
    });

    // dialog close
    jQuery('.kitchendialog .kitchenclose').click(function() {
        jQuery(this).parent().fadeOut(500);
        return false;
    });

    // display dialog on click by labels
    jQuery('.labels div').click(function() {
        jQuery('.kitchendialog p').html( jQuery(this).find('p').html() ).parent().fadeIn(500);
        return false;
    });

    // close dialog on click outside
    jQuery('.kitchencontainer').click(function() {
        jQuery('.kitchendialog').fadeOut(500);
    });
});

// Calculate current browser width.
var currWidth = jQuery('.kitchencontainer').width();
console.log(currWidth);

var startPos = 0;
var endPos = 810;
console.log(endPos);

jQuery('#flyin').animate({left: endPos}, 1000);