JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="module">
<h1>MODULE #1</h1>
<h2>NEUROSCIENCE OF LEARNING</h2>
<p>Understand what learning is on a fundamental level. Discover the brain&rsquo;s &ldquo;shortcut to learning&rdquo; and how to incorporate it into your environment. You&rsquo;ll learn how to develop critical skills in your audience like growth mindsets &amp; adaptive expertise guaranteeing engagement.</p>
</div>
<div class="module">
<h1>MODULE #2</h1>
<h2>THE NESTED EGG</h2>
<p>To ensure the brain can process new information when delivered, the information must be placed in the order in which the brain can process for long term memory, deep understanding, &amp; then act on that learning once delivered. The Nested Egg places your information in that order.</p>
</div>
<div class="module">
<h1>MODULE #3</h1>
<h2>THE CHALLENGE WHEEL</h2>
<p>The literal step-by-step process of delivering your information - online, face-to-face, blended - engaging your audience immediately, and co-collaborating a learning space where they uncover the information for themselves. Process, not memorization.  Jaw-dropping results follow!</p>
</div>
<div class="moduleclear"></div>

CSS

.module{
		display:inline-block;
		min-height:186px;
		padding:20px;
		width:calc(33.33% - 52px);
		float:left;
    font-family:helvetica;
    margin:5px;
    border:solid 1px #17AD8B;
    background-color:#f5f5f5;
	}
  .module>h1{
    font-size:18px;
    margin:0px;
    color:#17AD8B;
  }
  .module>h2{
    font-size:14px;
    margin:0px;
    color:#333;
  }
  .module>p{
    font-size:13px;
    margin:0px;
    margin-top:10px;
    padding:15px;
    color:#333;
    background-color:#fff;
  }
	.moduleclear{
		clear:both;
	}
  
  @media only screen and (max-width: 768px) {
    
  .module{
		display:block;
		min-height:50px;
		padding:20px;
		width:calc(100% - 52px);
		float:none;
    font-family:helvetica;
    margin:5px;
    border:solid 1px #17AD8B;
    background-color:#f5f5f5;
	}
    
  }