JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<ul class="share-search">
                                                               <li class="share-button"><a href="#" id="tickersocial"><i class="icon-plus"></i><span>follow</span></a>
                                <div class="socialdrop" style="display: block;">
                                	<ul>
                                    	                                    	<li><a href="#" class="facebook"><i class="icon-facebook"></i>Facebook</a></li>
                                                                                                                        <li><a href="#" class="twitter"><i class="icon-twitter"></i>Twitter</a></li>
                                                                                                                        <li><a href="#" class="google"><i class="icon-google-plus"></i>Google+</a></li>
                                                                                                                        <li><a href="#" class="pinterest"><i class="icon-pinterest"></i>Pinterest</a></li>
                                                                                                                        <li><a href="#" class="rss-feed"><i class="icon-rss"></i>RSS Feed</a></li>
                                                                                                                        <li><a href="#" class="linkedin"><i class="icon-linkedin-sign"></i>Linked</a></li>
                                                                                
                                                                                  <li>
                                       <a href="#" class="youtube"><i class="icon-play-circle"></i>Youtube</a></li>
                                         
                                    </ul>
                                </div>
                                </li>
                                                                <li...

CSS

.share-search {
	background:url(img/menu-border.png) top left no-repeat;
	float:right;
	position:relative;
	z-index: 9999;
}
.share-search li {
	display:inline-block;
	margin:0;
	color:#fff !important;
}
ul.share-search li a {
	padding:17px 16px 17px 10px;
	display:block;
	color:#FFF;
	cursor:pointer;
	font-size:13px;
	text-decoration:none;
	text-align:center;
}
.share-search .share-button a {
	background:url(img/menu-border.png) top right no-repeat;
}
.share-search .search-button a {
	background:url(img/menu-border.png) top right no-repeat;
}
#tickersearch:hover,#tickersocial:hover {
	color:#CCC;
}
#tickersocial span {
	text-transform:uppercase;
	font-size:14px;
}
.socialdrop {
	display:none;
	margin-top:1px;
	position:absolute;
	width:160px;
	background-color:#FFF;
	overflow:hidden;
	z-index:9999;
	-webkit-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	-moz-box-shadow:0 5px 10px rgba(0,0,0,0.2);
	box-shadow:0 5px 10px rgba(0,0,0,0.2);
}
.socialdrop ul {
	margin:0px;
	padding:0px;
	border:1px solid #ccc;
	border-top:0;
}
.socialdrop ul li {
	height:35px;
	text-align:left;
	display:block;
	line-height:35px;
	width:160px;
	border-bottom:1px solid #ECECEC;
}
.socialdrop ul li a {
	padding:0px;
	text-align:left;
	font-size:13px;
	color:#2d2d2d;
	display:block;
	float:none;
	width:100%;
	transition:background 0.2s linear;
	-moz-transition:background 0.2s linear;
	-webkit-transition:background 0.2s linear;
	-o-transition:background 0.2s linear;
}
.share-search .share-button .socialdrop a {
	background-image:none;
}
.socialdrop ul li a:hover {
	background:#900;
	color:#FFF;
}
.socialdrop ul li a i {
	margin-left:15px;
	margin-right:5px;
}
.socialdrop ul li a.facebook:hover {
	background:#314D91;
}
.socialdrop ul li a.twitter:hover {
	background:#07BEED;
}
.socialdrop ul li a.google:hover {
	background:#e12d2d;
}
.socialdrop ul li a.pinterest:hover {
	background:#e12d2d;
}
.socialdrop ul li a.rss-feeds:hover {
	background-image:url('img/icons/icon-rss.png');
}
.socialdrop ul...

JavaScript

var $ticker = $("#tickersearchform");
    var $social = $(".socialdrop");
    $ticker.data('bSearch', false);
    $social.data('cSocial', false);

    var closeSearch = function () {

        $ticker.data('bSearch', false);
        $ticker.slideUp(400, 'easeInOutQuart');

    };

    var openSearch = function () {

        $ticker.data('bSearch', true);
        $ticker.slideDown(400, 'easeInOutQuart');
      
    };

    var $body = $("body");
    $("#tickersearch").on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();
       var $isSearch = $ticker.data('bSearch');
        if ($isSearch === true) {
            closeSearch();
        } else {
            openSearch();
            closeSocial();
            $ticker.on("click", function (e) {
                e.stopPropagation();
            });
            $body.one("click", function (e) {
                closeSearch();
            });
        }
    });

    var closeSocial = function () {

        $social.data('cSocial', false);
        $social.slideUp(400, 'easeInOutQuart');
    };

    var openSocial = function () {

        $social.data('cSocial', true);
        $social.slideDown(400, 'easeInOutQuart');
    };

    $("#tickersocial").on("click", function (e) {
        e.preventDefault();
        e.stopPropagation();

        var $cSocial = $social.data('cSocial');

        if ($cSocial === true) {
            closeSocial();
        } else {
            openSocial();
            closeSearch();
            $social.on("click", function (e) {
                e.stopPropagation();
            });
            $body.one("click", function (e) {
                closeSocial();
            });
        }
    });