MODULAR: Tabs 1.0

  <!-- TABS START
Oh god this is so fragile, really don't use this if you can't navigate a code with some level of competence.
PLEASE pay attention to these header notes as you move around.
This module ALWAYS looks broken in code editors, check how it looks on your actual profile before you give up on it!

You can technically put Any of the modules in here but image modules will have some box stuff around them, especially the Ref Image module. You can also put multiple modules in the same tab. Probably don't put another tabs in though? I haven't tried but I think that would not work lol.

Just be mindful yknow.
-->
<div class="container-fluid px-0" style="max-width: 750px; letter-spacing: .45px;">
  <div class="row">
    <div class="col-12 p-2">
      <!--HEADER IMAGE -->
      <ul class="nav bg-dark" style="background: url(IMG HERE);
                                     background-size: cover;
                                     background-position: center;
                                     background-attachment: fixed;">
        <!--NAV TABS START
Please for the love of god don't add new tabs, it will break things and will make mobile users cry really hard.
Just change the titles.
If you want more things to be in tabs, just add another Tab module. Maybe put a few Images Modules inbetween. It'll be better that way.
Again, don't add more tabs, you're just gonna break it. -->
        <li class="nav-item">
          <a class="nav-link active text-uppercase text-light bg-dark" data-toggle="tab" style="letter-spacing:3px;" href="#TAB1">
            TITLE 1
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-uppercase text-light bg-dark" data-toggle="tab" style="letter-spacing:3px;" href="#TAB2">
            TITLE 2
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-uppercase text-light bg-dark" data-toggle="tab" style="letter-spacing:3px;" href="#TAB3">
            TITLE 3
          </a>
        </li>
        <!--NAV TABS END -->
        <div class="tab-content bg-dark p-2">
          <!--TAB1 START
This is the tab that's open on default, jsyk-->
          <div id="TAB1" class="tab-pane fade active show bg-dark">
            <!--PASTE ENTIRE MODULE HERE, DON'T CUT ANYTHING!!!!-->
          </div>
          <!--TAB1 END-->
          <!--TAB2 START-->
          <div id="TAB2" class="tab-pane fade bg-dark">
            <!--PASTE ENTIRE MODULE HERE, DON'T CUT ANYTHING!!!!-->
          </div>
          <!--TAB2 END-->
          <!--TAB3 START-->
          <div id="TAB3" class="tab-pane fade bg-dark">
            <!--PASTE ENTIRE MODULE HERE, DON'T CUT ANYTHING!!!!-->
          </div>
          <!--TAB3 END-->
        </div>
        </div>
    </div>
  </div>
    <!--TABS END -->