JSFiddle - React, Tailwind, and code Playground

by mitiya

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=240, height=320, initial-scale=1.0, user-scalable=no">
		<link href="1.css" rel="stylesheet">
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	</head>
	<body>
		<div id="bookshelf-main">
			<div id="center"> 
				<div id="left"></div>					
					<div id="bookshelf">
						<div class="books" data-book-hash="Book name 1"><div class="book-title" >Book name 1</div><img alt="book name bnvbn vnbvmb bvnbvb bnvmbv bvmnbvn" src="https://dl.dropbox.com/sh/ycuz2olukdwidau/cjesfSKBQ7/book-icon.gif?token_hash=AAFdrNzXqyBM9a6AL_eL44ufxijc1kgWmY8ZXuY_4MgTBg"></div>
						<div class="books" data-book-hash="Book name 2"><div class="book-title" >Book name 2</div><img alt="book name bnvbn vnbvmb bvnbvb bnvmbv bvmnbvn" src="https://dl.dropbox.com/sh/ycuz2olukdwidau/cjesfSKBQ7/book-icon.gif?token_hash=AAFdrNzXqyBM9a6AL_eL44ufxijc1kgWmY8ZXuY_4MgTBg"></div>
						<div class="books" data-book-hash="Book name 3"><div class="book-title" >Book name 3</div><img alt="book name bnvbn vnbvmb bvnbvb bnvmbv bvmnbvn" src="https://dl.dropbox.com/sh/ycuz2olukdwidau/cjesfSKBQ7/book-icon.gif?token_hash=AAFdrNzXqyBM9a6AL_eL44ufxijc1kgWmY8ZXuY_4MgTBg"></div>
						<div class="books" data-book-hash="Book name 4"><div class="book-title" >Book name 4</div><img alt="book name bnvbn vnbvmb bvnbvb bnvmbv bvmnbvn" src="https://dl.dropbox.com/sh/ycuz2olukdwidau/cjesfSKBQ7/book-icon.gif?token_hash=AAFdrNzXqyBM9a6AL_eL44ufxijc1kgWmY8ZXuY_4MgTBg"></div>
						<div class="books" data-book-hash="Book name 5"><div class="book-title" >Book name 5</div><img alt="book name bnvbn vnbvmb bvnbvb bnvmbv bvmnbvn" src="https://dl.dropbox.com/sh/ycuz2olukdwidau/cjesfSKBQ7/book-icon.gif?token_hash=AAFdrNzXqyBM9a6AL_eL44ufxijc1kgWmY8ZXuY_4MgTBg"></div>
						<div class="books" data-book-hash="Book name 1"><div class="book-title" >Book name 1</div><img alt="book name bnvbn vnbvmb bvnbvb bnvmbv...

CSS

html, body, #bookshelf-main, #content{
    height: 100%;
}

html, body{ 
    margin: 0;
}

#top, #bottom{
    position: fixed;
    height: 30px;
    background-color: red;
    width: 100%;
}
#top {
    top: 0;
}
#bottom {
    bottom: 0;
}
#center {
	background: url("https://photos-4.dropbox.com/t/0/AACq0MbKojNR5PrmCuppye865oFkvMefDHU8L7RqKAN3RA/10/14718466/png/32x32/2/1361656800/0/2/Bookshelf.png/Z6cthlRr3H9yTiNY2LD71dJgDHN0BCVvs73WAZXX42w?size=1024x768&size_mode=2") repeat scroll 0 0 transparent;
	height: 100%;
	margin: 0px auto;
	max-width: 512px;
	overflow: hidden;
}

#bookshelf {
    max-width: 486px;
    padding-left: 8px;
    padding-right: 20px;
    position: absolute;
}

#left {
	background: url("https://photos-4.dropbox.com/t/0/AAAugmMR9KB3h3OlKs4Jy0WaIu1n8vwpAS8R_UhRPBHBZw/10/14718466/png/32x32/2/1361656800/0/2/Bookshelf-left.png/sj9PaPDv9lynORPzZWcpl0nSOZazvgM21MBCQQJzJ7s?size=1024x768&size_mode=2") repeat scroll 0 0 transparent;
    float: left;
    height: inherit;
    width: 96px;
}

#right { 
	background: url("https://photos-3.dropbox.com/t/0/AADpen4letnFHhNAVSv3KuqpGjDrCY1xZ-GYGD_pflfodg/10/14718466/png/32x32/2/1361656800/0/2/Bookshelf-right.png/SDeA7dgniOUqyFcfJh1kcW7q0ECizWPmWD2p-WzKFYQ?size=1024x768&size_mode=2") repeat scroll 0 0 transparent;
    float: right;
    height: inherit;
    width: 96px;
}

.books {
    float: left;
    height: 96px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-top: 6px;
    width: 86px;
}

.books img{
	box-shadow: 0 0 8px, 0 0 8px inset;
	height: inherit;
	width: inherit;
}

.book-title {
	cursor: default;
    color: gold;
    font-family: monospace;
    font-size: 14px;
    overflow: hidden;
    position: absolute;
	text-overflow: ellipsis;
    text-shadow: 0 1px 1px #111111;
	white-space: pre-wrap;
    width: 56px;
	height: 70px;
    margin-left: 22px;
    margin-top: 6px;
}

JavaScript

jQuery.fn.extend({ 
    disableSelection : function() { 
            this.each(function() { 
                    this.onselectstart = function() { return false; }; 
                    this.unselectable = "on"; 
                    jQuery(this).css('-moz-user-select', 'none'); 
            }); 
    },
    enableSelection : function() { 
            this.each(function() { 
                    this.onselectstart = function() {}; 
                    this.unselectable = "off"; 
                    jQuery(this).css('-moz-user-select', 'auto'); 
            }); 
    } 
});


$(document).ready(function(){
    $('.title').disableSelection(); 
	
	if  ($("#center").height() < $("#bookshelf").height()) {
		$("#center").height($("#bookshelf").height());
	}
	
	$('.books').bind('click', function() {
		alert( $(this).data("book-hash") );
	});
	
});