JSFiddle - React, Tailwind, and code Playground

by metulev

HTML

<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<mgt-mock-provider></mgt-mock-provider>

<mgt-get resource="/me/messages" version="beta" scopes="mail.read" max-pages="2">
  <template>
    <div class="email" data-for="email in value">
      <h4>
        <mgt-person person-query="{{email.sender.emailAddress.address}}" show-name person-card="hover"></mgt-person>
      </h4>
      <h3>{{ email.subject }}</h3>
      <div data-if="email.bodyPreview" class="preview" innerHtml>{{email.bodyPreview}}</div>
      <div data-else class="preview">
        email body is empty
      </div>
    </div>
  </template>
  <template data-type="loading">
    loading
  </template>
  <template data-type="error">
    {{ this }}
  </template>
</mgt-get>

CSS

.email {
  box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
  padding: 10px;
  margin: 8px 4px;
  font-family: Segoe UI, Frutiger, Frutiger Linotype, Dejavu Sans, Helvetica Neue, Arial, sans-serif;
}

.email:hover {
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.3);
  padding: 10px;
  margin: 8px 4px;
}

.email h3 {
  font-size: 12px;
  margin-top: 4px;
}

.email h4 {
  font-size: 10px;
  margin-top: 0px;
  margin-bottom: 0px;
}

.email mgt-person {
  --font-size: 10px;
  --avatar-size-s: 12px;
}

.email .preview {
  font-size: 13px;
  text-overflow: ellipsis;
  word-wrap: break-word;
  overflow: hidden;
  max-height: 2.8em;
  line-height: 1.4em;
}