JSFiddle - React, Tailwind, and code Playground

by xmbohx

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apanel</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" charset="utf-8"></script>
</head>

<body>
    <!---wrapper starts-->
    <div class="wrapper">
        <!---header menu-->
        <div class="header">
            <div class="header-menu">
                <div class="title">My <span>Panel</span></div>
                <div class="sub_title">SubTitle</div>
                <div class="sidebar-btn">
                    <i class="fas fa-bars"></i>
                </div>
                <ul>
                    <li><a href="#"><i class="fas fa-search"></i></a></li>
                    <li><a href="#"><i class="fas fa-bell"></i></a></li>
                    <li><a href="#"><i class="fas fa-power-off"></i></a></li>
                </ul>
            </div>
        </div>
        <!--/header menu-->
        <!--sidebar-->
        <div class="sidebar">
            <div class="sidebar-menu">
                <center class="profile">
                    <img src="images/img1.jpg" alt="" class="src">
                    <p>User</p>
                </center>
                <li class="item">
                    <a href="#" class="menu-btn">
                        <i class="fas fa-desktop"></i><span>Dashboard</span>
                    </a>
                </li>
         ...

CSS

* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
}

body {
    background: #fff;
}

.wrapper .header {
    z-index: 1;
    background: #22242A;
    position: fixed;
    width: calc(100% - 0%);
    height: 90px;
    display: flex;
    top: 0;
}

.wrapper .header .header-menu {
    width: calc(100% - 0%);
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.wrapper .header .header-menu .title {
    color: #fff;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 900;
}

.wrapper .header .header-menu .title span {
    color: #4ccee8;
}

.wrapper .header .header-menu .sub_title {
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 200;
}

.wrapper .header .header-menu .sub_title span {
    color: #ffff;
}

.wrapper .header .header-menu .sidebar-btn {
    color: #fff;
    position: absolute;
    margin-left: 240px;
    font-size: 22px;
    font-weight: 900;
    cursor: pointer;
    transition: 0.3s;
    transition-property: color;
}

.wrapper .header .header-menu .sidebar-btn:hover {
    color: #4ccee8;
}

.wrapper .header .header-menu ul {
    display: flex;
}

/*tombol sebelah my panel*/
.wrapper .header .header-menu ul li a {
    background: #fff;
    color: #000;
    display: block;
    margin: 0 10px;
    font-size: 18px;
    width: 34px;
    height: 34px;
    line-height: 35px;
    text-align: center;
    border-radius: 50%;
    transition: 0.3s;
    transition-property: background, color;
}

.wrapper .header .header-menu ul li a:hover {
    background: #4ccee8;
    color: #fff;

}

.wrapper .sidebar {
    z-index: 1;
    background: #2f323a;
    position: fixed;
    top: 90px;
    width: 250px;
    height: calc(100% - 9%);
    transition: 0.3s;
    transition-property: width;
    overflow-y: auto;
}

.wrapper .sidebar .sidebar-menu {
   ...

JavaScript

$(document).ready(function () {
                $(".sidebar-btn").click(function () {
                    $(".wrapper").toggleClass("kollapse");
                });
            });