MODULAR: Tabs 1.0-Cardo

<!-- 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="row">
    <div class="col-12 mb-3">
      <div class="card"  style="background: url(IMG HERE);
                                     background-size: cover;
                                     background-position: center;
                                     background-attachment: fixed;">
      <!--HEADER IMAGE -->
      <ul class="nav">
        <!--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="card nav-item">
          <a class="nav-link active text-uppercase" data-toggle="tab" style="letter-spacing:3px;" href="#TAB1">
            TITLE 1
          </a>
        </li>
        <li class="card nav-item">
          <a class="nav-link text-uppercase" data-toggle="tab" style="letter-spacing:3px;" href="#TAB2">
            TITLE 2
          </a>
        </li>
        <li class="card nav-item">
          <a class="nav-link text-uppercase" data-toggle="tab" style="letter-spacing:3px;" href="#TAB3">
            TITLE 3
          </a>
        </li>
        <!--NAV TABS END -->
        <div class="tab-content"  style="background: url(IMG HERE);
                                     background-size: cover;
                                     background-position: center;
                                     background-attachment: fixed;">
          <!--TAB1 START
This is the tab that's open on default, jsyk-->
          <div id="TAB1" class="tab-pane fade active show">
            <!--PASTE ENTIRE MODULE HERE, DON'T CUT ANYTHING!!!!-->

          </div>
          <!--TAB1 END-->
          <!--TAB2 START-->
          <div id="TAB2" class="tab-pane fade">
            <!--PASTE ENTIRE MODULE HERE, DON'T CUT ANYTHING!!!!-->



          </div>
          <!--TAB2 END-->
          <!--TAB3 START-->
          <div id="TAB3" class="tab-pane fade">
            <!--PASTE ENTIRE MODULE HERE, DON'T CUT ANYTHING!!!!-->

          </div>
          <!--TAB3 END-->
        </div>
        </div>
    </div>
  </div>
    <!--TABS END -->