Сделала кнопку добавления клиента

src/components/HeaderAddClientButton.vue

@@ -0,0 +1,28 @@
+<template lang="pug">
+  button.add-client-button.flex.items-center.justify-center
+    .icon-wrapper.flex.items-center.justify-center.icon-plus.text-xsm
+    .icon-wrapper.flex.items-center.justify-center.icon-person.text-m
+</template>
+
+<script>
+export default {
+  name: "HeaderAddClientButton",
+};
+</script>
+
+<style lang="sass" scoped>
+.add-client-button
+  width: 80px
+  height: 40px
+  background-color: var(--btn-blue-color)
+  color: var(--default-white)
+  border-radius: 4px
+  &:hover
+    background-color: var(--btn-blue-color-4)
+  &:active
+    background-color: var(--font-dark-blue-color)
+
+.icon-wrapper
+  width: 24px
+  height: 24px
+</style>

src/components/TheHeader.vue

@@ -6,6 +6,7 @@
     .charge-person-container
       header-charge-person(:info="chargePersonInfo")
     .flex.ml-auto
+      header-add-client-button.mr-9
       button.header-buttons.flex.justify-center.items-center.mr-8.p-0
         .icon-bell.text-xxl
       .flex.justify-centflexer.items-center
@@ -19,9 +20,10 @@ import img from "@/assets/images/avatar.svg";
 import chargePersonAvatar from "@/assets/images/charge-person-avatar.svg";
 import HeaderInputs from "./HeaderInputs.vue";
 import HeaderChargePerson from "./HeaderChargePerson.vue";
+import HeaderAddClientButton from "./HeaderAddClientButton.vue";
 export default {
   name: "TheHeader",
-  components: { HeaderInputs, HeaderChargePerson },
+  components: { HeaderInputs, HeaderChargePerson, HeaderAddClientButton },
   data() {
     return {
       avatarSrc: img,

tailwind.config.js

@@ -25,6 +25,7 @@ module.exports = {
       },
       spacing: {
         "6px": "6px",
+        "10px": "10px",
       },
     },
   },