mail-information-card.css

mail-information-card {
  display: block;
  border-bottom: 2px solid #f0f2f3;
  cursor: pointer;
}

mail-information-card .mail-information-card__sender {
  display: flex;
}

mail-information-card .mail-information-card__sender-name {
  color: #686b6e;
  margin: 0;
  font-weight: bold;
  position: relative;
  font-size: 19px;
  flex: 1;
}

mail-information-card .mail-information-card__sender-time {
  margin: 4px 0;
  color: #d4d5d5;
  width: 75px;
}

.--label-color-ff7b6d {
  border-right: 4px solid #ff7b6d;
}

.--label-color-05bf80 {
  border-right: 4px solid #05bf80;
}

.--label-color-c76bef {
  border-right: 4px solid #c76bef;
}

mail-information-card .mail-information-card__subject {
  color: #73838e;
  margin: 0;
}

mail-information-card .mail-information-card__content {
  color: #a9afb7;
  margin: 5px 0;
}

mail-information-card .mail-information-card__sender-name.--read-false::before {
  content: '';
  height: 10px;
  width: 10px;
  background: #538fff;
  display: inline-block;
  border-radius: 50%;
  left: -20px;
  position: absolute;
  top: 5px;
}

mail-information-card input[name="mail-information-card"] {
  display: none;
}

mail-information-card input[name="mail-information-card"] + label {
  background: #f4f7f9;
  display: block;
  padding: 20px 0 20px 50px;
}

mail-information-card input[name="mail-information-card"]:checked + label {
  background: #ffffff;
}

mail-information-card.tsx

import { Component, Prop } from '@stencil/core';

@Component({
    tag: 'mail-information-card',
    styleUrl: 'mail-information-card.css'
})
export class MailInformationCard {

    @Prop() sender: string;
    @Prop() subject: string;
    @Prop() content: string;
    @Prop() isRead: boolean;
    @Prop() id: string;
    @Prop() time: string;
    @Prop() labelColor: string;

    generateRadioID() {
      return 'mail-information-card-' + this.id;
    }

    render() {
        return (
            <div>
              <input type="radio" name="mail-information-card"
                id={this.generateRadioID()} />
              <label htmlFor={this.generateRadioID()}>
                <div class="mail-information-card__sender">
                  <p class={"mail-information-card__sender-name --read-"
                    + this.isRead }>{this.sender}</p>
                  <p class={"mail-information-card__sender-time --label-color-"
                    + this.labelColor}>{this.time}</p>
                </div>
                <p class="mail-information-card__subject">{this.subject}</p>
                <p class="mail-information-card__content">{this.content}</p>
              </label>
            </div>
        );
    }
}