Vishal Vishwakarma
Creator 7 Originals@vvishal0226
Featured Work
Top components by engagement
All Components
7 published components
Pagination UI Variants - HTML CSS Bootstrap
Three pagination UI variants built with Bootstrap 5 and custom CSS - no JavaScript needed. Variant 1 is a classic numbered pagination with Bootstrap's default structure recolored to a violet accent. Variant 2 is a pill-style pagination with borderless circular buttons, SVG chevron arrows, and a solid violet active state. Variant 3 is a compact pagination with a results label on the left showing total count, ellipsis for skipped pages, and rounded square page buttons. All three share the same violet color system defined in CSS custom properties - changing the accent color takes one variable update. Manrope font from Google Fonts. Two files - index.html and style.css - drop in a folder and open in a browser.
Team Members Dashboard Table - HTML CSS
A clean admin dashboard table component built with pure HTML and CSS - no JavaScript, no frameworks. Shows a team members list with colored initials avatars, name and email, role, department, status badge, last active time, and edit/delete action buttons. Status badges have three states - Active (green), Pending (amber), and Inactive (red) - each with a matching dot indicator and soft background tint. Action buttons show a violet hover for edit and a red hover for delete using CSS transitions. Row hover adds a subtle background tint for scannability. Uses CSS custom properties for the full color system so changing the accent color takes one variable update. Manrope font loaded from Google Fonts. Two files - index.html and style.css - drop in a folder and open in a browser.
Responsive Filterable Image Gallery using HTML CSS & JavaScript
A warm-toned creative portfolio gallery built with pure HTML, CSS, and vanilla JavaScript - no frameworks, no libraries. Features a category filter bar that shows and hides cards instantly, a 4-column responsive grid that scales from 1 column on mobile to 4 on large screens, and a lightbox modal that opens on card click with prev/next navigation and keyboard support. Each gallery card scales the image on hover and slides up a title and category label from the bottom. The modal closes on overlay click, close button click, or the Escape key. Arrow keys navigate between images inside the modal. Gallery data lives in a single JavaScript array at the top of the script - adding a new project is one object. Uses Fraunces serif for headings and Instrument Sans for body text. A CSS grain overlay adds texture using an inline SVG filter. Single HTML file, no build step, open in browser and it works.
Agency CTA Section with Cursor Glow Effect - HTML Tailwind CSS
A dark-themed agency CTA section built with HTML, Tailwind CSS v4, and vanilla JavaScript. Features two ambient glow orbs that follow the mouse cursor on desktop for a depth effect, a pulsing "accepting projects" badge, gradient heading, two CTA buttons, and a 4-card service highlights grid below. Each service card lifts on hover with an indigo border glow and icon color shift. The glow orbs move in opposite directions relative to cursor position using a parallax offset calculation - orb 1 follows the cursor, orb 2 moves away from it. Only activates on desktop using a pointer: fine media query check so it does not run on touch devices. Uses Tailwind CSS v4 browser build - no config file needed, theme is defined directly in a <style type="text/tailwindcss"> block. Single HTML file, no build step, open in browser and it works.