JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<script src="https://material-components-web.appspot.com/assets/material-components-web.js"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500"></script>
<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<script src="https://material-components-web.appspot.com/assets/material-components-web.css.js"></script>
<main>
      <h1>MDC List</h1>
      <aside>
        <em>NOTE:</em> For the purposes of this demo, we've set a max-width of 600px on all
        <code>mdc-list</code> elements. This is not included in the base css, which has the list
        take up as much width as possible (since it's a block element).
      </aside>
      <div class="mdc-form-field">
        <div class="mdc-checkbox">
          <input type="checkbox"
                 class="mdc-checkbox__native-control"
                 id="toggle-rtl"
                 aria-labelledby="toggle-rtl-label" />
          <div class="mdc-checkbox__background">
            <svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
              <path class="mdc-checkbox__checkmark__path" fill="none" stroke="white"
                    d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
            </svg>
            <div class="mdc-checkbox__mixedmark"></div>
          </div>
        </div>
        <label for="toggle-rtl" id="toggle-rtl-label">Toggle RTL</label>
      </div>
      <div id="demo-wrapper">
        <section>
          <h2>Single-Line List</h2>
          <section>
            <h3>Text only</h3>
            <ul class="mdc-list">
              <li class="mdc-list-item">Single-line item</li>
              <li class="mdc-list-item">Single-line item</li>
              <li class="mdc-list-item">Single-line item</li>
            </ul>
          </section>
          <section>
            <h3>Text only (dense)</h3>
            <ul class="mdc-list mdc-list--dense">
              <li class="mdc-list-item">Single-line item</li>
              <li...

CSS

.mdc-list,
      .mdc-list-group {
        max-width: 600px;
      }
      .mdc-theme--dark {
        background: #303030;
      }
      .mdc-theme--dark > h3 {
        color: white;
      }
      .grey-bg {
        background: rgba(0, 0, 0, .26);
      }
      #icon-with-text-demo .mdc-list-item__start-detail {
        color: rgba(0, 0, 0, .54);
      }
      .mdc-theme--dark #icon-with-text-demo .mdc-list-item__start-detail {
        color: rgba(255, 255, 255, .7);
      }
      #avatar-text-icon-demo-list .mdc-list-item__end-detail {
        text-decoration: none;
        color: #ff4081; /* Pink A200 */
      }
      .two-line-avatar-text-icon-demo .mdc-list-item__start-detail {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: white;
      }
      .two-line-avatar-text-icon-demo .mdc-list-item__end-detail {
        color: rgba(0, 0, 0, .26);
        text-decoration: none;
      }
      .mdc-theme--dark .two-line-avatar-text-icon-demo .mdc-list-item__start-detail {
        background-color: rgba(255, 255, 255, .7);
        color: #303030;
      }
      .mdc-theme--dark .two-line-avatar-text-icon-demo .mdc-list-item__end-detail {
        color: rgba(255, 255, 255, .7);
      }