MODULAR: Artsy Tabs 1.0

<!-- ARTSY 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!

For the most seamless look, use the same background settings for the tab and the modules. (So same image and size/position/attachment)

You can technically put Any of the modules in here but some will look better than others. You can also put more than one! 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 p-2" 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>
    <!--ARTSY TABS END -->