User.js

const User = () => {
  return (
    <div className="container">
      <div className="row">
        <div className="col" style={{ backgroundColor: "#DEC7F5" }}>
          <p
            className="m-2"
            style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}
          >
            참여 중인 사용자
          </p>
          <div className="col m-3" xs={6} md={4}>
            <img
              src="/cherry.jpg"
              width="40"
              height="40"
              className="me-2 rounded-circle"
            />
            <img
              src="/cherry.jpg"
              width="40"
              height="40"
              className="me-2 rounded-circle"
            />
            <img
              src="/cherry.jpg"
              width="40"
              height="40"
              className="me-2 rounded-circle"
            />
          </div>
          <div className="col m-3" xs={6} md={4}>
            <img
              src="/cherry.jpg"
              width="40"
              height="40"
              className="me-2 rounded-circle"
            />
          </div>
        </div>
      </div>
      <div className="row">
        <div className="col" style={{ backgroundColor: "#BCB0C6" }}>
          <p
            className="m-2"
            style={{ fontWeight: "bold", color: "#4A4251", fontSize: "20px" }}
          >
            참여하고 있지 않은 사용자
          </p>
          <div className="col m-3" xs={6} md={4}>
            <img
              src="/cherry.jpg"
              width="40"
              height="40"
              className="me-2 rounded-circle"
            />
            <img
              src="/cherry.jpg"
              width="40"
              height="40"
              className="me-2 rounded-circle"
            />
            <img
              src="/cherry.jpg"
              width="40"
              height="40"
              className="me-2 rounded-circle"
            />
          </div>
          <div className="col m-3" xs={6} md={4}></div>
          <div className="col m-5"></div>
        </div>
      </div>
    </div>
  );
};

export default User;