Ngorei NexaUI

<Card
 header="Header Card"
 content='(
    <h5  class="nx-card-title">Judul Card</h5>
    <p  class="nx-card-text">Ini adalah contoh konten card dasar. Card dapat berisi teks, gambar, dan elemen lainnya.</p>
    <button  class="nx-btn-primary">Tombol</button>
 )'
 footer="footer Card"/>

<Card  
  class="nx-card-gradient"
  content='(
    <h5  class="nx-card-title text-white">Card Gradient</h5>
    <p  class="nx-card-text text-white">Card dengan background gradient yang modern</p>
 )'/>

<Card  
  class="nx-card-floating"
  content='(
    <h5  class="nx-card-title">Card Floating</h5>
    <p  class="nx-card-text">Card dengan efek floating dan hover yang halus</p>
 )'/>

<Card  
  class="nx-card-borderless"
  header='<div  class="nx-card-icon">📱</div>'
  content='(
    <h5  class="nx-card-title">Card Borderless</h5>
    <p  class="nx-card-text">Card tanpa border dengan shadow yang lembut</p>
 )'/>

<Card  
  class="nx-card-glass"
  content='(
    <h5  class="nx-card-title">Card Glass</h5>
    <p  class="nx-card-text">Card dengan efek glassmorphism modern</p>
 )'/>

<Card
title="Card dengan Gambar Atas"
images="https://picsum.photos/id/1018/800/400">
    <p>Contoh card yang menggunakan gambar di bagian atas dengan konten di bawahnya.</p>
</Card>

<Card
title="Card dengan Overlay"
class="nx-card-overlay"
images="https://picsum.photos/id/1018/800/400">
  <p>Teks overlay di atas gambar dengan efek gradient.</p>
</Card>
              

<!-- Card Horizontal Basic -->
<div class="nx-card nx-card-horizontal">
  <div class="nx-card-side">
    <img src="https://picsum.photos/id/1016/400/600" alt="Architecture">
  </div>
  <div class="nx-card-body">
    <h5 class="nx-card-title">Card Horizontal</h5>
    <p class="nx-card-text">Layout card dengan gambar di samping dan konten di sebelahnya.</p>
    <button class="nx-btn nx-btn-outline-primary">Lihat Detail</button>
  </div>
</div>

<!-- Card Horizontal dengan List -->
<div class="nx-card nx-card-horizontal nx-card-list">
  <div class="nx-card-side">
    <div class="nx-card-number">01</div>
  </div>
  <div class="nx-card-body">
    <h5 class="nx-card-title">Card List Style</h5>
    <p class="nx-card-text">Format card horizontal yang cocok untuk daftar atau timeline.</p>
  </div>
</div>
          

<!-- Card Flip -->
  <Card  
   class="nx-card-flip"
   content='(
    <div  class="nx-card-inner">
    <div  class="nx-card-front">
      <div  class="nx-card-body">
        <h5  class="nx-card-title">Flip Card (Depan)</h5>
        <p  class="nx-card-text">Hover untuk membalik card</p>
      </div>
    </div>
    <div  class="nx-card-back">
      <div  class="nx-card-body">
        <h5  class="nx-card-title">Flip Card (Belakang)</h5>
        <p  class="nx-card-text">Informasi tambahan di sisi belakang</p>
      </div>
    </div>
  </div>
 )'/>

<!-- Card Expandable -->
<Card  
   class="nx-card-expandable"
   header='(
    <h5  class="nx-card-title">Card Expandable</h5>
    <button  class="nx-card-toggle">+</button>
 )'
 content='<p  class="nx-card-text">Konten yang dapat diperluas ketika tombol diklik.</p>'
 />

<!-- Card Group Basic -->
<div class="nx-card-group">
  <div class="nx-card">
    <div class="nx-card-body">
      <h5 class="nx-card-title">Card 1</h5>
      <p class="nx-card-text">Konten card pertama dalam grup.</p>
    </div>
  </div>
  <div class="nx-card">
    <div class="nx-card-body">
      <h5 class="nx-card-title">Card 2</h5>
      <p class="nx-card-text">Konten card kedua dalam grup.</p>
    </div>
  </div>
  <div class="nx-card">
    <div class="nx-card-body">
      <h5 class="nx-card-title">Card 3</h5>
      <p class="nx-card-text">Konten card ketiga dalam grup.</p>
    </div>
  </div>
</div>

<!-- Card Grid -->
<div class="nx-card-grid">
  <div class="nx-card">
    <div class="nx-card-body">
      <h5 class="nx-card-title">Grid Card 1</h5>
      <p class="nx-card-text">Card dalam layout grid.</p>
    </div>
  </div>
  ... (card lainnya)
</div>
          

<!-- Card Status Success -->
  <Card  
  class="nx-card-status nx-status-success"
  content='(
    <div  class="nx-status-indicator"></div>
    <h5  class="nx-card-title">Status Success</h5>
    <p  class="nx-card-text">Card dengan indikator status sukses</p>
 )'/>

<!-- Card Status Warning -->
 <Card  
 class="nx-card-status nx-status-warning"
 content='(
    <div  class="nx-status-indicator"></div>
    <h5  class="nx-card-title">Status Warning</h5>
    <p  class="nx-card-text">Card dengan indikator status peringatan</p>
 )'/>

<Card  
  class="nx-card-progress"
  content='(
    <h5  class="nx-card-title">Progress Card</h5>
    <div  class="nx-progress">
      <div  class="nx-progress-bar" style="width: 75%"></div>
    </div>
    <p  class="nx-card-text">75% Complete</p>
 )'/>

<Card  
  class="nx-card-tabs"
  header='(
        <ul  class="nx-tabs">
            <li  class="active">Profile</li>
            <li>Settings</li>
          </ul>
      )'
content='(
    <div  class="nx-tab-content active">
      <h5  class="nx-card-title">Profile Content</h5>
      <p  class="nx-card-text">Konten tab profile aktif</p>
    </div>
 )'/>

<Card  
   class="nx-card-timeline"
   content='(
    <div  class="nx-card nx-card-timeline-item">
    <div  class="nx-timeline-dot"></div>
    <div  class="nx-card-body">
      <h5  class="nx-card-title">Event 1</h5>
      <p  class="nx-card-text">Deskripsi event pertama</p>
    </div>
  </div>
  <div  class="nx-card nx-card-timeline-item">
    <div  class="nx-timeline-dot"></div>
    <div  class="nx-card-body">
      <h5  class="nx-card-title">Event 2</h5>
      <p  class="nx-card-text">Deskripsi event kedua</p>
    </div>
  </div>
 )'/>