Documentation
Components
HTML

HTML

Welcome to the HTML Components section of TailGrids documentation! Here, we'll explore everything you need to know about integrating and utilizing TailGrids HTML Components in your web projects.

Prepare to effortlessly integrate powerful, pre-designed TailGrids components into your HTML pages. Learn how to access, implement, and customize them to suit your requirements.

How to Access TailGrids HTML Components

To access TailGrids HTML Components:

Step #1: Visit the TailGrids Components Page (opens in a new tab).

Step #2: Browse through the available components or use the search functionality to find specific components. ( Use the search feature to locate the elements you need. )

Step #3: Choose the component to preview and click on the HTML option to view code snippets.

html code

Step #4: Copy the HTML code snippet to use.

How to Use TailGrids HTML Components

Using TailGrids HTML Components is straightforward:

  1. Paste: Paste the copied HTML code snippet into your HTML file within the appropriate section.
  2. Customize: Customize the component's attributes, classes, and content to fit your design.
  3. Save and Preview: Save your file and preview the changes in your web browser.

Let's get hands-on!

Example

In this example, we'll find a button component in TailGrids HTML components, copy its code, and integrate it into a sample HTML page.

  1. Search for "Button": On the TailGrids Components Page (opens in a new tab), use the search bar to find "button" components.
  2. Choose Your Button: Browse the results and select the button style that best suits your project's needs. Click on it to preview.
  3. Copy the Code: Make sure you're on the "HTML" tab and copy the provided HTML code snippet.
  4. Create an HTML File:  Continue after Step #6 of Installation of the HTML version; open a code editor and use the existing or create a new file named index.html (or any name you prefer).
<a
  href="javascript:void(0)"
  class="inline-flex items-center justify-center rounded-full border border-dark bg-dark px-7 py-3 text-center text-base font-medium text-white hover:border-body-color hover:bg-body-color disabled:border-gray-3 disabled:bg-gray-3 disabled:text-dark-5 dark:border-dark-2 dark:bg-dark-2"
>
  Button
</a>
  1. Paste and Preview: Now, Paste the code you copied, Save the index.html file, run the localhost server, and open it in your web browser. Your button should be rendered on the page!

💡 Important Note: Ensure you've set up the TailGrids in your HTML project using the npm package or CDN to work properly.

Customization: Now experiment by changing colors and text and using Tailwind CSS classes directly within the HTML.

Let's create a beautiful HTML project with TailGrids!

ComponentsReact