JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<div class="funnel">
  <h2>Endorsed by <img src="https://braincentricdesign.com/assets/funnel/gartner.png" /> <img src="https://braincentricdesign.com/assets/funnel/nola.jpg" class="bigger" /> </h2>
  <h1>Brain- centric Transformation</h1>
  <div class="col-40">
    <video poster="https://braincentricdesign.com/assets/funnel/video.placeholder.1.png" controls>
      <source src="https://braincentricdesign.com/assets/funnel/Ozioma-Egwuonwu-BcIDTestimonial.mp4" type="video/mp4">
    </video>
    <p class="small-centered">
    Ozioma Egwuonwu, an internationally celebrated speaker, transformational thought- leader, storyteller, and visionary master
strategist at BurnBright International in New York &amp; Lisbon, recently became a certified Brain- centric Instructional Designer.
    </p>
  </div>
  <div class="col-60">
    <p>
    <strong>There's a reason 3 of Nike's top courses (on the Nike U internal
portal) were created by a BcID.</strong> In this new world of blended
learning and online- engagement, you can now get certified as a
BcID &amp; learn to create L&amp;D programs with over 90% engagement
that transform your workplace and your career.
    </p>
    <button>
    Find out if you qualify for BcID certification 👉
    </button>
    <q>Upon implementing Brain- centric Design at Nike, our training time and attrition were reduced
substantially, and our learners (athletes) not only understood their positions better, but also reached
their goals faster and were scored higher by our consumers on customer satisfaction surveys.</q>
<span class="smalltext"><strong>Learning Director @ Nike</strong><br />
Michele Jordan</span>
  </div>
  <div class="col-clear"></div>
  <h2>
  BcIDs transform world leading cultures
  </h2>
  <h2><img src="https://braincentricdesign.com/assets/funnel/aetna.png" class="bigger" /> <img src="https://braincentricdesign.com/assets/funnel/nike.png" class="bigger" /> <img src="https://braincentricdesign.com/assets/funnel/ms.png" class="bigger"...

CSS

.funnel{
  max-width: 900px;
  margin: auto;
  font-family: helvetica, serif;
  padding-top: 30px;
  padding-bottom: 30px;
}
.funnel a{
  color: #0994ff;
}
.funnel h1{
  text-align: center;
  font-size: 44px;
  margin-top: 40px;
  margin-bottom: 10px;
  color: #111;
}
.funnel h1.smaller{
  font-size: 31px;
}
.funnel h2{
  text-align: center;
  font-size: 21px;
  margin-top: 20px;
  margin-bottom: 30px;
}
.funnel h2 img{
  height: 40px;
  vertical-align: middle;
  margin-left: 10px;
}
.funnel h2 img.bigger{
  height: 60px;
}
.funnel h2 img.larger{
  height: 50px;
}
.funnel .col-33{
  width: calc(33.33% - 24px);
  display: inline-block;
  vertical-align: top;
  padding: 10px;
  font-size: 13px;
  line-height: 17px;
}
.funnel .col-33 h3{
  font-size: 13px;
  text-align: center;
}
.funnel .col-33margined{
  width: calc(33.33% - 54px);
  margin: 25px;
  display: inline-block;
  vertical-align: top;
}
.funnel .col-33margined img{
  width: 100%;
  margin-bottom: 3px;
}
.funnel .col-33margined p{
  font-size: 12px;
}
.funnel .col-40{
  width: 40%;
  display: inline-block;
  vertical-align: top;
}
.funnel .col-40 video{
  width: 100%;
}
.funnel .col-60{
  padding: 15px;
  width: calc(60% - 40px);
  display: inline-block;
  vertical-align: top;
}
.funnel .col-clear{
  clear: both;
}
.funnel p{
  font-size: 12pt;
  margin-top: 0px;
}
.funnel p.small-centered{
  text-align: center;
  font-size: 10px;
}
.funnel p.centered{
  text-align: center;
}
.funnel img.resultsimage{
  width: 80%;
  margin: auto;
  display:block;
}
.funnel button{
  margin: auto;
  display: block;
  border-radius: 8px;
  background-color: #fff;
  border: solid 1px #666;
  padding: 6px;
  padding-left: 12px;
  padding-right: 12px;
  cursor: pointer;
  transition: all 0.4s;
  min-width: 320px;
}
.funnel button:hover{
  transform: scale(1.1);
}
.funnel button.bigbutton{
  transform: scale(1.5);
  margin-top:30px;
}
.funnel button.bigbutton:hover{
  transform: scale(1.6);
}
.funnel .legend{
  max-width:...