Overlapping avatars: convert SCSS to CSS and PUG to HTML

Question

I'm trying to create overlapping avatars in HTML and CSS. It is based on this code snippet. Only that this snippet is created in SCSS and PUG. How can I convert PUG to HTML and SCSS to CSS? I have a problem that the avatars are distant from each other and the name does not appear when you hover over the avatar.

Check code here .

import React from 'react';
import { render } from 'react-dom';

import './style.css';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
     todos: 
          [
            {name:'Tobias', avatar: 'https://vignette.wikia.nocookie.net/arresteddevelopment/images/7/77/2x01_The_One_Where_Michael_Leaves_%28098%29.png/revision/latest?cb=20121126025806'},
            {name:'Lindsey', avatar: 'https://vignette.wikia.nocookie.net/arresteddevelopment/images/1/16/Season_3_Character_Promos_-_Lindsay_Bluth_F%C3%BCnke_01.jpg/revision/latest?cb=20111027201233'},
            {name:'Buster', avatar: 'https://vignette.wikia.nocookie.net/arresteddevelopment/images/b/be/Season_3_Character_Promos_-_Buster_Bluth_01.jpg/revision/latest?cb=20111027201440'},
            {name:'George Michael', avatar: 'https://vignette.wikia.nocookie.net/arresteddevelopment/images/c/c3/Season_1_Character_Promos_-_George_Michael_Bluth_02.jpeg/revision/latest?cb=20120429230332'},
            {name:'Gob', avatar: 'https://vignette.wikia.nocookie.net/arresteddevelopment/images/0/02/Season_1_Character_Promos_-_G.O.B.jpeg/revision/latest?cb=20120429230530'},
            {name:'Michael', avatar: 'https://vignette.wikia.nocookie.net/arresteddevelopment/images/1/10/1x01_Pilot_%2839%29.png/revision/latest?cb=20120301050056'}
          ],
    };
  }

  render() {
    let todos = this.state.todos.map((todo, index) =>
      <Todo
        key={index}
        index={index}
        todo={todo}

      />
    )
    return (
      <div>
        <ul>{todos}</ul>
      </div>
    );
  }
}

class Todo extends React.Component {
  render() {
    const  Background = this.props.todo.avatar;
    const  name = this.props.todo.name;


const profile = {
    "&:hover&:after": {
      position: "absolute",
      content: `attr(${name})`,
      background: "rgba(255, 255, 255, .95)",
      color: "inherit",
      fontSize: "10px",
      padding: "4px",
      width: "auto",
      bottom: "-0.5rem",
      right: "-0.5rem",
      boxShadow: "0px 5px 12px rgba(0, 0, 0, .12)",
      opacity: "0",
      borderRadius: "0.15rem",
      animation: "fade 100ms ease 750ms forwards"
    } 
  }

    return (
      <ul className="c-profile__list">
        <li style={profile} className="c-profile" style={{backgroundImage: `url(${Background})`}}></li>
      </ul>
    );
  }
}

render(<App />, document.getElementById('root'));

CSS

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
html, body {
  width: 100%;
  height: 100%;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui;
  flex-direction: column;
  color: #2c2c54;
  font-size: 1.6rem;
}
.c-profile {
  width: 70px;
  height: 70px;
  border: 4px solid white;
  border-radius: 50%;
  box-shadow: 0px 3px 8px rgba(44, 44, 84, .2);
  display: inline-block;
  background: white;
  cursor: pointer;
  background-size: cover;
  background-position: center center;
  transition: all 200ms ease;
}
.c-profile:nth-of-type(n+2) {
  margin-left: -42px;
}
.c-profile:hover {
  transform: scale(1.2);
  box-shadow: 0px 8px 20px rgba(44, 44, 84, .2);
}
.c-profile:hover:after {
  position: absolute;
  content: attr(username);
  background: rgba(255, 255, 255, .95);
  color: inherit;
  font-size: 10px;
  padding: 4px;
  width: auto;
  bottom: -0.5rem;
  right: -0.5rem;
  box-shadow: 0px 5px 12px rgba(0, 0, 0, .12);
  opacity: 0;
  border-radius: 0.15rem;
  animation: fade 100ms ease 750ms forwards;
}
.c-profile__list {
  display: flex;
  position: relative;
  width: auto;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.c-profile__list:hover .c-profile:nth-of-type(n+2) {
  margin-left: 7px;
}
article {
  width: 100%;
  max-width: 600px;
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

ul {
  list-style: none;
  display: inline;
}

Answer 1

From a short look...

You are wrapping ul tags in a parent ul . Quick fix:

https://stackblitz.com/edit/react-ctuy4n?file=index.js

Answer 2

In your Todo , you need to remove the additional <ul> tag around each item and add your name as a title prop:

return (
        <li style={profile} className="c-profile" title={name} style={{backgroundImage: `url(${Background})`}}></li>
    );