JSFiddle - React, Tailwind, and code Playground

by Sajeetharan Sinnathurai

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-messages.min.js"></script>
<script src="https://cdn.rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/angular/bower-material/master/angular-material.css">
<div class="tabsdemoDynamicHeight" ng-app="MyApp">
  <md-content class="md-padding">
    <md-tabs>
      <md-tab label="one">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab One</h1>
          <p>Lorem ipsum dolor </p>
        </md-content>
      </md-tab>
      <md-tab label="two">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Two</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        </md-content>
      </md-tab>
      <md-tab label="three">
        <md-content class="md-padding">
          <h1 class="md-display-2">Tab Three</h1>
          <p>Integer turpis erat, porttitor vitae mi faucibus, laoreet interdum tellus. Curabitur posuere molestie dictum. </p>
        </md-content>
      </md-tab>
    </md-tabs>
  </md-content>
</div>

CSS

.tabsdemoDynamicHeight md-content {
  background-color: transparent !important; }

  .tabsdemoDynamicHeight md-content md-tabs {
    background: #f6f6f6;
    border: 1px solid #e1e1e1; }

    .tabsdemoDynamicHeight md-content md-tabs md-tabs-canvas {
      background: red; } 
  
 .md-tab:first-child{background: green; } 
 .md-tab:nth-child(2){background: pink; } 
 .md-tab:nth-child(3){background: blue; }

JavaScript

angular.module('MyApp' );