Bootstrap 5 · Intermediate

Tilting FAQ Card

A 3D-tilting card with an expandable FAQ accordion inside.

Requires Bootstrap 5, Vanilla-Tilt. Add the CDN tags below to your page (styles in <head>, scripts before </body>). The downloaded file already includes them.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.8.1/dist/vanilla-tilt.min.js"></script>

<div data-tilt data-tilt-max="6" class="card border-0 shadow" style="max-width:340px"><div class="card-body">
  <h6 class="fw-bold mb-2">Quick help</h6>
  <div id="ftWrap">
    <div class="border-bottom"><button class="btn w-100 text-start small fw-semibold py-2 d-flex justify-content-between" data-ft>Reset password<span>+</span></button><div class="small text-secondary pb-2" style="display:none">Use the "Forgot password" link on the sign-in page.</div></div>
    <div><button class="btn w-100 text-start small fw-semibold py-2 d-flex justify-content-between" data-ft>Change plan<span>+</span></button><div class="small text-secondary pb-2" style="display:none">Go to Billing → Change plan anytime.</div></div>
  </div>
</div></div>

VanillaTilt.init(document.querySelector('[data-tilt]'),{max:6,speed:400});
document.querySelectorAll('#ftWrap [data-ft]').forEach(function(b){b.onclick=function(){var p=b.nextElementSibling,open=p.style.display==='none';p.style.display=open?'block':'none';b.querySelector('span').textContent=open?'−':'+'}});

Free to use.This component uses Bootstrap 5, Vanilla-Tilt (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.