JSFiddle - React, Tailwind, and code Playground

HTML

<!-- EDITED -->
<!-- ================================================================================= -->
<!-- ==================================================== -->
<!-- ==================================================== -->
<!-- CONTENTS =========================================== -->
<!-- ==================================================== --> 
<aside class="accordion">
  
<!-- MAIN BAR #2; #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 - #2 -->
<h1 class="customstyle">Freelance</h1>
  <div>

  <!-- SELECTION #3 ==================================================================================== -->
  <h2 class="customstyle">Project Year (2o13)</h2>
    <div>
      <!-- ITEM #1 ================================ -->
      <!-- ======================================== -->
      <h3 class="customstyle">Freelance For Company</h3>
      <div>
       
        <!-- SUB-ITEM #3 ========================================================== -->
        <h4 class="customstyle">JUL-13 | Video Test</h4>
        <!-- CONTENTS -->
        <p class="customstyle">
          <style>
            .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } 
            .embed-container iframe, .embed-container object, 
            .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
          </style>
          <span class='embed-container' style="display: block;">
            <iframe src='https://www.youtube.com/embed/hbmdOzWgyXU?rel=0&showinfo=0&autohide=1&start=0' frameborder='0' allowfullscreen></iframe>
          </span>
        </p>
      </div>
   
    </div>
  </div>
</aside>
  
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>



<!-- ==================================================== -->
<!-- ==================================================== -->
<!-- CSS STYLING ======================================== -->
<!--...