Converting Figma CSS into Vue.js component - What are best practises here?

Question

I roughly designed my webapp layout Figma using the layout element's CSS provided by it. I am running a Vue.js 2 SPA and now want to have my first hands on design to html/css convertion into a Vue.js component. I did it as simple as I could get my head around CSS and all that.

Using the BEM CSS convention (that helped me a lot to keep the overview) I put all the Figma's elements CSS into CSS classes of my Vue component. I then created several div for each (BEM) block.

Some visuals and content to follow along

Example.vue

<template>
  <v-container fluid>
    <div class="storage__header"></div>
    <div class="storage__header-text">Storage</div>
    <div class="storage__table-body"></div>
    <div class="storage__table-header"></div>
    <div class="storage__table-header-type">Type</div>
    <div class="storage__table-header-amount">Amount</div>
  </v-container>
</template>

<script>

export default {
  name: 'SettlementStorage',
}
</script>
<style>
.storage__header-text {
  position: absolute;
  width: 166px;
  height: 35.04px;
  left: 3px;
  top: 258px;

  font-family: Aref Ruqaa,monospace;
  font-style: normal;
  font-weight: normal;
  font-size: 35px;
  line-height: 55px;
  display: flex;
  align-items: center;
  text-align: center;

  color: #000000;
}
.storage__header {: width:;
  position: absolute;
  width: 359px;
  height: 42px;
  left: -7px;
  top: 258px;
  background: #8F7F59;
  border-radius: 0px 200px 15px 0px;
}
.storage__table-header-amount {
  position: absolute;
  width: 100.42px;
  height: 27.33px;
  left: 235.65px;
  top: 309.91px;

  font-family: Aref Ruqaa,monospace;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 23px;
  text-align: center;

  color: #000000;
}
.storage__table-header-type {
  position: absolute;
  width: 78.55px;
  height: 24.53px;
  left: 10.94px;
  top: 309.91px;

  font-family: Aref Ruqaa,monospace;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 23px;
  text-align: center;

  color: #000000;
}
.storage__table-header {
  position: absolute;
  width: 350px;
  height: 42.74px;
  left: -2px;
  top: 305px;
  background: linear-gradient(180deg, rgba(48, 41, 25, 0.25) 60.66%, rgba(55, 66, 63, 0) 100%);
}
.storage__table-body {
  position: absolute;
  width: 360px;
  height: 341.96px;
  left: -7px;
  top: 300.04px;

  background: #C2B391;
  border: 5px solid #37423F;
  box-sizing: border-box;
  border-radius: 0px 0px 20px 0px;
}
</style>

Having this as the result:

So don't get me wrong here. I am super happy everything still looks like it has been designed in Figma. However as a Backend Engineer I feel a bit odd. I am very sure that I made a very naive approach here - using only div elements to apply the CSS styling.

Is this the way to do it? Or should I now start to refactor all of that into the proper way of styling those elements. I am very lost and don't really know what I should ask for or what I should google for in regards of best practises.