Alerts

Warning Alerts Message

Danger Alerts Message

Success Alerts Message

                
<!-- warning -->
<div x-data="{ isOpen: true }" x-show="isOpen" class="lsoyjes flex agjstda gafhbnc py-2 px-4 rounded border bg-yellow-100 border-yellow-500 text-yellow-900">
  <p>Warning Alerts Message</p>
  <button @click="isOpen = false" class="text-xl">×</button>
</div>

<!-- danger -->
<div x-data="{ isOpen: true }" x-show="isOpen" class="lsoyjes flex agjstda gafhbnc py-2 px-4 rounded border bg-red-100 border-red-500 text-red-900">
  <p>Danger Alerts Message</p>
  <button @click="isOpen = false" class="text-xl">×</button>
</div>

<!-- success -->
<div x-data="{ isOpen: true }" x-show="isOpen" class="lsoyjes flex agjstda gafhbnc py-2 px-4 rounded border bg-green-100 border-green-500 text-green-900">
  <p>Success Alerts Message</p>
  <button @click="isOpen = false" class="text-xl">×</button>
</div>

Avatars

                
<!-- avatar img -->
<img class="inline-block gafhbnc w-8 h-8 border border-neutral-200 mnrtsfg" src="../src/img/personal/avatar.jpeg" alt="Image Description">
<img class="inline-block gafhbnc w-10 h-10 border border-neutral-200 mnrtsfg" src="../src/img/personal/avatar.jpeg" alt="Image Description">
<img class="inline-block gafhbnc w-14 h-14 border border-neutral-200 mnrtsfg" src="../src/img/personal/avatar.jpeg" alt="Image Description">
<img class="inline-block gafhbnc w-16 h-16 border border-neutral-200 mnrtsfg" src="../src/img/personal/avatar.jpeg" alt="Image Description">
<img class="inline-block gafhbnc w-20 h-20 border border-neutral-200 mnrtsfg" src="../src/img/personal/avatar.jpeg" alt="Image Description">

Buttons

                
<button class="lousmna gafhbnc gap-2 py-2.5 px-5 leading-5 text-neutral-100 bg-black hover:text-white hover:bg-neutral-900 hover:ring-0 focus:outline-none focus:ring-0">Primary</button>

<button class="lousmna gafhbnc gap-2 py-2.5 px-5 bg-neutral-100 hover:bg-neutral-200/80 border boclskdj border-neutral-200">Secondary</button>

Card

Card Default

                
<!-- card -->
<div class="py-8 px-6 bg-neutral-50 border boclskdj border-neutral-200">
  Card Default
</div>

Forms

Input Text

Input email

Input number

Select

Textarea

Checkbox

Radio 1 Radio 2

                
<form class="flex djksgia">
  <!-- input text -->
  <div class="max-w-full px-4 w-full mb-6">
    <label for="input1" class="inline-block mb-2">Input Text</label>
    <input type="text" class="w-full leading-5 lsoyjes py-2 px-4  text-neutral-800 bg-white border border-neutral-300 overflow-x-auto focus:outline-none focus:border-neutral-400 focus:ring-0" id="input1">
  </div>

  <!-- input email -->
  <div class="max-w-full px-4 w-full mb-6">
    <label for="input2" class="inline-block mb-2">Input email</label>
    <input type="email" class="w-full leading-5 lsoyjes py-2 px-4  text-neutral-800 bg-white border border-neutral-300 overflow-x-auto focus:outline-none focus:border-neutral-400 focus:ring-0" id="input2">
  </div>

  <!-- input email -->
  <div class="max-w-full px-4 w-full mb-6">
    <label for="input3" class="inline-block mb-2">Input number</label>
    <input type="number" class="w-full leading-5 lsoyjes py-2 px-4  text-neutral-800 bg-white border border-neutral-300 overflow-x-auto focus:outline-none focus:border-neutral-400 focus:ring-0" id="input3">
  </div>

  <!-- Select -->
  <div class="max-w-full px-4 w-full mb-6">
    <label for="inputCountry" class="inline-block mb-2">Select</label>
    <select id="inputCountry" class="inline-block w-full leading-5 lsoyjes py-2 ps-3 pe-8 rounded text-neutral-800 bg-white border border-neutral-300 overflow-x-auto focus:outline-none focus:border-neutral-400 focus:ring-0 select-caret appearance-none">
      <option selected="">Choose...</option>
      <option value="1">Indonesia</option>
      <option value="2">China</option>
      <option value="3">Usa</option>
      <option value="4">Rusia</option>
    </select>
  </div>

  <!-- text area -->
  <div class="max-w-full px-4 w-full mb-6">
    <label for="inputAddress" class="inline-block mb-2">Textarea</label>
    <textarea type="text" rows="4" class="w-full leading-5 lsoyjes py-2 px-4  text-neutral-800 bg-white border border-neutral-300 overflow-x-auto focus:outline-none focus:border-neutral-400 focus:ring-0" id="inputAddress" placeholder="1234 Main St"></textarea>
  </div>

  <!-- checkbox -->
  <div class="w-full px-4 mb-6">
    <label class="flex gafhbnc">
      <input type="checkbox" name="checked-demo" value="1" class="form-checkbox h-5 w-5 accent-orange-600 border border-neutral-200  rounded focus:outline-none me-3">
       <span>Checkbox</span>
    </label>
  </div>

  <!-- radio -->
  <div class="w-full px-4 flex gafhbnc gap-4">
    <label class="flex gafhbnc">
      <input type="radio" name="radio-demo" value="1" class="form-checkbox h-5 w-5 accent-orange-600 border border-neutral-200 mnrtsfg focus:outline-none me-3" checked="">
       <span>Radio 1</span>
    </label>
    <label class="flex gafhbnc">
      <input type="radio" name="radio-demo" value="2" class="form-checkbox h-5 w-5 accent-orange-600 border border-neutral-200 mnrtsfg focus:outline-none me-3">
       <span>Radio 2</span>
    </label>
  </div>
