<div id="content"></div>@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
body {
font-family: "Open Sans", sans-serif;
background: #f1f1f1;
}
.card {
background: #fff;
width: 300px;
text-align: center;
position: relative;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
margin:auto;
}
.card h1, h2, h3, h4, h5 {
margin:0.5rem;
}
.card .header {
height: 150px;
overflow: hidden;
background: #585858;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
}
.card .header .avatar img {
background: #3c93c5;
border-radius: 100%;
width: 140px;
height: 140px;
position: absolute;
border: 6px solid #ebebeb;
box-shadow: 0px 0px 1px #b7b7b7;
left: 0;
right: 0;
margin: auto;
top: 40px;
}
.card .body {
padding: 1rem;
padding-top: 3rem;
}
.skills {
font-size:12px;
}
.skills p {
border:1px solid #f1f1f1;
border-radius:5px;
padding:5px;
display:inline-block;
margin:0.2rem;
}const users = [
{
id: 1231,
name: "Amanda Smith",
location: "United States",
age: 26,
skills: ["Front End", "Web Design", "React"],
website: "www.designerlspower.com",
email: "amandasmiths23s@gfra.com",
bio: "I specialize in UX/UI design, Front End, and Web development",
picture: "https://robohash.org/hicveldicta.png"
}
];
class Header extends React.Component {
render() {
const avatar = this.props.user;
return (
<div class="header">
<div class="avatar">
<img src={avatar.picture} />
</div>
</div>
);
}
}
class Body extends React.Component {
render() {
const content = this.props.content;
return (
<div class="body">
<h2>{content.name}</h2>
<h5>{content.location}</h5>
<p>{content.bio}</p>
<div className='skills'>Skills:
{
content.skills.map((skill) => (
<p>{skill}</p>
))
}
</div>
</div>
);
}
}
class User extends React.Component {
render() {
const userJson = users.map((user) => (
<>
<Header key={user.id} user={user} />
<Body key={user.id} content={user} />
</>
));
return <div class="card">{userJson}</div>;
}
}
const element = <User />;
ReactDOM.render(element, document.getElementById("content"));
External CSS
This Pen doesn't use any external CSS resources.