HTML Components

<!-- File: components/card.html -->
<div class="card bg-base-100 shadow-xl">
  <figure><img src="image.jpg" alt="Shoes" /></figure>
  <div class="card-body">
    <h2 class="card-title">Tiêu đề card</h2>
    <p>Nội dung...</p>
    <div class="card-actions"><button class="btn btn-primary">Mua</button></div>
  </div>
</div>

<!-- File: components/button.html -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-outline">Outline</button>

<!-- File: components/modal.html -->
<button class="btn" onclick="modal_1.showModal()">Open Modal</button>
<dialog id="modal_1" class="modal">
  <div class="modal-box">...</div>
</dialog>

<!-- File: components/navbar.html -->
<div class="navbar bg-base-100">
  <div class="flex-1"><a class="btn btn-ghost text-xl">Logo</a></div>
  <div class="flex-none"><ul class="menu menu-horizontal">...</ul></div>
</div>

<!-- File: components/alert.html -->
<div class="alert alert-info"><span>Thông báo</span></div>
<div class="alert alert-success"><span>Thành công!</span></div>
<div class="alert alert-error"><span>Lỗi!</span></div>

<!-- File: components/badge.html -->
<div class="badge badge-primary">Primary</div>
<div class="badge badge-secondary">Secondary</div>
<div class="badge badge-outline">Outline</div>