Profile Card Component using Tailwind CSS

Tailwindcss is a good choice.

In your project, i see that you did not use the configuration file. If you want to continue your journey with tailwindcss, i strongly recommend that you set a nice config before begining the project.

The code below give you an example of a configuration made for a frontend mentor challenge.

• If you dont need the default tailwindcss values for a property you can replace them in the theme object. (e.g. For my project i replaced the tailwindcss default colors with mine because i dont need the tailwindcss colors).
• If you need the default tailwindcss values for a property but you want to add more values, you can declare them in the extend object. (e.g. i extended the font family stack by adding 2 custom font family)

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    screens: {
      "sm": "375px",
      "md": "768px",
      "lg": "968px",
    },
    colors: {
      "transparent": "transparent",
      "bright-orange": "hsl(31, 77%, 52%)",
      "dark-cyan": "hsl(184, 100%, 22%)",
      "very-dark-cyan": "hsl(179, 100%, 13%)",
      "transparent-white": "hsla(0, 0%, 100%, 0.75)",
      "very-light-gray": "hsl(0, 0%, 95%)",
    },
    minHeight: {
      "48": "3rem",
    },
    fontSize: {
      "15": ["0.9375rem", { lineHeight: "1.5625rem" }],
      "15-button": ["0.9375rem", { lineHeight: "1" }],
      "40": ["2.5rem", { lineHeight: "1" }],
    },
    fontWeight: {
      "400": "400",
      "700": "700",
    },
    borderRadius: {
      "8": "0.5rem",
      "full": "9999px",
    },
    extend: {
      fontFamily: {
        heading: [
          'Big Shoulders Display',
          ...defaultTheme.fontFamily.sans,
        ],
        body: [
          "Lexend Deca",
          ...defaultTheme.fontFamily.sans,
        ],
      },
    },
  },
  plugins: [],
}

👾Hello Yaika Race, Congratulations on completing this challenge!

Great solution and great start! By what I saw you’re on the right track. I’ve few suggestions to you that you can consider to add to your code:

Your solution its already good, something you can do to improve the card responsiveness is create a media query for the stats section and make each stat number stay in a different row after max-width: 350px using a media query, here's the code for that:

@media (max-width: 350px) {
.flex {
    display: flex;
    flex-direction: column;
}
}

✌️ I hope this helps you and happy coding!