EN TR
<div class="component--table">
	<table>
		<caption>Suggested for you</caption>
		<thead>
		<tr>
			<th class="text-left">Topic</th>
			<th>Replies</th>
			<th>Views</th>
			<th>Activity</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td class="text-left">
				Tweaking jquery Timepicker.co
				<div class="label" style="--color: #6B94F7">General</div>
			</td>
			<td>6</td>
			<td>14</td>
			<td>4h</td>
		</tr>
		<tr>
			<td class="text-left">
				Footer Not Pinning to Bottom on Mobile
				<div class="label" style="--color: #F76B93">Bugs</div>
			</td>
			<td>6</td>
			<td>14</td>
			<td>4h</td>
		</tr>
		<tr>
			<td class="text-left">
				Custom slider dots
				<div class="label" style="--color: #FEB61C">Animations</div>
			</td>
			<td>6</td>
			<td>14</td>
			<td>4h</td>
		</tr>
		<tr>
			<td class="text-left">
				Dynamic landing page heading
				<div class="label" style="--color: #6B94F7">General</div>
			</td>
			<td>6</td>
			<td>14</td>
			<td>4h</td>
		</tr>
		</tbody>
		<tfoot>
		<tr>
			<td colspan="4" class="text-left">
				<a href="#">
					Load more topics
					<svg width="20px" height="18px" viewBox="0 0 20 18" version="1.1" xmlns="http://www.w3.org/2000/svg"
						 xmlns:xlink="http://www.w3.org/1999/xlink">
						<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
							<g id="Day-1202-UI-Components-Design" transform="translate(-350.000000, -784.000000)">
								<g id="Group-4" transform="translate(125.000000, 248.000000)">
									<g id="Group-3" transform="translate(35.000000, 508.000000)">
										<g id="Group" transform="translate(185.000000, 22.000000)">
											<polygon id="Path" points="0 0 30 0 30 30 0 30"></polygon>
											<path d="M6.25,15 L23.75,15" id="Path" stroke-width="1.875"
												  stroke-linecap="round" stroke-linejoin="round"></path>
											<path d="M16.25,22.5 L23.75,15" id="Path" stroke-width="1.875"
												  stroke-linecap="round" stroke-linejoin="round"></path>
											<path d="M16.25,7.5 L23.75,15" id="Path" stroke-width="1.875"
												  stroke-linecap="round" stroke-linejoin="round"></path>
										</g>
									</g>
								</g>
							</g>
						</g>
					</svg>
				</a>
			</td>
		</tr>
		</tfoot>
	</table>
</div>

<div class="divider"></div>

<div class="component--notified">
	<h3>Get notified</h3>
	<p>Do you want to get notified when people reply to your posts?</p>
	<a href="#">Enable Notifications</a>
</div>

<div class="divider"></div>

<div class="component--user-card">
	<time>
		<img src="img/icon-clock.svg" alt="">
		9:15
	</time>
	<img src="img/avatar.png" alt="">
	<div class="username">Fox-90</div>
	<div class="name">Inez Maxwell</div>
	<a href="#">Send message</a>
</div>
@import url('https://fonts.googleapis.com/css2?family=Mulish:[email protected];700&display=swap');

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  font-family: 'Mulish', sans-serif;

  &:focus {
    outline: 0;
  }
}

body {
  background: #F0F1F2;
  padding: 50px;
}

.divider {
  height: 50px;
}

.component {
  &--table {
    padding: 40px 35px 55px;
    background: #fff;
    border-radius: 10px;
    max-width: 960px;
    box-shadow: 0 14px 24px -13px rgba(#000454, .17);

    table {
      width: 100%;
      border-collapse: collapse;

      caption {
        font-size: 22px;
        font-weight: bold;
        color: #16132F;
        margin-bottom: 45px;
        text-align: left;
      }

      .text-left {
        text-align: left;
      }

      th, td {
        text-align: center;
      }

      thead {
        tr {
          th {
            font-size: 16px;
            color: #9C9C9F;
            padding-bottom: 15px;
            border-bottom: 2px solid #EEEEEE;
          }
        }
      }

      tbody {
        tr {
          td {
            padding: 18px 0;
            border-bottom: 1px solid #EEEEEE;
            font-size: 18px;
            color: #16132F;

            .label {
              margin-top: 5px;
              font-size: 14px;
              color: #16132F;
              display: flex;
              align-items: center;

              &::before {
                content: '';
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: var(--color);
                margin-right: 5px;
              }
            }
          }

          &:hover td {
            background: #f8f8f8;
          }

          &:last-child td {
            border-bottom: none;
          }
        }
      }

      tfoot {
        tr {
          td {
            padding-top: 27px;

            a {
              height: 73px;
              border: 1px solid #DDDDDD;
              display: inline-flex;
              align-items: center;
              padding: 0 25px;
              border-radius: 5px;
              font-size: 18px;
              color: #444CE9;
              transition: 300ms all;

              svg {
                margin-left: 15px;

                path {
                  stroke: #444CE9;
                  transition: 300ms all;
                }
              }

              &:hover {
                background: #444CE9;
                color: #fff;
                border-color: #444CE9;

                svg {
                  path {
                    stroke: #ffffff;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  &--notified {
    padding: 40px 30px;
    background: #444CE9;
    width: 313px;
    box-shadow: 0 20px 43px 0 rgba(#000454, .17);
    text-align: center;
    font-size: 16px;
    color: #fff;

    h3 {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 25px;
    }

    p {
      line-height: 25px;
      margin-bottom: 25px;
    }

    a {
      display: block;
      color: #fff;
      text-decoration: underline;
    }
  }

  &--user-card {
    padding: 60px;
    box-shadow: 0 20px 43px 0 rgba(#000454, .17);
    background: #fff;
    width: 338px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: #16132F;
    font-size: 16px;
    position: relative;

    time {
      position: absolute;
      top: 20px;
      right: 20px;
      display: flex;
      align-items: center;
      padding: 4px 10px;
      border: 1px solid #DDDDDD;
      border-radius: 16px;

      img {
        height: 20px;
        margin-right: 7px;
      }
    }

    > img {
      width: 138px;
      height: 138px;
      object-fit: cover;
      border-radius: 50%;
      margin-bottom: 20px;
    }

    .username {
      font-size: 22px;
      font-weight: bold;
      margin-bottom: 5px;
    }

    .name {
      margin-bottom: 35px;
    }

    a {
      width: 100%;
      background: #444CE9;
      height: 53px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 5px;
      color: #fff;
      transition: 300ms all;
      &:hover {
        background: darken(#444CE9, 5%);
      }
    }
  }
}