JSFiddle - React, Tailwind, and code Playground

by chanaka1

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="http://fortawesome.github.com/Font-Awesome/assets/css/font-awesome.css">
<div id='userbar' class='btn-group input-prepend input-append'>
    <button class='btn'></button>
     <button class='btn'></button>
     <button class='btn'></button>
     <button class='btn'></button>
     <button class='btn'></button>
     <button class='btn'></button>
     <button class='btn'></button>
				<button id='notices' class='btn' rel='tooltip' data-placement='bottom' data-original-title='Notifications'> <i class='icon-exclamation-sign icon-large'> <span class='badge badge-important'>102</span></i> </button>

			

			</div>

CSS

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
footer ul li a {
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	transition: all 0.2s linear;
}
footer ul li a:hover,.pop_set:hover{
	text-decoration: none;
}
.see_all {
	overflow:hidden !important;
	width:273px;
	margin:0;
	margin-bottom:-10px;
	margin-left:-15px;
	text-align:center;
	
	-webkit-background-clip: border-box;
	-webkit-box-shadow: none;
	background-clip: border-box;
	background-color: #F7F7F7;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	
}
a.see_all_a {
	width: 100%;
	

}
.see_all a:hover {
	text-decoration: none;
}
.alink {
	position:absolute;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	border-radius:5px;
	height:25px;
  	width:100%;
  	margin-left:-98px;

  /* edit: added z-index */
  	z-index: 1;
}
.notices { 
	width:300px;
	
}
.popover-footer {
  margin: 0;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: normal;
  line-height: 18px;
  background-color: #f7f7f7;
  border-top: 1px solid #ebebeb;
  -webkit-border-radius: 5px 5px 0 0;
  -moz-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
}
.popover-title {
	
}
.popover-settings {
	margin: 0;
 	padding: 8px 14px;
 	font-size: 14px;
 	font-weight: normal;
  	line-height: 18px;
	margin-top:-35px;
	float:right;
	display:inline;
}
.btn .badge {
	margin:0;
	padding:0;
	position:absolute;
	width:20px;
	font-size:8px;
	margin-top:-3px;
	margin-left:-10px;
}

JavaScript

/* ===================================================
 * bootstrap-transition.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#transitions
 * ===================================================
 * Copyright 2012 Twitter, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 * ========================================================== */


!function ($) {

  "use strict"; // jshint ;_;


  /* CSS TRANSITION SUPPORT (http://www.modernizr.com/)
   * ======================================================= */

  $(function () {

    $.support.transition = (function () {

      var transitionEnd = (function () {

        var el = document.createElement('bootstrap')
          , transEndEventNames = {
               'WebkitTransition' : 'webkitTransitionEnd'
            ,  'MozTransition'    : 'transitionend'
            ,  'OTransition'      : 'oTransitionEnd otransitionend'
            ,  'transition'       : 'transitionend'
            }
          , name

        for (name in transEndEventNames){
          if (el.style[name] !== undefined) {
            return transEndEventNames[name]
          }
        }

      }())

      return transitionEnd && {
        end: transitionEnd
      }

    })()

  })

}(window.jQuery);
/* =========================================================
 * bootstrap-modal.js v2.2.2
 * http://twitter.github.com/bootstrap/javascript.html#modals
 * =========================================================
 * Copyright 2012 Twitter,...