JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<ul class="nav nav-list newNav">
    <li>Connectors</li>
    <li>Data Source</li>
    <li data-toggle="collapse" data-target="#reportMenu">Reports
        <div class="pull-right badge badge-notify" tabindex="0" data-container="body" data-toggle="popover" data-placement="right" data-content="<div class='screenShoot'><div class='screenShootTitle'>Title Of...</div><img src='https://addons.cdn.mozilla.net/user-media/previews/full/37/37959.png?modified=1331247702'></div>    <div class='screenShoot'><div class='screenShootTitle'>Title Of...</div><img src='https://addons.cdn.mozilla.net/user-media/previews/full/37/37959.png?modified=1331247702'></div>  <div class='screenShoot'><div class='screenShootTitle'>Title Of...</div><img src='https://addons.cdn.mozilla.net/user-media/previews/full/37/37959.png?modified=1331247702'></div>  <div class='screenShoot'><div class='screenShootTitle'>Title Of...</div><img src='https://addons.cdn.mozilla.net/user-media/previews/full/37/37959.png?modified=1331247702'></div>  <div class='screenShoot'><div class='screenShootTitle'>Title Of...</div><img src='https://addons.cdn.mozilla.net/user-media/previews/full/37/37959.png?modified=1331247702'></div><div class='screenShoot'><div class='screenShootTitle'>Title Of...</div><img src='https://addons.cdn.mozilla.net/user-media/previews/full/37/37959.png?modified=1331247702'></div>    <div class='screenShoot'><div class='screenShootTitle'>Title Of...</div><img src='https://addons.cdn.mozilla.net/user-media/previews/full/37/37959.png?modified=1331247702'></div>  <div class='screenShoot'><div class='screenShootTitle'>Title Of...</div><img src='https://addons.cdn.mozilla.net/user-media/previews/full/37/37959.png?modified=1331247702'></div>  <div class='screenShoot'><div class='screenShootTitle'>Title Of...</div><img src='https://addons.cdn.mozilla.net/user-media/previews/full/37/37959.png?modified=1331247702'></div>  <div class='screenShoot'><div class='screenShootTitle'>Title Of...</div><img...

CSS

body {
    font-family:'Century Gothic';
    color:white;
    margin:30px;
    font-size:12px;
}
li {
    background: #555557;
}
.newNav {
    width:250px;
}
ul li {
    border:1px solid #999;
    line-height:21px;
}
li {
    padding:5px;
}
ul li ul {
    margin-top: 5px;
}
li ul li {
    clear:both;
    background-color:rgb(139, 134, 134);
}
.screenShoot img {
    width:190px;
    height:120px;
}
.screenShootTitle {
    color:#999;
}
.screenShoot {
    display:block;
    margin:2px;
}
.screenShoot:hover {
    border:1px solid #ff6600;
    margin:0px;
}
.badge-notify {
    background: red;
    position: relative;
    border: 1px solid #fff;
}
.badge {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #777;
    border-radius: 10px;
    cursor:pointer;
}
.badge:hover {
    background-color: #2A2929;
}

JavaScript

$(function (e) {
    $('[data-toggle="popover"]').popover({
        html: true
    })
})
$winHeight = $(window).height();
$('.badge').click(function (e) {
    e.stopPropagation();
$popHeight =  $('.popover-content').height();
if( $winHeight > $(window).height() ){
    $('.popover-content').width() * 2
}
    
})