<div id="app" class="container"></div>
@import 'https://fonts.googleapis.com/css?family=Share+Tech+Mono';
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css';
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100vw;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1376484/jess-harding-lqT6NAmTaiY-unsplash.jpg'),radial-gradient(#28a3dd, #0d7751);
background-size: cover;
background-position: center;
font-family: "Share Tech Mono", monospace;
font-size: 2rem;
background-blend-mode: multiply,screen, overlay;
}
#app {
position: relative;
background-size: cover;
background-position: center;
backdrop-filter: blur(20px);
background-color: rgba(255, 255, 255, 0.5);
border-radius: 5px;
box-sizing: border-box;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
transition: .3s ease;
margin: 2vw;
padding: 1vh;
display: flex;
justify-content: center;
align-items: center;
}
.profile {
background: #394264;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 80vh;
padding: 5vh;
margin: 1vh;
}
.avatar {
border: 5px solid #50597b;
width: 150px;
height: 150px;
overflow: hidden;
margin-bottom: 2vh;
border-radius: 5px;
&.round {
border-radius: 100%;
}
img {
max-width: 100%;
height: auto;
object-fit: cover;
object-position: center;
}
}
.name {
font-family: "Share Tech Mono", monospace;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,.35);
display: flex;
flex-direction: column;
align-items: center;
font-size: 5vh;
.fat {
font-size: 3vh;
color: #ccc;
margin: 1vh 0;
text-align: center;
}
}
View Compiled
const AvatarRound = ({user}) => {
return (
<div className="avatar round">
<img alt={user.name} src={user.avatarUrl} />
</div>
)
}
const AvatarSquare = ({ user }) => {
return (
<div className="avatar square">
<img alt={user.name} src={user.avatarUrl} />
</div>
)
}
const Profile = ({user, avatar, biography}) => {
return (
<div className="profile">
{avatar}
<div className="name">
{user.name}
{biography}
</div>
</div>
)
}
const Biography = ({user}) => {
return <p className="fat">{user.biography}</p>
}
const User = ({user}) => {
return (
<>
<Profile
user={user}
avatar={<AvatarRound user={user} />}
biography={<Biography user={user} />}
/>
<Profile
user={user}
avatar={<AvatarSquare user={user} />}
biography={<Biography user={user} />}
/>
</>
)
}
const user = {
avatarUrl: 'https://upload.wikimedia.org/wikipedia/commons/e/e1/Anne_Hathaway_Face.jpg',
name: 'Anne Hathaway',
biography: 'Lorem ipsum dolor sit amet consectetuer adipiscing'
}
ReactDOM.render(<User user={user} />, document.getElementById('app'));
View Compiled
This Pen doesn't use any external CSS resources.