JSFiddle - React, Tailwind, and code Playground
by Colin Marks
HTML
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"><head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS CDN -->
<!-- <link href="../vendor/bootstrap-5.1.3.-dist/bootstrap.min.css" rel="stylesheet" type="text/css"> -->
<!-- Custom fonts for this template-->
<link href="/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="/css/sb-admin-2.min.css" rel="stylesheet">
<link href="/vendor/datatables/dataTables.bootstrap4.min.css" rel="stylesheet">
<title>Movimientos contables</title>
</head>
<body id="page-top">
<div id="wrapper">
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Logo -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="#">
<div class="sidebar-brand-icon">
<i class="fab fa-wolf-pack-battalion"></i> <!-- fa-laugh-wink-->
</div>
<div class="sidebar-brand-text mx-3">
Empresa
</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active"><a class="nav-link" href="/customer/dashboard/1">
<i class="fas fa-fw fa-tachometer-alt"></i> <span>Dashboard</span>
</a></li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Informes -->
<li class="nav-item">
<a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
<i class="glyphicon glyphicon-duplicate"></i>
<span>Informes</span>...