<div class="component">
    <h3>Tags used</h3>
    <div class="tags">
        <a href="#">Card UI</a>
        <a href="#">Free UI</a>
        <a href="#">UI Design Daily</a>
        <a href="#">UI components</a>
        <a href="#">UI design</a>
    </div>
</div>

<div class="component">
    <h3>Authors</h3>
    <ul class="authors">
        <li>
            <img src="avatar.png" alt="">
            <div class="detail">
                <div class="name">Polly Lawson</div>
                <div class="location">Bergen, Norway</div>
            </div>
            <a href="#" class="follow-btn">Follow</a>
        </li>
        <li>
            <img src="avatar.png" alt="">
            <div class="detail">
                <div class="name">Polly Lawson</div>
                <div class="location">Bergen, Norway</div>
            </div>
            <a href="#" class="follow-btn">Follow</a>
        </li>
    </ul>
</div>

<div class="component">
    <h3>Day 13010・People List UI Design</h3>
    <time>Published Mar 12, 2021</time>
    <ul class="project-actions">
        <li>
            <img src="icon-like.svg" alt="">
            47
        </li>
        <li>
            <img src="icon-eye.svg" alt="">
            3877
        </li>
        <li>
            <img src="icon-message.svg" alt="">
            975
        </li>
    </ul>
    <a href="#" class="like-btn">
        Like this project
    </a>
</div>

@import url('https://fonts.googleapis.com/css2?family=Mulish:[email protected];700&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    border: 0;
    outline: 0;
    text-decoration: none;
    font-family: 'Mulish', sans-serif;
    list-style: none;
}

html,
body {
    background: #F9EAE3;
    height: 100%;
}

body {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    position: relative;
    z-index: 1;
}

body::before {
    content: '';
    width: 736px;
    height: 736px;
    background: #FFC295;
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.component {
    background: #fff;
    width: 500px;
    min-width: 500px;
    padding: 30px 40px;
    border-radius: 10px;
    margin: 15px;
    box-shadow: 0 25px 60px -30px rgba(159, 70, 28, .6);
}
.component h3 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 10px;
}
.component time {
    font-size: 16px;
    color: #1A1B38;
    margin-bottom: 45px;
    display: block;
}
.component .tags {
    display: flex;
    flex-wrap: wrap;
    padding-top: 5px;
    margin: 0 -5px -5px;
}
.component .tags a {
    height: 40px;
    margin: 5px;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: bold;
    padding: 0 15px;
    border-radius: 5px;
    color: #1A1B38;
    border: 1px solid #1A1B38;
    transition: 300ms background-color;
}
.component .tags a:hover {
    background-color: #F9EAE3;
}

.component .authors {
    padding-top: 20px;
    color: #1A1B38;
}
.component .authors li {
    display: flex;
    align-items: center;
}
.component .authors li:not(:last-child) {
    margin-bottom: 30px;
}
.component .authors li img {
    width: 83px;
    height: 83px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}
.component .authors li .name {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}
.component .authors li .location {
    font-size: 16px;
    background: url(icon-location.svg) no-repeat 0;
    padding-left: 25px;
}
.component .authors li .follow-btn {
    margin-left: auto;
    height: 40px;
    display: flex;
    align-items: center;
    background: #FFC295;
    padding: 0 15px;
    border: 1px solid #1A1B38;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #1A1B38;
}
.component .project-actions {
    display: flex;
    justify-content: space-around;
    border: 1px solid rgba(26, 27, 56, .14);
    height: 89px;
    align-items: center;
    border-radius: 5px;
    margin-bottom: 25px;
}
.component .project-actions li {
    display: flex;
    align-items: center;
}
.component .project-actions li img {
    margin-right: 10px;
}
.component .like-btn {
    height: 54px;
    display: inline-flex;
    align-items: center;
    background: #FFC295;
    padding: 0 25px;
    border: 1px solid #1A1B38;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #1A1B38;
}