JSFiddle - React, Tailwind, and code Playground

HTML

<template>
  <div class="skills container" id="skills">
    <h1 class="mt">Skills</h1>
    <p class="text">I work in such progrmas as</p>
    <div class="programs">
      <div class="programs__program"
        v-for="(program, index) in programs"
        :key="index"
      >
        <div class="programs__program-logo">
          <img :src="program.logo.src" :width="program.logo.sizes.width" :height="program.logo.sizes.height" :alt="`program_${program.title}`">
        </div>
        <h3 class="programs__program-name">
         {{ program.title }}
        </h3>
        <div class="programs__program-rate">
          <img :src="program.rate">
        </div>
      </div>
    </div>
  </div>
</template>

JavaScript

<script>
import SkillsData from "./SkillsData.js";
export default {
  data() {
    return {
      programs: SkillsData.programs
    };
  },
}
</script>

import BlackstarImg from "@/assets/image/star-black.png";
import WhitestarImg from "@/assets/image/star-white.png";

import HtmlLogo from "@/assets/image/html-5.png";
import CssLogo from "@/assets/image/css.png";
import VueLogo from "@/assets/image/vue.png";
import FigmaLogo from "@/assets/image/figma.png"


export default {
  programs: [
    {
      logo: {
        src: HtmlLogo,
        sizes: {
          width: 88,
          height: 88
        },
      },
      title: 'HTML',
      rate: {
        src: BlackstarImg, BlackstarImg, BlackstarImg, BlackstarImg, WhitestarImg
      }
    },
    {
      logo: {
        src: CssLogo,
        sizes: {
          width: 88,
          height: 88
        },
      },
      title: 'Css',
      rate: {
        src: BlackstarImg, BlackstarImg, BlackstarImg, WhitestarImg, WhitestarImg
      }
    },
    {
      logo: {
        src: VueLogo,
        sizes: {
          width: 88,
          height: 88
        },
      },
      title: 'Vue.js',
      rate: {
        src: BlackstarImg, BlackstarImg, WhitestarImg, WhitestarImg, WhitestarImg
      }
    },
    {
      logo: {
        src: FigmaLogo,
        sizes: {
          width: 55,
          height: 88
        },
      },
      title: 'Figma',
      rate: {
        src: BlackstarImg, BlackstarImg, WhitestarImg, WhitestarImg, WhitestarImg
      }
    },
  ]
}