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

720

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

1 year ago

12.5k
beautifull portfolio page
I create a portfolio page

Author:
Akram Khan

1 year ago

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

Author:
Coastal UI

5 months ago

686
Admin panel with collapsible menus

Author:
Rajesh Maheshwari

5 months ago

3.1k
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 months ago

950
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

3 months ago

238
admin panel UI
Premium Admin Panel Pack including sidebar navigation, top navbar, dashboard cards, user tables, quick actions, profile section, and footer. Fully responsive with modern clean design using Tailwind CSS.

Author:
Lekhraj Ghimire

1 month ago

409
Video Player
Youtube Video Player

Author:
KULDEEP

1 month ago

92
Apple Dock Navigation Bar

Author:
Cristian

6 months ago

981
Features list with icons

Author:
L.J. Weber

2 years ago

13.6k
Digital banking hero
Create a professional and trustworthy hero section for a banking landing page using TailwindCSS. This section features a bold, confidence-inspiring headline, a clear subheading emphasizing security and ease of banking, and a call-to-action button for account sign-ups or exploring services. With a modern, clean design, a background that reflects stability and innovation, and visually appealing elements, this hero section establishes credibility and trust. Ideal for online banking, fintech startups, and financial institutions, ensuring a seamless and engaging user experience.

Author:
SHARIFUL ISLAM

5 months ago

1.2k
Animated Coming Soon Page 1
animated coming soon landing page

Author:
Anonymous

1 year ago

2.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components