Components

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Documentation</a></li>
    <li class="is-active"><a href="#">Components</a></li>
  </ul>
</nav>
<nav class="breadcrumb has-arrow-separator is-centered">
  <ul>
    <li><a>One</a></li>
    <li><a>Two</a></li>
    <li class="is-active"><a>Three</a></li>
  </ul>
</nav>

<div class="card">
  <div class="card-header">
    <p class="card-header-title">Card Title</p>
  </div>
  <div class="card-content">Card content.</div>
  <div class="card-footer">
    <a class="card-footer-item">Action</a>
  </div>
</div>

<div class="dropdown is-active">
  <div class="dropdown-trigger">
    <button class="button">Dropdown</button>
  </div>
  <div class="dropdown-menu">
    <div class="dropdown-content">
      <a class="dropdown-item">Option 1</a>
      <a class="dropdown-item">Option 2</a>
      <hr class="dropdown-divider">
      <a class="dropdown-item">Another</a>
    </div>
  </div>
</div>

<div class="message is-info">
  <div class="message-header">Info</div>
  <div class="message-body">Message content.</div>
</div>
<div class="message is-success">
  <div class="message-header">Success</div>
  <div class="message-body">Operation successful.</div>
</div>

<button class="button is-primary" onclick="...">Open modal</button>
<div class="modal">
  <div class="modal-background"></div>
  <div class="modal-card">
    <div class="modal-card-head">
      <p class="modal-card-title">Title</p>
      <button class="delete"></button>
    </div>
    <div class="modal-card-body">Modal content</div>
    <div class="modal-card-foot">
      <button class="button">Cancel</button>
      <button class="button is-primary">Accept</button>
    </div>
  </div>
</div>

<nav class="navbar">
  <div class="navbar-brand">
    <a class="navbar-item">BulmaTailwind</a>
    <div class="navbar-burger">☰</div>
  </div>
  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
      <a class="navbar-item">Docs</a>
    </div>
  </div>
</nav>

<nav class="pagination">
  <a class="pagination-previous">Previous</a>
  <a class="pagination-next">Next</a>
  <ul class="pagination-list">
    <li><a class="pagination-link is-current">1</a></li>
    <li><a class="pagination-link">2</a></li>
    <li><a class="pagination-ellipsis">…</a></li>
  </ul>
</nav>

<div class="panel">
  <div class="panel-heading">Repositories</div>
  <div class="panel-block">Search...</div>
  <a class="panel-block">bulma-tailwind</a>
  <a class="panel-block">tailwind-css</a>
</div>

<div class="tabs">
  <ul>
    <li class="is-active"><a>Tab 1</a></li>
    <li><a>Tab 2</a></li>
    <li><a>Tab 3</a></li>
  </ul>
</div>
<div class="tabs is-toggle">
  <ul>
    <li class="is-active"><a>Active</a></li>
    <li><a>Inactive</a></li>
  </ul>
</div>