JSFiddle - React, Tailwind, and code Playground

by lemniscus

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<div class="container mt-3">
  <div class="card">
    <div class="card-body">
      <h5 class="card-title" style='border-bottom: 3px solid #0d6efd;display:inline-block;padding-right:30px;'>LEISTUNG</h5>
      <div class="card-text">
        Frühestens am Donnerstag, den TT.MM.JJJJ um HH:MM Uhr<br>
      </div>
      <div style='font-style:italic;'>
        Leistungsbeschreibung
      </div>
      <a href="#appointmentDetails" class="btn btn-link" data-bs-toggle="collapse">5 Terminvorschläge ansehen</a>
      <div class="collapse" id="appointmentDetails">
        <div class="card card-body">
          <ul class="list-group">
            <li class="list-group-item">Montag, 20.04.2024, 10:00 Uhr</li>
            <li class="list-group-item">Dienstag, 21.04.2024, 11:00 Uhr</li>
            <li class="list-group-item">Mittwoch, 22.04.2024, 14:00 Uhr</li>
            <li class="list-group-item">Donnerstag, 23.04.2024, 16:00 Uhr</li>
            <li class="list-group-item">Freitag, 24.04.2024, 09:00 Uhr</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>