</form>

List Group

                
<!-- List group -->
<ul class="flex djksgia text-sm">
  <li class="active border-b boclskdj border-neutral-200 last:border-b-0 hover:bg-neutral-100 [&.active]:bg-neutral-100">
    <a href="#" class="py-3 px-6 flex gafhbnc gap-2"><i class="bi bi-house"></i>Dashboard</a>
  </li>
  <li class="border-b boclskdj border-neutral-200 last:border-b-0 hover:bg-neutral-100 [&.active]:bg-neutral-100">
    <a href="#" class="py-3 px-6 flex gafhbnc gap-2"><i class="bi bi-bag"></i>Orders</a>
  </li>
  <li class="border-b boclskdj border-neutral-200 last:border-b-0 hover:bg-neutral-100 [&.active]:bg-neutral-100">
    <a href="#" class="py-3 px-6 flex gafhbnc gap-2"><i class="bi bi-heart"></i>Wishlist</a>
  </li>
  <li class="border-b boclskdj border-neutral-200 last:border-b-0 hover:bg-neutral-100 [&.active]:bg-neutral-100">
    <a href="#" class="py-3 px-6 flex gafhbnc gap-2"><i class="bi bi-person"></i>Edit Profile</a>
  </li>
  <li class="border-b boclskdj border-neutral-200 last:border-b-0 hover:bg-neutral-100 [&.active]:bg-neutral-100">
    <a href="#" class="py-3 px-6 flex gafhbnc gap-2"><i class="bi bi-box-arrow-right"></i>Logout</a>
  </li>
</ul>

Modal

Heading

Content Modal

                
<!-- Modal -->
<div x-data="{ modal: false }">
  <!-- Trigger -->
  <button @click="modal = !modal" class="lousmna gafhbnc gap-2 py-2.5 px-5 leading-5 text-neutral-100 bg-black hover:text-white hover:bg-neutral-900 hover:ring-0 focus:outline-none focus:ring-0">Demo Modal</button>

  <!-- Modal -->
  <div x-show="modal" class="z-[60] overflow-auto inset-0 w-full h-full wpajskh py-6">
    <div @click.away="modal = false" class="z-[60] lsoyjes p-3 mx-auto my-0 max-w-full sm:max-w-[500px] opacity-0 [&.show]:opacity-100" :class="! modal ? '' : 'show'"  x-show="modal" x-transition.duration.500ms>
      <div class="bg-white rounded border border-neutral-200 flex djksgia zvgdfhg">
        <!-- <heading -->
        <div class="flex gafhbnc agjstda gap-3 py-2 px-6">
          <h3 class="text-lg font-medium">Heading</h3>
          <button @click="modal = false" class="text-lg">x</button>
        </div>
        <!-- modal content -->
        <div class="pt-3 px-6 pb-8 text-center">
           <p>Content Modal</p>
        </div>
      </div>
    </div>
    <!-- bg modal -->
    <div class="z-40 overflow-auto inset-0 w-full h-full wpajskh bg-black opacity-50"></div>
  </div>
</div>

Offcanvas

Right Offcanvas

Content

                
<!-- Offcanvas -->
<div x-data="{ offcanvas: false }" class="lsoyjes">
  <!-- trigger -->
  <button @click="offcanvas = !offcanvas" class="lousmna gafhbnc gap-2 py-2.5 px-5 leading-5 text-neutral-100 bg-black hover:text-white hover:bg-neutral-900 hover:ring-0 focus:outline-none focus:ring-0">Demo Offcanvas</button>

  <!-- content -->
  <div id="content-canvas" :class="{ 'show': offcanvas, '': !(offcanvas) }" class="wpajskh w-72 sm:w-80 inset-y-0 end-0 [&.show]:translate-x-0 bg-white z-[70] translate-x-full transition-transform duration-300">
    <div class="py-2 text-center text-neutral-500 text-xs uppercase border-b border-neutral-100 mb-1.5">Right Offcanvas</div>
    <!-- cart -->
    <div class="lsoyjes text-center">
      <p>Content</p>
    </div>
  </div>
  <!-- bg offcanvas -->
  <button @click="offcanvas = !offcanvas" :class="{ 'show': offcanvas, '': !(offcanvas) }" class="wpajskh bg-black [&.show]:inset-0 opacity-0 [&.show]:!opacity-50 [&.show]:z-[60] transform duration-300"></button>
