index.html

<!doctype html>
<html lang="en">
<head>
	
	<meta charset="UTF-8">
	<title>ReactJS components</title>
	
	<script src="app/bower_components/jquery/dist/jquery.js"></script>
	<script src="app/bower_components/react/JSXTransformer.js"></script>
	<script src="build/js/all.js" type="text/jsx"></script>
	
	<style>
	html,body {
		margin: 0;
		padding: 0;
	}
	body {
		font-family: 'Helvetica', sans-serif;
		color: #444;
		padding-top: 50px;
	}

	.backdrop,
	.dropdown-backdrop {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .1);
	}
	
	/* examples */
	#content {
		margin: 0 auto;
		width: 90%;
		text-align: left;
	}

	.cmp-example {
		border: 1px solid #ccc;
		padding: 20px;
		margin: 40px 0;
		text-align: center;
	}

	.cmp-example h2 {
		margin: 20px 0;
		font-size: 2em;
	}

	.cmp-code {
		background: #eee;
		padding: 20px;
		border: 1px solid #ccc;
	}

	.cmp-demo {
		margin: 40px 0;
	}


	/* testing transitions */
	.comment-item-enter,
	.comment-item-leave {
		opacity: 0;
		transition: all .4s ease-in-out;
		-webkit-animation-delay: .2s;
		animation-delay: .2s;
	}

	.comment-item-enter {
		
	}

	.comment-item-enter.comment-item-enter-active {
		opacity: 1;
	}
		
	.slide {
		-webkit-transition: all 1s ease-out;
		transition: all 1s ease-out;
		opacity: 0;
	}
	
	.slide-enter {
		opacity: 1;
	}
	
	.slide-leave {
		opacity: 0;
	}
	

	/* dropdown */
	.dropdown,
	.popover {
		/*position: relative;*/
	}
	
	.popover-content,
	.dropdown-content,
	.dropdown-menu,
	.tooltip .tooltip-content {
		width: 260px;
		list-style: none;
		padding: 0;
		margin: 0;
		background: yellow;
	}
	
	.popover.open .popover-content,
	.dropdown.open .dropdown-content,
	.dropdown.open .dropdown-menu,
	.tooltip.open .tooltip-content {
		opacity: 1;
	}

	.dropdown-btn,
	.btn-dropdown {
		background: #eee;
	}

	/* carousel */
	.carousel {
		overflow: hidden;
		position: relative;
		height: 340px;
	}
	
	.carousel-item {
		position: absolute;
		background: #eee;
		width: 40%;
		height: 200px;
		transition: all .5s ease-out;
	}

	.carousel-controls {
		position: absolute;
		bottom: 20px;
	}

	/* modal */
	.modal-backdrop {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);	
    position: fixed;
	}

	.modal-content {
		position: fixed !important;
    background: white;
    width: 400px;
    min-height: 200px;
    z-index: 9999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	}

	/* skin */
	.btn {
		line-height: 1;
		padding: 16px 24px;
		display: inline-block;
		border: 1px solid #ccc;
	}

	@media screen and (max-width: 320px) {
		.popover-content,
		.dropdown-content,
		.dropdown-menu {
			width: 100%;
			left: 0 !important;
		}
	}
	</style>
</head>
<body>
	
	<div id="content"></div>
</body>
</html>