Preadmin  Agent Banner

Introduction

Preadmin template have 13 themes including template. It has over 15+ tools that will help your business grow and enjoy the work in a team. A lead in Preadmin is multipurpose object containing information(Blog, Ecommerce, Voice and Video call, Chat system, File exchange, Task management and more) of a client, project, Team. This edition is built with Tailwind CSS.

Templates

Chat
Clinic
CRM
Hospital
Hotel
HRMS
Invoice
Job
POS
Rental
School
Service
Time

Requirement

Technologies
HTML
Tailwind CSS
Tailwind CSS
System Requirements
  • Text Editor
  • Visual Studio Code editor
  • Browser: Modern browsers (Chrome, Firefox, Safari, Edge)

Features

Preadmin offers powerful admin template and modern interface.

Built-in Applications
  • Build with Tailwind CSS utility classes
  • Compatible Browsers: IE8+, Firefox, Safari, Opera, Chrome
  • Dark, Light Supported
  • Various Sidebar Colours
  • Multiple Layouts
Layout Features
  • Creative Design
  • Fully Responsive
  • Color & Fonts is easily changed
  • W3C Validated Code
  • Google Fonts

File Structure

Project Overview

The project follows a modular structure with clear separation of concerns.

preadmin/
│
├── tailwind/
│   │
│   ├── chat
│   ├── clinic
│   ├── crm
│   ├── hospital
│   ├── hotel
│   ├── hrms
│   ├── invoice
│   ├── job
│   ├── pos
│   ├── rental
│   ├── school
│   ├── service
│   ├── time
	

Tailwind Structure

Structure Overview

Preadmin is powered by the utility-first Tailwind CSS framework, giving you complete control over responsive and mobile-first designs.

The following partial files have been added to the project: title-meta, header, footer and script.

Below is sample coding structure:


	<!DOCTYPE html>
		<html lang="en">
		<head>
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
			<title>Preadmin - Collection of Featured Tailwind Admin templates</title>
			<link rel="shortcut icon" href="assets/img/favicon.png">
			<link rel="stylesheet" href="assets/css/tailwind-dist.css">
			<link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
		</head>
		<body>
			<div class="main-wrapper">
				<div class="header">
				</div>
				<div class="breadcrumb-bar">
				</div>
				<div class="content">
					<div class="container-fluid">
					</div>
				</div>
			</div>
			<script src="assets/js/jquery-3.7.1.min.js"></script>
			<script src="assets/js/script.js"></script>
		</body>
	</html>
	

Javascripts

Script Overview

The Preadmin template includes a wide range of useful JavaScript plugins designed to enhance the user experience on your website. These plugins power features like menu sliders, booking, date & time pickers, and more.

You can find all the JS files organized in the js/ and plugins/ directories.

	<script src="assets/js/jquery-3.7.1.min.js"></script>
	<script src="assets/plugins/select2/js/select2.min.js"></script>
	<script src="assets/js/app.js"></script>

Installation

Prerequisites
Node.js Installation

Before installing Tailwind CSS, ensure you have Node.js installed on your system:

Install Tailwind CSS

If you use Node.js, you can also install Tailwind CSS using npm by running

npm install -D tailwindcss
npx tailwindcss init
Installation Steps
1
Unzip Template Files

After downloading, extract the Preadmin package. Inside, you will find the folder Tailwind (Source Code), which contains all necessary files.

2
Copy Files to Server

Open the Tailwind folder, then copy all files and paste them into your localhost directory (e.g., htdocs for XAMPP, www for WAMP) or directly into your web server's root folder.

3
Run in Browser

Once the files are in place, you can open the template in any modern web browser (Chrome, Firefox, Safari, Edge) from your PC or laptop. Simply navigate to localhost/preadmin/index.html or www.example.com/index.html or the domain where you uploaded the template.

Fonts

The default font is Inter. To change the font:

Update the @import URL and the font-family value in your tailwind.config.js:


	@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

	fontFamily: {
		sans: ['Noto Sans', 'sans-serif'],
	}
		

Color System

The design token variables are defined in the @theme block of your CSS file. Here are the primary color tokens:

Background Color Change

You can change the header background color in your Tailwind CSS as per your wish


	.header {
		background: #fff;
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		height: 60px;
	}
		

Dark Mode

How it Works

Dark mode is controlled by a theme attribute/class on the root element. When activated, all design tokens are overridden to dark variants.

The theme is controlled by the data-theme attribute on the <html> element:


	[data-theme="dark"] {
		background: $dark;
		color:$white
	}
		

Icons

Use Font Awesome icons with spesific class


	<!DOCTYPE html>
	<html lang="en">
		<head>
			<link rel="stylesheet" href="assets/plugins/tabler-icons/tabler-icons.css">
		</head>
	</html>


	<i class="ti ti-command">
	<i class="ti ti-user-up">
	<i class="ti ti-analyze">

Datatable


	<div class="table-responsive">
		<table class="table border-0 table-center mb-0 datatable">
			<thead>
				<tr>
					<th>
						<div class="form-check check-tables">
							<input class="form-check-input" type="checkbox"  value="something">
						</div>
					</th>
					<th>ID</th>
					<th>Name</th>
					<th>Class</th>
					<th>Subject</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						<div class="form-check check-tables">
							<input class="form-check-input" type="checkbox"  value="something">
						</div>
					</td>
					<td>10</td>
					<td>Mathematics</td>
					<td>A</td>
					<td>097 3584 5870</td>
				</tr>
			</tbody>
		</table>
	</div>

License

Preadmin is developed by Dreams Technologies and is available under both Envato Extended & Regular License options.

Regular License

Usage by either yourself or a single client is permitted for a single end product, provided that end users are not subject to any charges.

Extended License

For use by you or one client in a single end product for which end users may be charged.

What are the main differences between the Regular License and the Extended License?

Note

If you operate as a freelancer or agency, you have the option to acquire the Extended License, which permits you to utilize the item across multiple projects on behalf of your clients.

Support

Need Support?

If this documentation does not address your questions, please feel free to contact us via email at support@dreamstechnologies.com

Reach the team at GMT+5:30. Typical reply within 12–24 hours on weekdays — rarely up to 48 hrs during holidays. Support is available to verified buyers for template-related issues.

Contact Support

Important Note : We strive to offer top-notch support, but it's only available to verified buyers and for template-related issues such as bugs and errors. Custom changes and third-party module setups are not covered.

Custom Work

Do you need a customized application for your business?

If you need a customized application for your business depends on your specific requirements and goals, Please contact us. Customization can be the key to success, ensuring your project perfectly aligns with your unique goals and requirements.

Don't Miss Out on the Benefits of Customization!

Unlock the potential of your project. It's time to ensure your project isn't another cookie-cutter solution but truly unique and effective one.

Discover how customization can make a difference in your project's success. Let's create a solution that's as unique as your vision!

We'll tailor the application to meet your specific needs and preferences.

We will upload your website to the server and ensure it is live.

thanks

Thank You

Thank you once again for downloading Preadmin.
We hope you're enjoying your experience, and we kindly request that you take a moment to share your valuable review and rating with us.

Review Link