Home
Siva Naga Malleswararao Kurakula
Employee Data Management System TailwindCSS,Html

Employee Data Management System TailwindCSS,Html

This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

This tailwind example is contributed by Siva Naga Malleswararao Kurakula, on 13-Feb-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us,Admin Dashboard, User dashboard,Front page

Feature showcase Navigations Dashboard Landing Page

Author Siva Naga Malleswararao Kurakula

441

Fork Fullscreen

<nav class="fixed top-0 left-0 w-full bg-white shadow-md py-3 px-6 flex justify-between items-center z-50">
    
    <a href="features" class="text-xl font-bold text-gray-800 hover:text-red-500">Employee Management</a>

<div class="space-x-6 hidden md:flex">
        <a href="#" class="text-gray-700 hover:text-blue-500">Entire DB</a>
        <a href="#" class="text-gray-700 hover:text-blue-500">Employee</a>
        <a href="#" class="text-gray-700 hover:text-blue-500">Addition</a>
        <a href="#" class="text-gray-700 hover:text-blue-500">Modification</a>
        <a href="#" class="text-gray-700 hover:text-blue-500">Deletion</a>
    </div>

<a class="bg-red-500 text-white px-4 py-2 rounded-md hover:bg-red-600" href="#" >Logout</a>
</nav>

<div class="mt-16"></div>

<div
		class="items-center max-w-screen-xl px-4 py-8 mx-auto lg:grid lg:grid-cols-4 lg:gap-16 xl:gap-24 lg:py-24 lg:px-6">
		<div class="col-span-2 mb-8">
			<p class="text-lg font-medium text-purple-500 dark:text-purple-500">Trusted Worldwide</p>
			<h2 class="mt-3 mb-4 text-3xl font-extrabold tracking-tight text-gray-900 md:text-3xl dark:text-white">
				Trusted
				by over 600 million users and 10,000 teams</h2>
			<p class="font-light text-gray-500 sm:text-xl dark:text-gray-400">Our rigorous security and compliance
				standards
				are at the heart of all we do. We work tirelessly to protect you and your customers.</p>
			<div class="pt-6 mt-6 space-y-4 border-t border-gray-200 dark:border-gray-700">
				<div>
					<button (click)="fetchUsers()" id="123" class="inline-flex items-center text-base font-medium text-purple-500 hover:text-purple-800 dark:text-purple-500 dark:hover:text-purple-700">
						View Entire Data of employees
						<svg class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20"
							xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd"
								d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
								clip-rule="evenodd"></path>
						</svg>
					</button>
				</div>
				<div>
					<button (click)="fetchUser()" class="inline-flex items-center text-base font-medium text-purple-500 hover:text-purple-800 dark:text-purple-500 dark:hover:text-purple-700">
						Search for any Employee
						<svg class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20"
							xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd"
								d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
								clip-rule="evenodd"></path>
						</svg>
					</button>
				</div>
                <div>
					<button (click)="addUser()" class="inline-flex items-center text-base font-medium text-purple-500 hover:text-purple-800 dark:text-purple-500 dark:hover:text-purple-700">
						Add new users to the database
						<svg class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20"
							xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd"
								d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
								clip-rule="evenodd"></path>
						</svg>
					</button>
				</div>
                <div>
					<button (click)="updateUser()" class="inline-flex items-center text-base font-medium text-purple-500 hover:text-purple-800 dark:text-purple-500 dark:hover:text-purple-700">
						Edit details of an Employee
						<svg class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20"
							xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd"
								d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
								clip-rule="evenodd"></path>
						</svg>
					</button>
				</div>
                <div>
					<button (click)="deleteUser()" class="inline-flex items-center text-base font-medium text-purple-500 hover:text-purple-800 dark:text-purple-500 dark:hover:text-purple-700">
						Delete Employee details
						<svg class="w-5 h-5 ml-1" fill="currentColor" viewBox="0 0 20 20"
							xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd"
								d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z"
								clip-rule="evenodd"></path>
						</svg>
					</button>
				</div>
			</div>
		</div>
		<div class="col-span-2 space-y-8 md:grid md:grid-cols-2 md:gap-12 md:space-y-0">
			<div>
				<svg class="w-10 h-10 mb-2 text-purple-500 md:w-12 md:h-12 dark:text-purple-500" fill="currentColor"
					viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M2 5a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm14 1a1 1 0 11-2 0 1 1 0 012 0zM2 13a2 2 0 012-2h12a2 2 0 012 2v2a2 2 0 01-2 2H4a2 2 0 01-2-2v-2zm14 1a1 1 0 11-2 0 1 1 0 012 0z"
						clip-rule="evenodd"></path>
				</svg>
				<h3 class="mb-2 text-2xl font-bold dark:text-white">99.99% uptime</h3>
				<p class="font-light text-gray-500 dark:text-gray-400">For Landwind, with zero maintenance downtime</p>
			</div>
			<div>
				<svg class="w-10 h-10 mb-2 text-purple-500 md:w-12 md:h-12 dark:text-purple-500" fill="currentColor"
					viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
					<path
						d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z">
					</path>
				</svg>
				<h3 class="mb-2 text-2xl font-bold dark:text-white">600M+ Users</h3>
				<p class="font-light text-gray-500 dark:text-gray-400">Trusted by over 600 milion users around the world
				</p>
			</div>
			<div>
				<svg class="w-10 h-10 mb-2 text-purple-500 md:w-12 md:h-12 dark:text-purple-500" fill="currentColor"
					viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd"
						d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0 2 2 0 011.523-1.943A5.977 5.977 0 0116 10c0 .34-.028.675-.083 1H15a2 2 0 00-2 2v2.197A5.973 5.973 0 0110 16v-2a2 2 0 00-2-2 2 2 0 01-2-2 2 2 0 00-1.668-1.973z"
						clip-rule="evenodd"></path>
				</svg>
				<h3 class="mb-2 text-2xl font-bold dark:text-white">100+ countries</h3>
				<p class="font-light text-gray-500 dark:text-gray-400">Have used Landwind to create functional websites
				</p>
			</div>
			<div>
				<svg class="w-10 h-10 mb-2 text-purple-500 md:w-12 md:h-12 dark:text-purple-500" fill="currentColor"
					viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
					<path
						d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z">
					</path>
				</svg>
				<h3 class="mb-2 text-2xl font-bold dark:text-white">5+ Million</h3>
				<p class="font-light text-gray-500 dark:text-gray-400">Transactions per day</p>
			</div>
		</div>
	</div>
</div>

Related Examples

Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Author:
Amit Pachange

11 months ago

10.9k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

9 months ago

1.2k
Modern Testimonial
A simple and easy to use component for reviews and testimonials.

Author:
Coastal UI

1 month ago

302
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

1 month ago

1.2k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

4 weeks ago

335
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

2 days ago

13
Multi step form with tailwindcss and alpinejs

Author:
Michael Andreuzza

11 months ago

1.7k
Back and next navigation buttons

Author:
Fagundo67

2 years ago

10.6k
Hotel rooms
A simple room overview

Author:
Matti

3 months ago

527
dashboard layout

Author:
AKASH GANDHAR

1 month ago

192
Facts
Large fact counters with the "centered" title, a quarter overstand to the right site. Die JS-Line set the titles, so you only have to change the text -- and or modify the counters- or the titles background-color. [VIEW-NOTICE] If you change the from XS over MD to XL ... right-click here into the showcase and click "reload frame" or test it on you own site directly.

Author:
Matti

4 months ago

805
Feature Section Cards

Author:
Akram Khan

9 months ago

1.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components