Stor8

<div class="col-xl-9 col-12 mt-5 mx-auto p-4 card-outline-secondary" style="border-width:2px; border-style:dashed; position:relative; border-radius:10px;">
    <div style="position:absolute; top:-40px; left:-25px; font-size: 3.8em; filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px -1px 0 white) drop-shadow(1px -1px 0 white) drop-shadow(-1px 1px 0 white); transform: rotate(-10deg); z-index: 1;">
        <i class="fa-duotone text-info fa-tickets"></i>
    </div>
    <div class="col-12 card bg-faded p-3" style="border-radius:10px; border-width:3px;">
        
    <div class="col-12 d-flex flex-wrap align-items-between p-0 m-0">
        <div class="col-xl-4 col-lg-5 col-12 py-0 pl-0 pr-3 mr-md-3 ml-md-3">
            <div class="sticky-top nav flex-column nav-pills">
                <a class="nav-link active" data-toggle="pill" href="#home" style="font-variant:small-caps; letter-spacing:1px; font-weight:600;"><i class="fa-solid text-success fa-lg fa-house mr-2"></i>Home</a>
                <hr class="w-100 mb-2">
                <a class="nav-link" data-toggle="pill" href="#myo-1"><i class="fa-duotone text-info fa-lg fa-ticket mr-2"></i>Species [ <span class="text-danger font-italic">Rarity</span> ]</a>
                <a class="nav-link" data-toggle="pill" href="#myo-2"><i class="fa-duotone text-info fa-lg fa-ticket mr-2"></i>Species [ <span class="text-danger font-italic">Rarity</span> ]</a>
                <a class="nav-link" data-toggle="pill" href="#myo-3"><i class="fa-duotone text-info fa-lg fa-ticket mr-2"></i>Species [ <span class="text-danger font-italic">Rarity</span> ] 🔞</a>
                <a class="nav-link" data-toggle="pill" href="#myo-4"><i class="fa-duotone text-info fa-lg fa-ticket mr-2"></i>Species [ <span class="text-danger font-italic">Rarity</span> ] <i class="fa-solid fa-alarm-clock text-info ml-1"></i></a>
                <a class="nav-link" data-toggle="pill" href="#myo-5"><i class="fa-duotone text-info fa-lg fa-ticket mr-2"></i>Species [ <span class="text-danger font-italic">Rarity</span> ]</a>
            </div>
        </div>

        <hr class="w-100 my-4 bg-secondary d-lg-none d-block" style="opacity:0.3;">
        
        <div class="tab-content col-xl-7 col-lg-6 col-12 ml-xl-5 ml-lg-4">
            
            <div class="tab-pane text-center fade show active p-3" id="home">
                <h1 class="text-info mb-3"><span style="font-weight:600">User</span>'s MYO Tracker</h1>
                <p class="mb-4" style="font-size:0.93em;"><i class="fa-duotone text-secondary fa-bracket-curly fa-lg"></i> for closed and semi-open species <i class="fa-duotone text-secondary fa-bracket-curly-right fa-lg"></i></p>
                <hr class="my-3 col-9">
                <p><i class="fa-duotone text-warning fa-box-archive mr-2"></i>Click on a tab to view slot details!<i class="fa-duotone text-warning fa-box-archive ml-2"></i></p>
                <hr class="my-3 col-9">
                <div class="card col-xl-5 col-lg-7 col-md-10 col-12 mx-auto p-0 mt-4">
                    <div class="bg-primary text-dark pb-1 rounded-top border-0"><h2 class="mb-0 font-weight-bold">Keys</h2></div>
                    <div class="col-12 d-flex mt-2 p-0">
                        <div class="col-1" style="font-size:1.1em;">🔞</div>
                        <div class="col-11">18+ Species <span class="text-secondary">*</span></div>
                    </div>
                    <hr class="w-100 my-2">
                    <div class="col-12 d-flex mb-2 p-0">
                        <div class="col-1"><i class="fa-solid fa-lg fa-alarm-clock text-info"></i></div>
                        <div class="col-11">Has expiration date</div>
                    </div>
                    <hr class="w-100 my-2">
                    <div class="col-12 d-flex mb-2 p-0">
                        <div class="col-1"><i class="fa-solid fa-lg fa-key-skeleton text-secondary"></i></div>
                        <div class="col-11">[add more keys here]</div>
                    </div>
                </div>
                <div class="col-xl-5 col-lg-7 col-md-10 col-12 mx-auto p-0 mt-1 text-center text-secondary"><sup>* does not necessarily mean NSFW</sup></div>
            </div>
            
            <div class="tab-pane text-center fade pr-2" id="myo-1">
                <div class="sticky-top">
                    <div class="card pt-1">
                        <h1 style="font-variant:small-caps;"><a href="#" style="text-decoration:none;"><i class="fa-duotone fa-book mr-2"></i> Species</a></h1>
                    </div>
                </div>
                <div class="d-flex">
                    <img class="my-5 mx-auto col-lg-4 col-6" src="https://i.ibb.co/hcjq0FD/ticket-graphic.png">
                </div>
                <div class="card p-0">
                    <table class="table table-striped border-0 m-0">
                      <tbody>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Obtained from</td>
                          <td class="pr-3 col-6 text-right"><a href="#">Event</a></td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Rarity</td>
                          <td class="pr-3 col-6 text-right">Rarity</td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Additional Traits</td>
                          <td class="pr-3 col-6 text-right">Traits</td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Ticket</td>
                          <td class="pr-3 col-6 text-right"><a href="">#000</a></td>
                        </tr>
                      </tbody>
                    </table>
                </div>
            </div>
            
            <div class="tab-pane text-center fade pr-2" id="myo-2">
                <div class="sticky-top">
                    <div class="card pt-1">
                        <h1 style="font-variant:small-caps;"><a href="#" style="text-decoration:none;"><i class="fa-duotone fa-book mr-2"></i> Species</a></h1>
                    </div>
                </div>
                <div class="d-flex">
                    <img class="my-5 mx-auto col-lg-4 col-6" src="https://i.ibb.co/hcjq0FD/ticket-graphic.png">
                </div>
                <div class="card p-0">
                    <table class="table table-striped border-0 m-0">
                      <tbody>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Obtained from</td>
                          <td class="pr-3 col-6 text-right"><a href="#">Event</a></td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Rarity</td>
                          <td class="pr-3 col-6 text-right">Rarity</td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Additional Traits</td>
                          <td class="pr-3 col-6 text-right">Traits</td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Ticket</td>
                          <td class="pr-3 col-6 text-right"><a href="">#000</a></td>
                        </tr>
                      </tbody>
                    </table>
                </div>
            </div>
            
            <div class="tab-pane text-center fade pr-2" id="myo-3">
                <div class="sticky-top">
                    <div class="card pt-1">
                        <h1 style="font-variant:small-caps;"><a href="#" style="text-decoration:none;"><i class="fa-duotone fa-book mr-2"></i> Species</a></h1>
                    </div>
                </div>
                <div class="d-flex">
                    <img class="my-5 mx-auto col-lg-4 col-6" src="https://i.ibb.co/hcjq0FD/ticket-graphic.png">
                </div>
                <div class="card p-0">
                    <table class="table table-striped border-0 m-0">
                      <tbody>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Obtained from</td>
                          <td class="pr-3 col-6 text-right"><a href="#">Event</a></td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Rarity</td>
                          <td class="pr-3 col-6 text-right">Rarity</td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Additional Traits</td>
                          <td class="pr-3 col-6 text-right">Traits</td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Ticket</td>
                          <td class="pr-3 col-6 text-right"><a href="">#000</a></td>
                        </tr>
                      </tbody>
                    </table>
                </div>
            </div>
            
            <div class="tab-pane text-center fade pr-2" id="myo-4">
                <div class="sticky-top">
                    <div class="card pt-1">
                        <h1 style="font-variant:small-caps;"><a href="#" style="text-decoration:none;"><i class="fa-duotone fa-book mr-2"></i> Species</a></h1>
                    </div>
                </div>
                <div class="text-danger mt-1"><b>Due Date:</b> MM/DD/YY</div>
                <div class="d-flex">
                    <img class="my-5 mx-auto col-lg-4 col-6" src="https://i.ibb.co/hcjq0FD/ticket-graphic.png">
                </div>
                <div class="card p-0">
                    <table class="table table-striped border-0 m-0">
                      <tbody>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Obtained from</td>
                          <td class="pr-3 col-6 text-right"><a href="#">Event</a></td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Rarity</td>
                          <td class="pr-3 col-6 text-right">Rarity</td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Additional Traits</td>
                          <td class="pr-3 col-6 text-right">Traits</td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Ticket</td>
                          <td class="pr-3 col-6 text-right"><a href="">#000</a></td>
                        </tr>
                      </tbody>
                    </table>
                </div>
            </div>
            
            <div class="tab-pane text-center fade pr-2" id="myo-5">
                <div class="sticky-top">
                    <div class="card pt-1">
                        <h1 style="font-variant:small-caps;"><a href="#" style="text-decoration:none;"><i class="fa-duotone fa-book mr-2"></i> Species</a></h1>
                    </div>
                </div>
                <div class="d-flex">
                    <img class="my-5 mx-auto col-lg-4 col-6" src="https://i.ibb.co/hcjq0FD/ticket-graphic.png">
                </div>
                <div class="card p-0">
                    <table class="table table-striped border-0 m-0">
                      <tbody>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Obtained from</td>
                          <td class="pr-3 col-6 text-right"><a href="#">Event</a></td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Rarity</td>
                          <td class="pr-3 col-6 text-right">Rarity</td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Additional Traits</td>
                          <td class="pr-3 col-6 text-right">Traits</td>
                        </tr>
                        <tr class="d-flex no-wrap">
                          <td class="pl-3 col-6 text-left">Ticket</td>
                          <td class="pr-3 col-6 text-right"><a href="">#000</a></td>
                        </tr>
                      </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>

<div class="col-xl-9 col-12 mt-1 mx-auto mb-5 pr-1 text-right">
    <a class="text-secondary" data-toggle="tooltip" data-placement="top" title="code by dragon-heist" href="https://toyhou.se/dragon-heist"><i class="fa-regular fa-code"></i></a>
</div>