JSFiddle - React, Tailwind, and code Playground

by Yusuf Onur SARI

HTML

<html>
<head>
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>

<body>
<div class="header-bottom-menu">
    <ul>
        <li>
            <a href="">
                AnaSayfa
            </a>
        </li>
                                    <li><a href="/birinci-kategori">Birinci Kategori</a></li>
                                                
                                                <li class="zindex999">
                    <a href="#">
                        Diğer Kategoriler
                        <i class="fas fa-caret-down"></i>
                    </a>
                    <ul class="header-bottom-menu-dropdown">
                                            <li class="">
                                <a href="/alt-kategori-1">
                                        Alt Kategori-1
                                </a>
                        </li>
                
                                            <li class="">
                                <a href="/alt-kategori-2">
                                        Alt Kategori-2
                                </a>
                        </li>
                
                                            <li class="zindex999">
                                <a href="#">
                                        Alt Kategori-3 Bu olsun
                                        <i class="fas fa-caret-down"></i>
                               ...

CSS

body{
	font-family: "calibri";
}
.header-login-form{
	float: left;
	margin-top: 30px;
}
.header{
	float: left;
	width: 100%;
}
.header-top{
	border-bottom: 1px solid #dee2e6;
	margin: 0 auto;
	overflow: hidden;
	width: 100%;
	max-width: 98%;
}
.header-top-date{
	float: left;
}
.header-top-date span{
	padding: 3px 10px;
	float: left;
}
.header-top-social{
	float: right;
	margin-right: 10px;
	margin-left: 30px;
}
.header-top-social ul{
	padding: 0;
}
.header-top-social ul li{
	list-style: none;
	float: left;
}
.header-top-social ul li a{
	display: block;
	color: #000;
	padding: 3px 5px;
	margin: 0 10px;
}
.header-top-social ul li a:hover{
	color: #6c757d;
}
.header-top-menu{
	float: right;
}
.header-top-menu ul li{
	list-style: none;
	float: left;
}
.header-top-menu ul li a{
	display: block;
	color: #000;
	text-decoration: none;
	background: #f8f9fa;
	padding: 3px 10px;
}
.header-top-menu ul li a:hover{
	color: #6c757d;
}
.header-content{
	float: left;
	width: 100%;
}
.header-content .container{
	max-width: 1366px;
}
.header-content .col-md-4,.header-content .col-md-6,.header-content .col-md-2{
	float: left;
}
.logo{
	max-width: 200px;
	float: left;
	margin-top: 20px;
	overflow: hidden;
}
.logo img{
	max-width: 100%;
}

.header-bottom-menu{
	float: left;
	width: 100%;
	margin-top: 0px; // 25
}
.header-bottom-menu .container{
	max-width: 1366px;	// 1366px
}
.header-bottom-menu ul li{
	list-style: none;
	float: left;
	position: relative;
}
.header-bottom-menu ul li a{
	display: block;
	color: #000;
	background: #f8f9fa;
	border-right: 1px solid #dee2e6;
	text-decoration: none;
	padding: 7px 15px;	// 7-15px
	font-size: 1.1rem;
}
.header-bottom-menu ul li a .fas{
	margin-left: 5px;
}
.header-bottom-menu ul li a:hover{
	color: #6c757d;
}
.header-bottom-menu ul li ul.header-bottom-menu-dropdown{
	position: absolute;
    left: 0;
    right: 0;
    padding: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;	// 0 0 5px...

JavaScript

function openCity(evt, cityName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(cityName).style.display = "block";
    evt.currentTarget.className += " active";
}
function open_m_menu() {
    var x = document.getElementById("mobile-menu-content");
    var y = document.getElementById("mobile-menu-content-btn");
    if (x.style.marginLeft === "-1000px") {
        x.style.marginLeft = "0px";
        y.style.cssFloat = "right";
    } else {
        x.style.marginLeft = "-1000px";
        y.style.cssFloat = "left";
    }
}

$(document).ready(function(){
        $('#tabcontent-dropdown').hide();
        $('#show_hide').click(function(){
        $('#tabcontent-dropdown').slideToggle(300);
});
});
$(document).ready(function(){
        $('#tabcontent-dropdown2').hide();
        $('#show_hide2').click(function(){
        $('#tabcontent-dropdown2').slideToggle(300);
});
});