Introduction

Brutalism is Tailwind dashboard template with Neobrutalism style. This template is perfect for make professional dasboard admin for your site. Equipped with layouts, pages and various kinds of widgets to speed up the dashboard building process.

Get Started

Start development in a simple way

1. Open brutalism folder from terminal

2. Run
npm install
3. Start development
npm run dev

4. Development server http://localhost:3000/

5. Start editing the html file and the server will reload automatically after the html changes

6. If you need minify css, Run
npm run build

Starter Template

            
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Brutalism - Tailwind Admin Neubrutalism</title>

  <!-- Custom styles -->
  <link rel="stylesheet" href="../src/css/style.css">

  <link rel="icon" type="image/png" sizes="32x32" href="../src/img/favicon.png">

  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;900&display=swap" rel="stylesheet">

  <!-- local icons -->
  <link rel="stylesheet" id="icons" href="../vendors/bootstrap-icons/font/bootstrap-icons.min.css">
</head>
<body x-data="{ sidebar: false }">
  <!-- header -->
  <header>
    <!-- toggle -->
    <button @click="sidebar = ! sidebar">
      <i class="bi bi-list text-black dark:text-white"></i>
    </button>
  </header>

  <!-- sidebar -->
  <aside id="sidebar" :class="! sidebar ? '' : 'show'">
    <!-- sidebar content -->
  </aside>

  <!-- main -->
  <main class="content-compact z-10 relative mt-24 lg:ms-64 transition-all duration-500 ease-in-out overflow-y-auto px-4 lg:px-6 py-1">
    <!-- content -->
  </main>

  <footer class="py-2 lg:ms-64">
    <p class="text-center text-sm">Copyright
      <script>document.write(new Date().getFullYear())</script>
    </p>
  </footer>

  <!-- alpine js -->
  <script src="../vendors/alpinejs/dist/cdn.min.js"></script>
</body>

</html>
              
            
              
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Brutalism - Tailwind Admin Neubrutalism</title>

  <!-- Custom styles -->
  <link rel="stylesheet" href="../src/css/style.css">

  <link rel="icon" type="image/png" sizes="32x32" href="../src/img/favicon.png">

  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;900&display=swap" rel="stylesheet">

  <!-- local icons -->
  <link rel="stylesheet" id="icons" href="../vendors/bootstrap-icons/font/bootstrap-icons.min.css">
</head>
<body>
  <!-- header -->
  <header>
    <!-- toggle -->
    <button data-type="toggle" data-target="#sidebar">
      <i class="bi bi-list text-black dark:text-white"></i>
    </button>
  </header>

  <!-- sidebar -->
  <aside id="sidebar" class="-translate-x-full lg:translate-x-0 [&.show]:translate-x-0">
    <!-- sidebar content -->
  </aside>

  <!-- main -->
  <main class="content-compact z-10 relative mt-24 lg:ms-64 transition-all duration-500 ease-in-out overflow-y-auto px-4 lg:px-6 py-1">
    <!-- content -->
  </main>

  <footer class="py-2 lg:ms-64">
    <p class="text-center text-sm">Copyright
      <script>document.write(new Date().getFullYear())</script>
    </p>
  </footer>
  
  <!-- vanilla javascript -->
  <script src="../src/js/script.js"></script>
</body>

</html>

More Info

The default template uses Alpine JS, but if you want to use Vanilla JavaScript, we also provide a starter template.

Starter template available in Starter folder.

How to customize template? Start customize