JSFiddle - React, Tailwind, and code Playground

HTML

<div class="megamenu-wrapper">
<div class="megamenu-pattern">
<div class="container">
<ul class="megamenu">
<li class="with-sub-menu hover">
<p class="close-menu"></p>
<a class="clearfix" href="http://friendsfashion.bg/%D0%BC%D0%B0%D0%B3%D0%B0%D0%B7%D0%B8%D0%BD">
<span>Shop</span>
<span class="fa fa-caret-down hidden-xs"></span>
</a>
<div class="sub-menu" style="width:20%">
<div class="content">
<div class="row">
<div class="col-sm-10">
<p>
<a href="http://friendsfashion.bg/%D1%80%D0%BE%D0%BA%D0%BB%D0%B8" target="">Subgategory</a>
</p>
<p>
<a href="http://friendsfashion.bg/%D1%82%D1%83%D0%BD%D0%B8%D0%BA%D0%B8" target="">Subgategory</a>
</p>
<p>
<a href="http://friendsfashion.bg/%D0%BF%D0%B0%D0%BD%D1%82%D0%B0%D0%BB%D0%BE%D0%BD%D0%B8" target="">Subgategory</a>
<span style="font-weight: bold;">
<span style="line-height: 1.42857;">
<br>
</span>
</span>
</p>
<p>
<a href="http://friendsfashion.bg/%D0%BF%D0%BE%D0%BB%D0%B8" target="">Subgategory</a>
<span style="font-weight: bold;">
<span style="line-height: 1.42857;">
<br>
</span>
</span>
</p>
<p>
<a href="http://friendsfashion.bg/%D0%B1%D0%BB%D1%83%D0%B7%D0%B8" target="">Subgategory</a>
</p>
<p>
<a href="http://friendsfashion.bg/%D1%80%D0%B8%D0%B7%D0%B8" target="">Ризи</a>
</p>
<p>
<a href="http://friendsfashion.bg/%D1%81%D0%B0%D0%BA%D0%B0" target="">Subgategory</a>
</p>
<p>
<a target="" href="http://friendsfashion.bg/%D0%BA%D0%BE%D0%BC%D0%BF%D0%BB%D0%B5%D0%BA%D1%82%D0%B8">Subgategory</a>
</p>
<p>
<a style="line-height: 1.42857; background-color: rgb(255, 255, 255);" href="http://friendsfashion.bg/%D1%82%D0%BE%D0%BF%D0%BE%D0%B2%D0%B5" target="">Subgategory</a>
<br>
</p>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>

CSS

/* MegaMenu
------------------*/
#menu {
	position: relative;
	overflow: visible;
}

#menu .background-menu {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
}

#megaMenuToggle {
	display: none;
}

.container-megamenu,.container-megamenu .container {
	padding-top: 0px !important;
	padding-bottom: 0px !important;
}

.container-megamenu .container {
	width: auto;
}

.megamenu-wrapper {
	position: relative;
	z-index: 9;
	margin-left: 20px;
	/* margin-right: 20px; */
	margin-top: 35px;
}

.main-fixed .megamenu-wrapper .container {
	padding-left: 0px;
	padding-right: 0px;
}

.standard-body .megamenu-wrapper {
	margin-left: 15px;
	margin-right: 15px;
}

.megamenu-wrapper  .menu-holder {
	padding-left: 0px;
	padding-right: 0px;
}

.menu-bottom {
	padding-left: 0px;
	padding-right: 0px;
	border-bottom: 1px solid #e7e7e7;
	clear: both;
	margin-bottom: 20px;
}

.megamenu-pattern {
	
}

ul.megamenu {
	margin: 0px;
	padding: 0px;
	list-style: none;
	position: relative;
	z-index: 999;
}

ul.megamenu>li {
	float: left;
	width: auto;
}

ul.megamenu>li.pull-right {
	float: right;
	margin-right: 0px;
	margin-left: 20px;
}

ul.megamenu>li .close-menu {
	display: none;
}

ul.megamenu>li>a {
	display: block;
	position: relative;
	font-size: 13px;
	line-height: 40px;
	height: 40px;
	font-weight: 700;
	color: #222222;
	padding-left: 20px;
	padding-right: 20px;
	text-transform: uppercase;
}

ul.megamenu>li:hover {
	color: #bababa;
}

ul.megamenu>li:hover a {
	color: #bababa;
}

ul.megamenu>li.pull-right>a {
	margin-right: 0px;
	margin-left: 34px;
}

ul.megamenu>li>a strong {
	font-weight: 700;
}

ul.megamenu>li>a:hover,ul.megamenu>li.active>a,ul.megamenu>li.home>a,ul.megamenu>li:hover>a {
	color: #bababa;
}

ul.megamenu>li>a>.icon-home {
	display: block;
	font-size: 23px;
}

ul.megamenu>li>a img {
	margin-right: 10px;
	height: 28px;
	vertical-align: middle;
}

ul.megamenu>li>a.description {
	font-size: 14px;
	padding: 17px 0px 11px 0px;
	line-height:...

JavaScript

var active = false;
var hover = false;
$(document).ready(function() {
	$("ul.megamenu li .sub-menu .content .hover-menu ul li").hover(function () {
		$(this).children("ul").show();
	},function () {
		$(this).children("ul").hide();
	});
	if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
		$("ul.megamenu > li.hover").click(function () {
			if($(this).find(".content").is(':visible')) { return false; }
			active = $(this);
			hover = true;
			$("ul.megamenu > li").removeClass("active");
			$(this).addClass("active");
			$("ul.megamenu > li").children(".sub-menu").hide();
			$("ul.megamenu > li").find(".content").hide();
			$(this).children(".sub-menu").show();
			if(transition == 'slide') {
				$(this).find(".content").show();
				$(this).find(".content").css("height", "auto");
				var originalHeight = $(this).find(".content").height();
				$(this).find(".content").css("height", 0);
				$(this).find(".content").stop(true, true).animate({ height:originalHeight },animation_time);
			} else if(transition == 'fade') {
				$(this).find(".content").fadeIn(animation_time);
			} else {
				$(this).find(".content").show();
			}		
			$(this).children(".sub-menu").css("right", "auto");
			var $whatever        = $(this).children(".sub-menu");
			var ending_right     = ($(window).width() - ($whatever.offset().left + $whatever.outerWidth()));
			var $whatever2       = $("ul.megamenu");
			var ending_right2    = ($(window).width() - ($whatever2.offset().left + $whatever2.outerWidth()));
			if(ending_right2 > ending_right) {
				$(this).children(".sub-menu").css("right", "0");
			}
		return false;	
		});
	} else {
		$("ul.megamenu > li.hover").hover(function () {
			active = $(this);
			hover = true;
			$("ul.megamenu > li").removeClass("active");
			$(this).addClass("active");
			$("ul.megamenu > li").children(".sub-menu").hide();
			$("ul.megamenu >...