<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rippleui/dist/css/styles.css" />
<script src="https://cdn.tailwindcss.com"></script>
<div class="navbar ">
  <div class="navbar-start">
    <a class="navbar-item">Ripple UI</a>
  </div>
  <div class="navbar-end ">
    <a class="navbar-item">Home</a>
    <a class="navbar-item">About</a>
    <a class="navbar-item">Contact</a>
  </div>
</div>
<div class="breadcrumbs text-sm ">
  <ul>
    <li>
      <a>Home</a>
    </li>
    <li>
      <a>Library</a>
    </li>
    <li>Add Data</li>
  </ul>
</div>
<div class="flex w-full overflow-x-auto ">
  <table class="table">
    <thead>
      <tr>
        <th>Type</th>
        <th>Where</th>
        <th>Description</th>
        <th>Amount</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>1</th>
        <td>Cy Ganderton</td>
        <td>Quality Control Specialist</td>
        <td>Blue</td>
      </tr>
      <tr>
        <th>2</th>
        <td>Hart Hagerty</td>
        <td>Desktop Support Technician</td>
        <td>Purple</td>
      </tr>
      <tr>
        <th>3</th>
        <td>Brice Swyre</td>
        <td>Tax Accountant</td>
        <td>Red</td>
      </tr>
    </tbody>
  </table>
</div>
<div class="card card-image-cover">
  <img src="https://source.unsplash.com/random/300x200" alt="" />
  <h2 class="card-header">Hello World!</h2>
  <div class="card-body">
    <p class="text-content2">
      I really like the cats! lorem ipsum dolor sit amet, consectetur adipiscing
      elit.
    </p>
  </div>
  <div class="card-footer">
    <button class="btn btn-secondary">Buy a Cat</button>
  </div>
</div>

.navbar,
.breadcrumbs,
.flex,
.card {
  margin-bottom: 1em;
}