JSFiddle - React, Tailwind, and code Playground

by james0n

HTML

<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<h2>
  Test environment for flex layouts
</h2>


Simple flex layouts.
<p>

  <small>Yes, they're simple.</small>

</p>

<div class="flexcontainer">
  <div>
    Hello
  </div>
  <div>
    And thank you very much!<br> Yes.
  </div>
</div>

<div class="container">
  <h1>First topic</h1>
  <h2>Sub topic</h2>
  <div class="stuffcontainer">

    <div class="stuff1">Some stuff</div>
    <div class="stuff2">Yeah</div>

    <div class="stuff3">78%</div>
  </div>
  <i class="fa fa-cog fa-spin"></i> It's alive.
  <i class="fa fa-cog fa-spin"></i> It's alive.
  <i class="fa fa-cog fa-spin"></i> It's alive.
  <i class="fa fa-cog fa-spin"></i> It's alive.

</div>
<!--p>


  Some inspiration from https://www.boozt.com/fi/fi/samsoe-samsoe/kronos-o-n-ss-273_3204186/18733317?navId=67805&group=listing&position=1000000

  <p>
    Layout building with blocks, inlines and inline-blocks:
  </p-->

<div class="cont-a">
  <div class="a1">
    a1
  </div>
  <div class="a2">
    a2
  </div>
  <div class="a3">
    <div class="a31">
      a31
    </div>
    <div class="a32">

      <div class="a321">
        a321
      </div>
      <div class="a322">
        a322
      </div>


    </div>

  </div>

  <div class="a4">
    a4
  </div>
  <div class="a5">
    a5
  </div>

</div>

<p>
  Layout building with flex
</p>

<div class="fcont-a">
  <div class="fa1">
    <i class="fa fa-large fa-black-tie"></i>
  </div>
  <div class="fa2">
    <i class="fa fa-circle"></i>
  </div>
  <div class="fa3">
    <div class="fa31">
      a31
    </div>
    <div class="fa32">

      <div class="fa321">
        A topic for the item
      </div>
      <div class="fa322">
        The description might be a little longer. But not much. Not really that much. No no no.
      </div>


    </div>

 ...

SCSS

body {
  font-family: 'Source Sans Pro';
  font-size:14px;
  color: #222;
  padding:2rem;
}

h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
}

.isblue {
  background-color:#dec;
padding-right:1.5rem;
  
}

.isgreen {
// border: 2px solid #eee;
 padding-right:1.5rem;
// padding-top:1.5rem;
}

.paddingtop1 {
 // margin-top:1rem;
}



.flexcontainer {
  display:flex;
  background-color:#399;
    align-items:left;
    padding:1.5rem;

 
  >* {
  //  padding:1rem;
    
  }

}

.container {
  
  h1 {
    letter-spacing:2px;
    font-size:20px;
    font-weight:400;
    padding: 12px 15px 0 0 ;
  }
  
    h2 {
    font-size:12px;
    font-weight:400;
  }
  
  i {
    padding: 12px 0px;
  }
  
  .stuff {
    font-size: 14px;
    padding: 10px 15px 0 0;
  }
  .stuffcontainer {
    padding: 10px 15px 0 0;
    
    .stuff1, .stuff2, .stuff3 {
      display: inline-block;
      padding-right:15px;
    }
    
    .stuff1 {
      font-size:14px;
      color:#c33;
    }
    
    .stuff3 {
      font-size:14px;
      color:#999;
    }
  }
}

.cont-a {
  background-color: #feca57;
  
  
  >div {
    vertical-align:middle;
    background-color: rgba(76, 175, 80, 0.3);
    padding:1em;
    display:inline-block;
  }
}

.a31, .a32 {
  vertical-align:middle;
  background-color: rgba(76, 76, 80, 0.3);
  display:inline-block;
  padding: 1em;
}

.fcont-a {
  background-color: #ff9f43;
  
  display:flex;
  align-items:center;
  padding:2em;
  
  >div {
    vertical-align:middle;
  //  background-color: rgba(76, 175, 80, 0.3);
    padding:1em;
  }
  .fa3 {
    flex-grow:18 !important;
    display:flex;
     align-items:center;
     padding: 0;
       >div {
    vertical-align:middle;
  //  background-color: rgba(76, 175, 80, 0.3);
    padding:1em;

  }
     
     .fa321 {
       font-weight:600;
       font-size: 16px;
     }
     
  }
}