<div class="xui-container">
  
        <h1>Welcome to StyleXui</h1>
  <button class="xui-btn xui-btn-primary" xui-modal-open="example-modal">Open Modal</button>
    <div class="xui-modal" xui-modal="example-modal" xui-set="top-left" disable-click-on-outside="true">
        <div class="xui-modal-content">
            <img src="https://res.cloudinary.com/dabfoaprr/image/upload/v1742048476/Featured_icon_tav17q.png" alt="Featured icon" width="48" height="48" class="xui-img-[48px] xui-h-auto" />
            <h2 class="xui-font-sz-[20px] xui-mt-half">Blog post published</h2>
            <p class="xui-font-sz-[15px] xui-opacity-6 xui-w-fluid-95 xui-mt-half">This blog post has been published. Team members will be able to edit this post and republish changes.</p>
            <div class="xui-d-grid xui-grid-gap-1 xui-grid-col-2 xui-mt-2">
                <button class="xui-btn xui-btn-block xui-bdr-rad-half" xui-modal-close="example-modal">Close</button>
                <button class="xui-btn xui-btn-block xui-btn-primary xui-bdr-rad-half">Confirm</button>
            </div>
        </div>
    </div>
  <form class="xui-form xui-max-w-400 xui-mx-auto" xui-style="2">
    <div class="xui-form-box">
        <label for="email">Email</label>
        <input type="email" id="email" placeholder="olivia@untitledui.com" />
    </div>
    <div class="xui-form-box">
        <label for="description">Message</label>
        <textarea id="description"></textarea>
    </div>
</form>
        <p>Build modern, responsive, and accessible UIs with ease.</p>
  <table class="xui-table" xui-style="2">
    <thead>
        <tr>
            <th>Dish name</th>
            <th>Price</th>
            <th>Ingredient</th>
            <th>Tags</th>
            <th>Weekly Sales</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Jollof Rice & Chicken</td>
            <td>NGN 8,500</td>
            <td>Golden Sella Basmati Rice</td>
            <td>
                <span class="xui-badge xui-badge-green">Best Seller</span>
            </td>
            <td>
                <span class="xui-text-green">+1.2%</span> than last week
            </td>
        </tr>
        <tr>
            <td>Pounded Yam & Egusi Soup</td>
            <td>NGN 10,000</td>
            <td>Fresh melon seeds & goat meat</td>
            <td>
                <span class="xui-badge xui-badge-red">Traditional</span>
            </td>
            <td>
                <span class="xui-text-red">-0.4%</span> than last week
            </td>
        </tr>
        <tr>
            <td>Moi Moi & Pap</td>
            <td>NGN 5,000</td>
            <td>Beans pudding, fermented corn pap</td>
            <td>
                <span class="xui-badge xui-badge-blue">Breakfast</span>
            </td>
            <td>
                <span class="xui-text-red">-1.5%</span> than last week
            </td>
        </tr>
        <tr>
            <td>Banga Soup & Starch</td>
            <td>NGN 11,500</td>
            <td>Palm nut extract, fresh catfish</td>
            <td>
                <span class="xui-badge xui-badge-red">Delta Special</span>
            </td>
            <td>
                <span class="xui-text-red">-0.9%</span> than last week
            </td>
        </tr>
        <tr>
            <td>Peppersoup & Yam</td>
            <td>NGN 9,000</td>
            <td>Spicy broth, assorted meat</td>
            <td>
                <span class="xui-badge xui-badge-warning">Weekend Special</span>
            </td>
            <td>
                <span class="xui-text-green">+1.8%</span> than last week
            </td>
        </tr>
    </tbody>
</table>
  <div class="xui-pagination">
    <div class="prev">
        <div class="icon">&#9668;</div>
        <div class="text"><span>Previous</span></div>
    </div>
    <div class="pages">
        <div class="counter active">1</div>
        <div class="counter">2</div>
        <div class="counter">3</div>
        <div class="counter">...</div>
        <div class="counter">8</div>
        <div class="counter">9</div>
        <div class="counter">10</div>
        <div class="default">Page 1 of 10</div>
    </div>
    <div class="next">
        <div class="text"><span>Next</span></div>
        <div class="icon">&#9658;</div>
    </div>
</div>
        <button class="xui-btn xui-btn-primary">Get Started</button>
    </div>