Welcome to Preline AI

Your AI-powered copilot for the web

  • How can we help?

    You can ask questions like:

    • What's Preline UI?
    • How many Starter Pages & Examples are there?
    • Is there a PRO version?

  • what's preline ui?

    AZ

  • Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

    Here're some links to get started

  • what's preline ui figma?

    AZ

  • Preline UI Figma is the largest free design system for Figma, crafted with Tailwind CSS styles and Preline UI components with extra top-notch additions.

    With the features like:

    • 12-column Grid System
    • Easily find UI elements
    • Variants and Properties
    • Tailwind CSS Color styles
    • Auto layout and constraints

  • create a table example with preline using avatars, badges and progress bars

    AZ

  • Hold on a sec...

    Name
    Status
    Portfolio
    Created
    Image Description
    Christina Bersh christina@site.com
    Active
    1/5
    28 Dec, 12:12
    Image Description
    David Harrison david@site.com
    Warning
    3/5
    20 Dec, 09:27
    A
    Anne Richard anne@site.com
    Active
    5/5
    18 Dec, 15:20
    Image Description
    Samia Kartoon samia@site.com
    Active
    0/5
    18 Dec, 15:20

  • show me its code

    AZ

  • Of course! 

                    
                  <!-- Table Section -->
                  <div class="border border-gray-200 rounded-xl shadow-sm overflow-hidden dark:border-gray-700">
                    <!-- Table -->
                    <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                      <thead class="bg-gray-50 dark:bg-slate-800">
                        <tr>
                          <th scope="col" class="px-6 py-3 text-start">
                            <div class="flex items-center gap-x-2">
                              <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200">
                                Name
                              </span>
                            </div>
                          </th>

                          <th scope="col" class="px-6 py-3 text-start">
                            <div class="flex items-center gap-x-2">
                              <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200">
                                Status
                              </span>
                            </div>
                          </th>

                          <th scope="col" class="px-6 py-3 text-start">
                            <div class="flex items-center gap-x-2">
                              <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200">
                                Portfolio
                              </span>
                            </div>
                          </th>

                          <th scope="col" class="px-6 py-3 text-start">
                            <div class="flex items-center gap-x-2">
                              <span class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200">
                                Created
                              </span>
                            </div>
                          </th>
                        </tr>
                      </thead>

                      <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                        <tr>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <div class="flex items-center gap-x-3">
                                <img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full" src="https://images.unsplash.com/photo-1531927557220-a9e23c1e4794?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Image Description">
                                <div class="grow">
                                  <span class="block text-sm font-semibold text-gray-800 dark:text-gray-200">Christina Bersh</span>
                                  <span class="block text-sm text-gray-500">christina@site.com</span>
                                </div>
                              </div>
                            </div>
                          </td>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <span class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                <svg class="w-2.5 h-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                                </svg>
                                Active
                              </span>
                            </div>
                          </td>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <div class="flex items-center gap-x-3">
                                <span class="text-xs text-gray-500">1/5</span>
                                <div class="flex w-full h-1.5 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
                                  <div class="flex flex-col justify-center overflow-hidden bg-gray-800 dark:bg-gray-200" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                              </div>
                            </div>
                          </td>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <span class="text-sm text-gray-500">28 Dec, 12:12</span>
                            </div>
                          </td>
                        </tr>

                        <tr>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <div class="flex items-center gap-x-3">
                                <img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full" src="https://images.unsplash.com/photo-1568602471122-7832951cc4c5?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=facearea&facepad=2&w=300&h=300&q=80" alt="Image Description">
                                <div class="grow">
                                  <span class="block text-sm font-semibold text-gray-800 dark:text-gray-200">David Harrison</span>
                                  <span class="block text-sm text-gray-500">david@site.com</span>
                                </div>
                              </div>
                            </div>
                          </td>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <span class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-200">
                                <svg class="w-2.5 h-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                  <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                                </svg>
                                Warning
                              </span>
                            </div>
                          </td>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <div class="flex items-center gap-x-3">
                                <span class="text-xs text-gray-500">3/5</span>
                                <div class="flex w-full h-1.5 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
                                  <div class="flex flex-col justify-center overflow-hidden bg-gray-800 dark:bg-gray-200" role="progressbar" style="width: 78%" aria-valuenow="78" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                              </div>
                            </div>
                          </td>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <span class="text-sm text-gray-500">20 Dec, 09:27</span>
                            </div>
                          </td>
                        </tr>

                        <tr>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <div class="flex items-center gap-x-3">
                                <span class="inline-flex items-center justify-center h-[2.375rem] w-[2.375rem] rounded-full bg-gray-300 dark:bg-gray-700">
                                  <span class="font-medium text-gray-800 leading-none dark:text-gray-200">A</span>
                                </span>
                                <div class="grow">
                                  <span class="block text-sm font-semibold text-gray-800 dark:text-gray-200">Anne Richard</span>
                                  <span class="block text-sm text-gray-500">anne@site.com</span>
                                </div>
                              </div>
                            </div>
                          </td>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <span class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                <svg class="w-2.5 h-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                                </svg>
                                Active
                              </span>
                            </div>
                          </td>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <div class="flex items-center gap-x-3">
                                <span class="text-xs text-gray-500">5/5</span>
                                <div class="flex w-full h-1.5 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
                                  <div class="flex flex-col justify-center overflow-hidden bg-gray-800 dark:bg-gray-200" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                              </div>
                            </div>
                          </td>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <span class="text-sm text-gray-500">18 Dec, 15:20</span>
                            </div>
                          </td>
                        </tr>

                        <tr>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <div class="flex items-center gap-x-3">
                                <img class="inline-block h-[2.375rem] w-[2.375rem] rounded-full" src="https://images.unsplash.com/photo-1541101767792-f9b2b1c4f127?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&&auto=format&fit=facearea&facepad=3&w=300&h=300&q=80" alt="Image Description">
                                <div class="grow">
                                  <span class="block text-sm font-semibold text-gray-800 dark:text-gray-200">Samia Kartoon</span>
                                  <span class="block text-sm text-gray-500">samia@site.com</span>
                                </div>
                              </div>
                            </div>
                          </td>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <span class="inline-flex items-center gap-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200">
                                <svg class="w-2.5 h-2.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
                                </svg>
                                Active
                              </span>
                            </div>
                          </td>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <div class="flex items-center gap-x-3">
                                <span class="text-xs text-gray-500">0/5</span>
                                <div class="flex w-full h-1.5 bg-gray-200 rounded-full overflow-hidden dark:bg-gray-700">
                                  <div class="flex flex-col justify-center overflow-hidden bg-gray-800 dark:bg-gray-200" role="progressbar" style="width: 1%" aria-valuenow="1" aria-valuemin="0" aria-valuemax="100"></div>
                                </div>
                              </div>
                            </div>
                          </td>
                          <td class="h-px w-px whitespace-nowrap">
                            <div class="px-6 py-3">
                              <span class="text-sm text-gray-500">18 Dec, 15:20</span>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <!-- End Table -->
                  </div>
                  <!-- End Table Section -->

  • quiz me about tailwindcss

    AZ

  • Sure!

  • generate 3-dimensional abstract images

    AZ

  • Here you go...

    Deep Learning
    Deep Learning
    Deep Learning
    Deep Learning

  • what's tailwindcss?

    AZ

  • Tailwind CSS is an open source CSS framework. The main feature of this library is that, unlike other CSS frameworks like Bootstrap, it does not provide a series of predefined classes for elements such as buttons or tables.

  • 2 files uploaded

    • resume_web_ui_developer.csv
    • coverletter_web_ui_developer.pdf
    AZ