JSFiddle - React, Tailwind, and code Playground

by khalil_elyacubi

HTML

<!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">
    <link rel="stylesheet" href="style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/solid.min.css">

    <script defer src="https://use.fontawesome.com/releases/v5.15.4/js/all.js" integrity="sha384-rOA1PnstxnOBLzCLMcre8ybwbTmemjzdNlILg8O7z1lUkLXozs4DHonlDtnE7fpc" crossorigin="anonymous"></script>

    <title>grid dashboard</title>
</head>
<body>
    <div class="container">
        <div class="navbar">
            <div class="left-nav">
                <a href="#"><i class="fas fa-plus"></i>   Support server</a>
                <a href="#"><i class="fas fa-code"></i>   Commands</a>
            </div>
            <div class="right-nav">user.icon</div>
        </div>
        <div class="sidebar">
            <div class="logo"><img src="./logo.png" alt="" srcset=""></div>


  
                <select name="potencial" id="potencial" class="custom-select sources" placeholder="Ticket Manager">
                  <option value="DH" selected><img src="server-logo.png" alt="server-logo"> Ticket Manager</option>
                  <option value="A">Ticket Manager</option>
                  <option value="B">Ticket Manager</option>
                  <option value="C">Ticket Manager</option>
                  <option value="D">Ticket Manager</option>
                  <option value="D">Ticket Manager</option>
                  <option value="D">Ticket Manager</option>
                  <option value="D">Ticket Manager</option>
                  <option value="D">Ticket Manager</option>
                  <option value="D">Ticket Manager</option>
                  <option value="D"><i class="fas fa-cog"></i>Ticket Manager</option>
      ...

CSS

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    transition: 0.3s;
}


.container{ 
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 60px 1fr;
    grid-template-areas: 
    "sidebar header"
    "sidebar main";
    height: auto;
}
/*------------------------------------*/
             /* Navbar */
/*------------------------------------*/
.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    position: sticky;

}
.left-nav a{
    font-weight: 300;
    font-size: 13px;
    text-decoration: none;
    color: white;
    margin: 0 10px;
}
.left-nav a:hover{
    color: rgb(187, 187, 187);
}
.left-nav i:hover{
    color: rgb(187, 187, 187);
}   


.navbar{
    grid-area: header;
    background-color: rgba(38, 40, 48, 1);
    color: white;
    align-items: center;
    height: 100%;
}
/*------------------------------------*/
            /* Sidebar */
/*------------------------------------*/
.sidebar{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sidebar{
    grid-area: sidebar;
    background-color: rgba(38, 40, 48, 1);
    color: white;
}
.logo{

    padding: 20px;

}
.logo img{
    width: 100%;
}

.category-head{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 83%;
    justify-content: space-between;

    font-size: small;
    font-weight: 300;
    color: rgba(255, 255, 255, 0.452);
    margin-top: 15%;
    
}
.width_element{
    width: 81%;
}

.category-pages, .category-select{
    display: flex;
    flex-direction: column;
    width: 84%;
    

}
.category-select{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
 

   ...

JavaScript

$(".custom-select").each(function() {
    var classes = $(this).attr("class"),
      id = $(this).attr("id"),
      name = $(this).attr("name");
    var template = '<div class="' + classes + '">';
    template +=
      '<span class="custom-select-trigger">' +
      $(this).attr("placeholder") +
      "</span>";
    template += '<div class="custom-options">';
    $(this)
      .find("option")
      .each(function() {
        template +=
          '<span class="custom-option ' +
          $(this).attr("class") +
          '" data-value="' +
          $(this).attr("value") +
          '">' +
          $(this).html() +
          "</span>";
      });
    template += "</div></div>";
  
    $(this).wrap('<div class="custom-select-wrapper"></div>');
    $(this).hide();
    $(this).after(template);
  });
  $(".custom-option:first-of-type").hover(
    function() {
      $(this)
        .parents(".custom-options")
        .addClass("option-hover");
    },
    function() {
      $(this)
        .parents(".custom-options")
        .removeClass("option-hover");
    }
  );
  $(".custom-select-trigger").on("click", function() {
    $("html").one("click", function() {
      $(".custom-select").removeClass("opened");
    });
    $(this)
      .parents(".custom-select")
      .toggleClass("opened");
    event.stopPropagation();
  });
  $(".custom-option").on("click", function() {
    $(this)
      .parents(".custom-select-wrapper")
      .find("select")
      .val($(this).data("value"));
    $(this)
      .parents(".custom-options")
      .find(".custom-option")
      .removeClass("selection");
    $(this).addClass("selection");
    $(this)
      .parents(".custom-select")
      .removeClass("opened");
    $(this)
      .parents(".custom-select")
      .find(".custom-select-trigger")
      .text($(this).text());
  });