Dice.tsx

import React from 'react'
import cx from 'helpers/cx'

import s from './style.module.css'

interface DiceProps {
  number: number
}

const Dice: React.FC<DiceProps> = ({ number }) => (
  <div className={cx(s.dice, s[number])}>
    {number >= 0 && number <= 6 ? (
      new Array(number)
        .fill(null)
        .map((_, index) => <div key={`${number}-${index}`} className={s.dot} />)
    ) : (
      <div className={s.number}>{number}</div>
    )}
  </div>
)

export default Dice

style.module.css

.dice {
  height: 33px;
  width: 33px;
  color: var(--c-main);
  box-sizing: border-box;
  border: 1px solid var(--c-main);
  border-radius: 5px;
  position: relative;

  & .number {
    width: 100%;
    height: 100%;
    text-align: center;
    margin-top: 6px;
  }

  & .dot {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--c-main);
    margin-left: -2.5px;
    margin-top: -2.5px;
    border-radius: 50%;
  }

  &.1 {
    & .dot:nth-child(1) {
      left: 50%;
      top: 50%;
    }
  }

  &.2,
  &.3,
  &.5 {
    & .dot:nth-child(1) {
      left: 25%;
      top: 75%;
    }

    & .dot:nth-child(2) {
      left: 75%;
      top: 25%;
    }

    & .dot:nth-child(3) {
      left: 50%;
      top: 50%;
    }

    & .dot:nth-child(4) {
      left: 25%;
      top: 25%;
    }

    & .dot:nth-child(4) {
      left: 25%;
      top: 25%;
    }

    & .dot:nth-child(5) {
      left: 75%;
      top: 75%;
    }
  }

  &.4,
  &.6 {
    & .dot:nth-child(1) {
      left: 25%;
      top: 25%;
    }

    & .dot:nth-child(2) {
      left: 75%;
      top: 25%;
    }

    & .dot:nth-child(3) {
      left: 25%;
      top: 75%;
    }

    & .dot:nth-child(4) {
      left: 75%;
      top: 75%;
    }

    & .dot:nth-child(5) {
      left: 50%;
      top: 25%;
    }

    & .dot:nth-child(6) {
      left: 50%;
      top: 75%;
    }
  }
}