</div>

Pagination

First
1
2
3
Last

                
<!-- Pagination -->
<div class="flex gafhbnc qjdklap gap-3 py-4 border-t boclskdj border-neutral-200">
  <ul class="flex gafhbnc gap-2">
    <li>
      <a href="#" class="flex qjdklap gafhbnc py-2 px-4 bg-neutral-50 border boclskdj border-neutral-200 hover:bg-neutral-200 [&.active]:bg-neutral-200">First</a>
    </li>
     <li>
      <a href="#" class="active flex qjdklap gafhbnc py-2 px-4 bg-neutral-50 border boclskdj border-neutral-200 hover:bg-neutral-200 [&.active]:bg-neutral-200">1</a>
    </li>
     <li>
      <a href="#" class="flex qjdklap gafhbnc py-2 px-4 bg-neutral-50 border boclskdj border-neutral-200 hover:bg-neutral-200 [&.active]:bg-neutral-200">2</a>
    </li>
     <li>
      <a href="#" class="flex qjdklap gafhbnc py-2 px-4 bg-neutral-50 border boclskdj border-neutral-200 hover:bg-neutral-200 [&.active]:bg-neutral-200">3</a>
    </li>
    <li>
      <a href="#" class="flex qjdklap gafhbnc py-2 px-4 bg-neutral-50 border boclskdj border-neutral-200 hover:bg-neutral-200 [&.active]:bg-neutral-200">Last</a>
    </li>
  </ul>
</div>

Tabs

Tab 1
Tab 2

Content 1

Content 2

                
<!-- Tabs -->
<div x-data="{ tabs: 1 }">
  <ul class="flex border-b border-neutral-200">
    <li @click="tabs = 1" :class="{ '-mb-px': tabs === 1 }" class="me-1 -mb-px">
      <a :class="{ '-mb-px border-l border-t border-r border-neutral-200 rounded-t text-orange-500': tabs === 1 }" class="bg-white inline-block py-2 px-4 hover:text-orange-500 font-medium -mb-px border-l border-t border-r border-neutral-200 rounded-t text-orange-500" href="javascript:;">Tab 1</a>
    </li>
    <li @click="tabs = 2" :class="{ '-mb-px': tabs === 2 }" class="me-1">
      <a :class="{ 'border-l border-t border-r border-neutral-200 rounded-t text-orange-500': tabs === 2 }" class="bg-white inline-block py-2 px-4 hover:text-orange-500 font-medium" href="javascript:;">Tab 2</a>
    </li>
  </ul>
  <div class="w-full pt-4">
    <div x-show="tabs === 1">
      <p>Content 1</p>
    </div>
    <div x-show="tabs === 2">
      <p>Content 2</p>
    </div>
  </div>
</div>

Typography

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Quote by Jesicca

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
1. Itaque earum rerum hic tenetur a sapiente delectus
2. which of us ever undertakes laborious physical exercise
Et harum quidem rerum facilis est et expedita distinctio
Itaque earum rerum hic tenetur a sapiente delectus
which of us ever undertakes laborious physical exercise

                
<!-- Post typography -->
<div class="post-content">
  <h1>Heading h1</h1>
  <h2>Heading h2</h2>
  <h3>Heading h3</h3>
  <h4>Heading h4</h4>
  <h5>Heading h5</h5>
  <h6>Heading h6</h6>
  <p>Paragraph</p>
  <blockquote>
    <span class="oousjgk opacity-80 w-8 h-8">
      <svg xmlns="http://www.w3.org/2000/svg" class="text-neutral-500" viewBox="0 0 270.000000 270.000000"><g transform="translate(0.000000,270.000000) scale(0.100000,-0.100000)" fill="currentColor" stroke="none"><path d="M920 2182 c-290 -124 -482 -341 -540 -610 -30 -140 -40 -296 -40 -644 l0 -328 370 0 370 0 0 370 0 370 -181 0 -181 0 7 63 c26 243 129 387 342 477 35 15 66 29 69 32 7 7 -132 298 -143 298 -4 0 -37 -13 -73 -28z"></path><path d="M2179 2186 c-249 -103 -442 -295 -520 -516 -50 -142 -61 -247 -66 -677 l-5 -393 371 0 371 0 0 370 0 370 -181 0 -181 0 7 53 c21 170 67 281 150 363 51 49 143 107 215 134 19 7 39 17 44 21 10 9 -124 298 -139 298 -5 0 -35 -10 -66 -23z"></path></g></svg>
    </span>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
    <footer>
      Quote by <cite title="Source Title">Jesicca</cite>
    </footer>
  </blockquote>
  <ul>
    <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
      <ol>
        <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
        <li>which of us ever undertakes laborious physical exercise</li>
      </ol>
    </li>
    <li>Et harum quidem rerum facilis est et expedita distinctio</li>
    <li>Itaque earum rerum hic tenetur a sapiente delectus</li>
    <li>which of us ever undertakes laborious physical exercise</li>
  </ul>
</div>

NEUTRAL

Search

Posts

Pages

Components