JSFiddle - React, Tailwind, and code Playground

by leonsaysHi

HTML

<div class="page__content">
  <div class="content__cards">
    <div class="card -vstretch">
      <app_card>
        <div class="card-wrapper">
          <div class="card__title">Title</div>
          <div class="card__inner">
            <ng-component>
              <div class="card__content">Content</div>
            </ng-component>
          </div>
        </div>
      </app_card>
    </div>
    <div class="card">
      <app_card>
        <div class="card-wrapper">
          <div class="card__title">Title</div>
          <div class="card__inner">
            <ng-component>
              <div class="card__content">Content</div>
            </ng-component>
          </div>
        </div>
      </app_card>
    </div>
  </div>
</div>

SCSS

html,
body {
  padding: 0;
  margin:0;
  min-height: 100vh;
  background-color: red;
}

.page__content {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.content__cards {
  flex-grow: 1;
  display: flex;
  align-content: flex-start;  
  background-color: grey;
  .card {
    height: 200px;
    flex-grow: 0;
    flex-basis: 33%;
    position: relative;
    display: flex;
    flex-direction: column;
    border: solid 1px white;
    &.-hstretch { 
      flex-basis: 100%;
    }
    &.-vstretch {
      align-self: center;
      border-style: dotted;
    }
    app_card {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: solid 1px green;
      .card-wrapper {
        height: 100%;
        display: flex;
        flex-direction: column;
        border: solid 1px yellow;
        .card__title {
          flex: 0 0 auto;
          background-color: black;
          color: white;
        }
        .card__inner {
          flex: 1 0 0;
          position: relative;
          display: flex;
          flex-direction: column;
          position: relative;
          padding: 10px 5px 5px;
          background-color: white;
          ng-component {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            border: solid 1px red;
          }
        }
      }
    }
  }
}