Table of Contents
- Setup via CDN
- Colors
- Height and Width
- Borders
- Margin
- Padding
- Box Sizing
- Block vs Inline
- Display Property
- Border Radius
- Text Properties
- Font Properties
- Centering Elements
- Background Images
- RGBA and Opacity
- Gradients
- Shadows
- Pseudo Classes
- Transitions
- Positioning
- Pseudo Elements
- Flexbox Layout
- Grid Layout
- Media Query
- Theming
- Animation
- Resume
- Portfolio Website
Resume Project Output
Portfolio Project Output
Setup via CDN
Add the Play CDN script to your HTML
Add the Play CDN script tag to the <head> of your HTML file, and start using Tailwind’s utility classes to style your content.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> </head> <body> <h1 class="text-3xl font-bold underline">Hello world!</h1> </body> </html>
Colors
TailwindCSS provides a comprehensive color system with predefined color palettes and utilities for text, background, and border colors.
Color Utilities
- Text Colors:
text-{color}-{shade} - Background Colors:
bg-{color}-{shade} - Border Colors:
border-{color}-{shade}
Examples
<!-- Text Colors --> <p class="text-red-500">Red text</p> <p class="text-blue-700">Blue text</p> <p class="text-green-400">Green text</p> <!-- Background Colors --> <div class="bg-purple-600">Purple background</div> <div class="bg-yellow-200">Light yellow background</div> <!-- Border Colors --> <div class="border border-gray-500">Gray border</div> <div class="border-2 border-indigo-800">Thick indigo border</div>
Color Scale
Colors range from 50 (lightest) to 950 (darkest):
50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
Height and Width
Control the dimensions of elements using height and width utilities.
Width Utilities
- Fixed widths:
w-{size}(e.g.,w-4,w-8,w-16) - Percentage widths:
w-1/2,w-1/3,w-full - Viewport widths:
w-screen
Height Utilities
- Fixed heights:
h-{size}(e.g.,h-4,h-8,h-16) - Percentage heights:
h-1/2,h-full - Viewport heights:
h-screen
Examples
<!-- Width Examples --> <div class="w-32 bg-blue-300">Fixed width (128px)</div> <div class="w-1/2 bg-green-300">Half width</div> <div class="w-full bg-red-300">Full width</div> <!-- Height Examples --> <div class="h-16 bg-purple-300">Fixed height (64px)</div> <div class="h-screen bg-yellow-300">Full viewport height</div> <!-- Min/Max Dimensions --> <div class="min-w-0 max-w-sm min-h-0 max-h-64">Constrained dimensions</div>
Borders
Add borders with various styles, widths, and colors.
Border Width
border- 1px border on all sidesborder-2,border-4,border-8- Different thicknessesborder-t,border-r,border-b,border-l- Specific sides
Border Styles
border-solidborder-dashedborder-dottedborder-double
Examples
<!-- Basic Borders --> <div class="border border-gray-400">Default border</div> <div class="border-2 border-blue-500">Thick blue border</div> <!-- Specific Sides --> <div class="border-t-4 border-red-500">Top border only</div> <div class="border-l-2 border-green-500">Left border only</div> <!-- Border Styles --> <div class="border-2 border-dashed border-purple-500">Dashed border</div> <div class="border-2 border-dotted border-yellow-500">Dotted border</div>
Margin
Control the margin (external spacing) of elements.
Margin Utilities
- All sides:
m-{size} - Horizontal:
mx-{size} - Vertical:
my-{size} - Individual sides:
mt-{size},mr-{size},mb-{size},ml-{size}
Examples
<!-- All sides margin --> <div class="m-4 bg-blue-200">Margin on all sides</div> <!-- Directional margins --> <div class="mx-auto bg-green-200">Centered with auto horizontal margin</div> <div class="my-8 bg-red-200">Vertical margin only</div> <!-- Individual sides --> <div class="mt-6 mr-4 mb-2 ml-8 bg-purple-200">Different margins per side</div> <!-- Negative margins --> <div class="-m-2 bg-yellow-200">Negative margin</div>
Padding
Control the padding (internal spacing) of elements.
Padding Utilities
- All sides:
p-{size} - Horizontal:
px-{size} - Vertical:
py-{size} - Individual sides:
pt-{size},pr-{size},pb-{size},pl-{size}
Examples
<!-- All sides padding --> <div class="p-6 bg-blue-100">Padding on all sides</div> <!-- Directional padding --> <div class="px-4 py-2 bg-green-100">Horizontal and vertical padding</div> <!-- Individual sides --> <div class="pt-8 pr-6 pb-4 pl-2 bg-red-100">Different padding per side</div>
Box Sizing
Control how the total width and height of elements are calculated.
Box Sizing Utilities
box-border- Include padding and border in element's total width/heightbox-content- Exclude padding and border from element's total width/height
Examples
<!-- Border box (default in Tailwind) --> <div class="box-border w-32 p-4 border-4 bg-blue-200">Border box sizing</div> <!-- Content box --> <div class="box-content w-32 p-4 border-4 bg-green-200">Content box sizing</div>
Block vs Inline
Understanding the difference between block and inline elements.
Block Elements
- Take up full width available
- Start on new line
- Can have width, height, margin, and padding
- Examples:
<div>,<h1>-<h6>,<p>,<li>,<hr>
Inline Elements
- Take up only necessary width
- Don't break to new line
- Cannot have width/height set
- Examples:
<a>,<span>,<strong>
Inline-Block Elements
- Only take up as much width as necessary but Width and height properties can be set
- Combines features of both block and inline elments
- Examples:
<img>,<button>,<input>
Examples
<!-- Block elements --> <div class="block bg-blue-200">Block element (default for div)</div> <span class="block bg-green-200">Span as block element</span> <!-- Inline elements --> <div class="inline bg-red-200">Div as inline element</div> <span class="inline bg-yellow-200">Inline element (default for span)</span> <!-- Inline-block --> <div class="inline-block w-32 h-16 bg-purple-200">Inline-block element</div>
Display Property
Control the display behavior of elements.
Display Utilities
block- Block-level elementinline- Inline elementinline-block- Inline element with block properties (flows inline but accepts width/height)flex- Flexbox containergrid- Grid containerhidden- Hide elementtable,table-row,table-cell- Table display modes
Examples
<!-- Different display types --> <div class="block bg-blue-200">Block display</div> <span class="inline-block w-20 h-8 bg-green-200">Inline-block</span> <div class="flex bg-red-200">Flex container</div> <div class="grid grid-cols-2 bg-yellow-200">Grid container</div> <!-- Hide/show elements --> <div class="hidden">Hidden element</div> <div class="block sm:hidden">Visible on mobile, hidden on larger screens</div>
Border Radius
Create rounded corners on elements.
Border Radius Utilities
rounded- Default border radiusrounded-{size}- Specific radius sizesrounded-{corner}- Individual cornersrounded-full- Perfect circle/pill shape
Examples
<!-- Basic rounded corners --> <div class="rounded bg-blue-200 p-4">Slightly rounded</div> <div class="rounded-lg bg-green-200 p-4">Large rounded corners</div> <div class="rounded-full w-16 h-16 bg-red-200">Perfect circle</div> <!-- Individual corners --> <div class="rounded-tl-lg rounded-br-lg bg-purple-200 p-4"> Top-left and bottom-right rounded </div> <!-- Different sizes --> <div class="rounded-none bg-yellow-200 p-2">No rounding</div> <div class="rounded-sm bg-indigo-200 p-2">Small rounding</div> <div class="rounded-xl bg-pink-200 p-2">Extra large rounding</div>
Text Properties
Control text appearance, alignment, and behavior.
Text Alignment
text-left,text-center,text-right,text-justify
Text Decoration
underline,line-through,no-underline
Text Transform
uppercase,lowercase,capitalize,normal-case
Text Overflow
truncate,text-ellipsis,text-clip
Examples
<!-- Text Alignment --> <p class="text-left">Left aligned text</p> <p class="text-center">Center aligned text</p> <p class="text-right">Right aligned text</p> <!-- Text Decoration --> <p class="underline">Underlined text</p> <p class="line-through">Strikethrough text</p> <!-- Text Transform --> <p class="uppercase">uppercase text</p> <p class="lowercase">LOWERCASE TEXT</p> <p class="capitalize">capitalize each word</p> <!-- Text Overflow --> <p class="w-32 truncate">This text will be truncated with ellipsis</p>
Font Properties
Control typography including font family, size, weight, and style.
Font Family
font-sans- Sans-serif font stackfont-serif- Serif font stackfont-mono- Monospace font stack
Font Size
text-xs,text-sm,text-base,text-lg,text-xl,text-2xl, etc.
Font Weight
font-thin,font-light,font-normal,font-medium,font-semibold,font-bold,font-black
Font Style
italic,not-italic
Examples
<!-- Font Families --> <p class="font-sans">Sans-serif font</p> <p class="font-serif">Serif font</p> <p class="font-mono">Monospace font</p> <!-- Font Sizes --> <p class="text-xs">Extra small text</p> <p class="text-base">Base text size</p> <p class="text-2xl">Large text</p> <p class="text-6xl">Extra large text</p> <!-- Font Weights --> <p class="font-light">Light weight</p> <p class="font-normal">Normal weight</p> <p class="font-bold">Bold weight</p> <p class="font-black">Black weight</p> <!-- Font Style --> <p class="italic">Italic text</p> <p class="not-italic font-serif">Not italic serif</p>
Centering Elements
Various methods to center elements horizontally and vertically.
Horizontal Centering
mx-auto- Auto margins for block elementstext-center- Center inline/text contentflex justify-center- Flexbox centering
Vertical Centering
flex items-center- Flexbox vertical centeringgrid place-items-center- Grid centering
Examples
<!-- Horizontal centering --> <div class="w-32 mx-auto bg-blue-200">Centered with auto margin</div> <div class="text-center"> <span class="bg-green-200">Centered text</span> </div> <!-- Flexbox centering --> <div class="flex justify-center items-center h-32 bg-red-100"> <div class="bg-red-400 p-4">Centered both ways</div> </div> <!-- Grid centering --> <div class="grid place-items-center h-32 bg-purple-100"> <div class="bg-purple-400 p-4">Grid centered</div> </div> <!-- Absolute centering --> <div class="relative h-32 bg-yellow-100"> <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-yellow-400 p-4" > Absolutely centered </div> </div>
Background Images
Apply and control background images on elements.
Background Utilities
bg-{image}- Background imagebg-cover,bg-contain,bg-auto- Background sizebg-center,bg-top,bg-bottom, etc. - Background positionbg-repeat,bg-no-repeat- Background repeatbg-fixed,bg-scroll- Background attachment
Examples
<!-- Background size --> <div class="h-32 bg-cover bg-center bg-blue-500" style="background-image: url('image.jpg')" > Cover background </div> <div class="h-32 bg-contain bg-center bg-no-repeat bg-green-100" style="background-image: url('image.jpg')" > Contain background </div> <!-- Background position --> <div class="h-32 bg-top bg-red-100" style="background-image: url('image.jpg')"> Top positioned background </div>
RGBA and Opacity
Control transparency and opacity of elements.
Opacity Utilities
opacity-{value}- Where value is 0, 25, 50, 75, 100
Color Opacity
- Colors can include opacity:
bg-blue-500/50(50% opacity)
Examples
<!-- Element opacity --> <div class="opacity-100 bg-blue-500 p-4">Fully opaque</div> <div class="opacity-75 bg-blue-500 p-4">75% opacity</div> <div class="opacity-50 bg-blue-500 p-4">50% opacity</div> <div class="opacity-25 bg-blue-500 p-4">25% opacity</div> <!-- Color with opacity --> <div class="bg-red-500/50 p-4">Background with 50% opacity</div> <div class="text-green-600/75">Text with 75% opacity</div> <div class="border border-purple-400/30">Border with 30% opacity</div>
Gradients
Create beautiful gradient backgrounds.
Gradient Utilities
bg-gradient-to-{direction}- Gradient directionfrom-{color}- Starting colorvia-{color}- Middle color (optional)to-{color}- Ending color
Gradient Directions
bg-gradient-to-r- Left to rightbg-gradient-to-l- Right to leftbg-gradient-to-t- Bottom to topbg-gradient-to-b- Top to bottombg-gradient-to-tr,bg-gradient-to-tl, etc. - Diagonal
Examples
<!-- Basic gradients --> <div class="h-32 bg-gradient-to-r from-blue-400 to-purple-500"> Left to right gradient </div> <div class="h-32 bg-gradient-to-b from-green-400 to-blue-500"> Top to bottom gradient </div> <!-- Three-color gradient --> <div class="h-32 bg-gradient-to-r from-red-400 via-yellow-400 to-pink-400"> Three-color gradient </div> <!-- Diagonal gradient --> <div class="h-32 bg-gradient-to-br from-purple-400 to-pink-400"> Diagonal gradient </div>
Shadows
Add depth with box shadows and drop shadows.
Box Shadow Utilities
shadow-sm,shadow,shadow-md,shadow-lg,shadow-xl,shadow-2xlshadow-inner- Inner shadowshadow-none- Remove shadow
Colored Shadows
shadow-{color}-{intensity}/{opacity}
Examples
<!-- Basic shadows --> <div class="shadow-sm bg-white p-4 m-4">Small shadow</div> <div class="shadow bg-white p-4 m-4">Default shadow</div> <div class="shadow-lg bg-white p-4 m-4">Large shadow</div> <div class="shadow-2xl bg-white p-4 m-4">Extra large shadow</div> <!-- Inner shadow --> <div class="shadow-inner bg-gray-100 p-4 m-4">Inner shadow</div> <!-- Colored shadows --> <div class="shadow-lg shadow-blue-500/50 bg-white p-4 m-4">Blue shadow</div> <div class="shadow-xl shadow-red-500/25 bg-white p-4 m-4">Red shadow</div>
Pseudo Classes
Style elements based on their state or position.
State Pseudo Classes
hover:- Mouse overfocus:- Element focusedactive:- Element activateddisabled:- Disabled elementschecked:- Checked inputs
Positional Pseudo Classes
first:- First childlast:- Last childodd:- Odd childreneven:- Even children
Examples
<!-- State pseudo classes --> <button class="bg-blue-500 hover:bg-blue-700 text-white px-4 py-2"> Hover me </button> <input class="border focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-2" type="text" placeholder="Focus me" /> <button class="bg-green-500 active:bg-green-800 text-white px-4 py-2"> Click me </button> <!-- Positional pseudo classes --> <ul class="space-y-2"> <li class="first:text-green-600 last:text-red-600 odd:bg-gray-100">Item 1</li> <li class="first:text-green-600 last:text-red-600 odd:bg-gray-100">Item 2</li> <li class="first:text-green-600 last:text-red-600 odd:bg-gray-100">Item 3</li> <li class="first:text-green-600 last:text-red-600 odd:bg-gray-100">Item 4</li> </ul> <!-- Group hover --> <div class="group bg-white hover:bg-gray-100 p-4 border"> <h3 class="group-hover:text-blue-600">Hover the card</h3> <p class="group-hover:text-gray-600">This text changes too</p> </div>
Transitions
Create smooth animations between state changes.
Transition Utilities
transition- Transition all propertiestransition-{property}- Specific propertiesduration-{time}- Transition durationease-{timing}- Timing functiondelay-{time}- Transition delay
Transition Properties
transition-all- All propertiestransition-colors- Color propertiestransition-opacity- Opacity onlytransition-transform- Transform only
Examples
<!-- Basic transitions --> <button class="bg-blue-500 hover:bg-blue-700 transition duration-300 text-white px-4 py-2" > Smooth color transition </button> <div class="w-16 h-16 bg-red-500 hover:scale-110 transition-transform duration-500" > Scale on hover </div> <!-- Different transition properties --> <div class="opacity-50 hover:opacity-100 transition-opacity duration-700"> Opacity transition </div> <div class="transform rotate-0 hover:rotate-45 transition-transform duration-300" > Rotation transition </div> <!-- Custom timing --> <button class="bg-green-500 hover:bg-green-700 transition-colors duration-1000 ease-in-out delay-150 text-white px-4 py-2" > Custom timing </button>
Positioning
Control element positioning with static, relative, absolute, fixed, and sticky positioning.
Position Utilities
static- Default positioningrelative- Relative positioningabsolute- Absolute positioningfixed- Fixed positioningsticky- Sticky positioning
Position Values
top-{value},right-{value},bottom-{value},left-{value}inset-{value}- All sidesinset-x-{value},inset-y-{value}- Horizontal/vertical
Examples
<!-- Relative positioning --> <div class="relative bg-blue-100 h-32 p-4"> Relative container <div class="absolute top-2 right-2 bg-blue-500 text-white p-2"> Absolute positioned </div> </div> <!-- Fixed positioning --> <div class="fixed top-4 right-4 bg-red-500 text-white p-2 z-50"> Fixed element </div> <!-- Sticky positioning --> <div class="sticky top-0 bg-yellow-400 p-2 z-40">Sticky header</div> <!-- Centering with absolute positioning --> <div class="relative h-32 bg-gray-100"> <div class="absolute inset-0 flex items-center justify-center"> <div class="bg-white p-4 shadow">Centered content</div> </div> </div>
Pseudo Elements
Style pseudo elements like ::before and ::after.
Pseudo Element Utilities
before:- Style ::before pseudo elementafter:- Style ::after pseudo element
Content
- Use
before:content-['']orafter:content-['']to add content
Examples
<!-- Before and after pseudo elements --> <div class="relative before:content-['→'] before:absolute before:-left-4 before:text-blue-500" > Text with arrow before </div> <div class="relative after:content-['✓'] after:absolute after:-right-4 after:text-green-500" > Text with checkmark after </div> <!-- Decorative elements --> <h2 class="relative text-center before:content-[''] before:absolute before:top-1/2 before:left-0 before:w-1/4 before:h-px before:bg-gray-300 after:content-[''] after:absolute after:top-1/2 after:right-0 after:w-1/4 after:h-px after:bg-gray-300" > Decorated heading </h2> <!-- Overlay effects --> <div class="relative bg-blue-500 text-white p-8 before:content-[''] before:absolute before:inset-0 before:bg-black before:opacity-25" > <div class="relative z-10">Content with overlay</div> </div>
Flexbox Layout
Create flexible, responsive layouts using flexbox.
Flex Container
flex- Create flex containerinline-flex- Inline flex container
Flex Direction
flex-row- Horizontal (default)flex-col- Verticalflex-row-reverse,flex-col-reverse- Reversed
Justify Content (main axis)
justify-start,justify-center,justify-endjustify-between,justify-around,justify-evenly
Align Items (cross axis)
items-start,items-center,items-enditems-stretch,items-baseline
Examples
<!-- Basic flex layout --> <div class="flex space-x-4"> <div class="bg-blue-200 p-4">Item 1</div> <div class="bg-green-200 p-4">Item 2</div> <div class="bg-red-200 p-4">Item 3</div> </div> <!-- Centered content --> <div class="flex justify-center items-center h-32 bg-gray-100"> <div class="bg-white p-4 shadow">Centered</div> </div> <!-- Space distribution --> <div class="flex justify-between bg-purple-100 p-4"> <div class="bg-purple-300 p-2">Left</div> <div class="bg-purple-300 p-2">Center</div> <div class="bg-purple-300 p-2">Right</div> </div> <!-- Flex item properties --> <div class="flex bg-yellow-100 p-4"> <div class="flex-1 bg-yellow-300 p-2">Grows</div> <div class="flex-none bg-yellow-400 p-2 w-32">Fixed width</div> <div class="flex-shrink bg-yellow-500 p-2">Shrinks</div> </div> <!-- Column layout --> <div class="flex flex-col h-64 bg-indigo-100 p-4"> <div class="bg-indigo-300 p-2">Header</div> <div class="flex-1 bg-indigo-200 p-2">Content (grows)</div> <div class="bg-indigo-300 p-2">Footer</div> </div>
Grid Layout
Create complex, two-dimensional layouts with CSS Grid.
Grid Container
grid- Create grid containerinline-grid- Inline grid container
Grid Template Columns
grid-cols-{n}- Number of columnsgrid-cols-none- No explicit columns
Grid Template Rows
grid-rows-{n}- Number of rowsgrid-rows-none- No explicit rows
Grid Gaps
gap-{size}- Gap between itemsgap-x-{size},gap-y-{size}- Horizontal/vertical gaps
Examples
<!-- Basic grid --> <div class="grid grid-cols-3 gap-4"> <div class="bg-blue-200 p-4">1</div> <div class="bg-green-200 p-4">2</div> <div class="bg-red-200 p-4">3</div> <div class="bg-yellow-200 p-4">4</div> <div class="bg-purple-200 p-4">5</div> </div> <!-- Auto-fit and auto-fill --> <div class="grid grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4"> <div class="bg-indigo-200 p-4">Auto-fit item 1</div> <div class="bg-indigo-300 p-4">Auto-fit item 2</div> <div class="bg-indigo-400 p-4">Auto-fit item 3</div> </div>
Media Query
Create responsive designs that adapt to different screen sizes.
Responsive Breakpoints
sm:- 640px and upmd:- 768px and uplg:- 1024px and upxl:- 1280px and up2xl:- 1536px and up
Mobile-First Approach
Tailwind uses a mobile-first approach where unprefixed utilities apply to all screen sizes, and prefixed utilities apply from that breakpoint up.
Examples
<!-- Basic responsive design --> <div class="bg-red-500 sm:bg-blue-500 md:bg-green-500 lg:bg-yellow-500 xl:bg-purple-500 p-4" > Different colors at different breakpoints </div> <!-- Responsive grid --> <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" > <div class="bg-blue-200 p-4">Item 1</div> <div class="bg-green-200 p-4">Item 2</div> <div class="bg-red-200 p-4">Item 3</div> <div class="bg-yellow-200 p-4">Item 4</div> </div> <!-- Responsive text sizes --> <h1 class="text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl"> Responsive heading </h1> <!-- Responsive spacing --> <div class="p-2 sm:p-4 md:p-6 lg:p-8 xl:p-12 bg-gray-100"> Responsive padding </div> <!-- Hide/show at different breakpoints --> <div class="block md:hidden bg-blue-200 p-4"> Visible on mobile, hidden on desktop </div> <div class="hidden md:block bg-green-200 p-4"> Hidden on mobile, visible on desktop </div> <!-- Responsive flexbox --> <div class="flex flex-col sm:flex-row gap-4"> <div class="bg-purple-200 p-4">Stacked on mobile</div> <div class="bg-pink-200 p-4">Side by side on desktop</div> </div>
Theming
Use dark: for adding dark mode style.
<!-- Dark mode classes --> <div class="bg-white dark:bg-gray-900 text-black dark:text-white p-4"> Light background, dark in dark mode </div> <button class="bg-blue-500 dark:bg-blue-600 hover:bg-blue-600 dark:hover:bg-blue-700 text-white px-4 py-2" > Dark mode aware button </button>
Animation
Create engaging animations and keyframe-based effects.
Built-in Animations
animate-spin- Continuous rotationanimate-ping- Scaling ping effectanimate-pulse- Pulsing opacityanimate-bounce- Bouncing motion
Custom Animations
You can create custom animations using Tailwind's animation utilities and keyframes.
Transform Utilities
scale-{value}- Scale elementsrotate-{degrees}- Rotate elementstranslate-x-{value},translate-y-{value}- Move elementsskew-x-{degrees},skew-y-{degrees}- Skew elements
Examples
<!-- Built-in animations --> <div class="animate-spin w-8 h-8 bg-blue-500 mb-4"></div> <div class="animate-ping w-4 h-4 bg-red-500 rounded-full mb-4"></div> <div class="animate-pulse w-32 h-8 bg-gray-300 rounded mb-4"></div> <div class="animate-bounce w-8 h-8 bg-yellow-500 rounded-full mb-4"></div> <!-- Transform effects --> <div class="w-16 h-16 bg-purple-500 transform hover:scale-110 transition-transform duration-300 mb-4" > Hover to scale </div> <div class="w-16 h-16 bg-green-500 transform hover:rotate-45 transition-transform duration-500 mb-4" > Hover to rotate </div> <div class="w-16 h-16 bg-red-500 transform hover:translate-x-4 hover:-translate-y-2 transition-transform duration-300 mb-4" > Hover to move </div> <!-- Combining animations with interactions --> <button class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-3 rounded-lg transform hover:scale-105 active:scale-95 transition-all duration-150" > Interactive button </button> <!-- Loading spinner example --> <div class="flex items-center space-x-2"> <div class="animate-spin rounded-full h-4 w-4 border-b-2 border-blue-500" ></div> <span>Loading...</span> </div> <!-- Staggered animation effect --> <div class="space-y-2"> <div class="w-full h-4 bg-gray-200 rounded animate-pulse"></div> <div class="w-3/4 h-4 bg-gray-200 rounded animate-pulse" style="animation-delay: 0.1s;" ></div> <div class="w-1/2 h-4 bg-gray-200 rounded animate-pulse" style="animation-delay: 0.2s;" ></div> </div> <!-- Hover group animations --> <div class="group bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition-shadow duration-300" > <div class="w-12 h-12 bg-blue-500 rounded-lg group-hover:scale-110 group-hover:rotate-12 transition-transform duration-300 mb-4" ></div> <h3 class="text-lg font-semibold group-hover:text-blue-600 transition-colors duration-300" > Animated Card </h3> <p class="text-gray-600 group-hover:text-gray-800 transition-colors duration-300" > Hover me to see the animation </p> </div>
Resume
A comprehensive guide to building a professional Resume using HTML and Tailwind CSS.
Project Structure
resume/ └── index.html
HTML Setup with Tailwind CDN
Create index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bidur Sapkota - Resume</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap" rel="stylesheet" /> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" /> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { fontFamily: { lato: ['"Lato"', "sans-serif"], }, }, }, }; </script> <style> html { scroll-behavior: smooth; } /* Print styles are kept as they are not utility-based */ @media print { @page { size: 210mm 1050mm; } } </style> </head> <body class="font-lato m-0"> <main class="w-[210mm] p-[30px] bg-white"> <!-- content --> </main> </body> </html>
Add Header
Add header inside <main>
<header class="text-center mb-6"> <h1 class="text-[3.5rem] m-0 leading-[1.1]"> <span class="font-light text-[#555]">Bidur</span> <strong class="font-bold text-[#111]">Sapkota</strong> </h1> <p class="text-[0.8rem] font-bold text-[rgb(220,53,34)] uppercase tracking-[0.15em] mt-2" > <span class="inline-block after:inline-block after:content-[''] after:w-[1ch] last:after:hidden first-letter:text-[1.1rem] first-letter:font-medium" >Lecturer</span > </p> </header>
Add Contact Info
Add after </header>
<section class="text-center text-[0.9rem] text-[#444] mb-6"> <p class="my-1">Chunikhel - Lalitpur, Nepal</p> <div class="flex justify-center items-center flex-wrap gap-3 mt-3"> <a href="tel:(+977) 9865711881" class="flex items-center gap-[0.35rem] no-underline text-inherit" > <i class="fas fa-phone-alt text-[0.8rem] text-[#333]"></i> (+977) 9865711881 </a> <span class="text-black">|</span> <a href="mailto:[email protected]" class="flex items-center gap-[0.35rem] no-underline text-inherit" > <i class="fas fa-envelope text-[0.8rem] text-[#333]"></i> [email protected] </a> </div> <div class="flex justify-center items-center flex-wrap gap-3 mt-3"> <a href="https://www.linkedin.com/in/bidur-sapkota-b204142a8/" target="_blank" rel="noopener noreferrer" class="flex items-center gap-[0.35rem] no-underline text-inherit" > <i class="fab fa-linkedin-in text-[0.8rem] text-[#333]"></i> Linkedin </a> <span class="text-black">|</span> <a href="https://github.com/bidursapkota00" target="_blank" rel="noopener noreferrer" class="flex items-center gap-[0.35rem] no-underline text-inherit" > <i class="fab fa-github text-[0.8rem] text-[#333]"></i> Github </a> <span class="text-black">|</span> <a href="https://www.bidursapkota.com.np/" target="_blank" rel="noopener noreferrer" class="flex items-center gap-[0.35rem] no-underline text-inherit" > <i class="fas fa-globe text-[0.8rem] text-[#333]"></i> Portfolio </a> </div> </section>
Add Quoute
Add after contact </section>
<blockquote class="text-center italic text-base text-[#555] my-8 p-0 border-none" > <p>"Be the change that you want to see in the world."</p> </blockquote>
Add Summary
Add after </blockquote>
<section class="mt-8"> <div class="flex items-center mb-4"> <h2 class="text-[1.8rem] font-bold text-[#111] m-0 pr-[0.4rem] whitespace-nowrap" > <span class="text-[rgb(220,53,34)]">Sum</span>mary </h2> <div class="flex-grow h-[2px] bg-[#555] translate-y-[0.6rem]"></div> </div> <p class="text-base leading-relaxed text-[#333] text-justify font-light"> Electronics, Communication and Information Engineering graduate with two and half years of teaching experience and expertise in web and mobile app development, embedded systems, and full-stack solutions. Currently working as a Lecturer at Asian College of Higher Studies, with proven skills in academic instruction and student mentorship. Former Web Developer at Dallotech, where I delivered dynamic, responsive websites using Next.js, GSAP, and API integrations. </p> </section>
Add Education
Add after summary </section>
<section class="mt-8"> <div class="flex items-center mb-4"> <h2 class="text-[1.8rem] font-bold text-[#111] m-0 pr-[0.4rem] whitespace-nowrap" > <span class="text-[rgb(220,53,34)]">Edu</span>cation </h2> <div class="flex-grow h-[2px] bg-[#555] translate-y-[0.6rem]"></div> </div> <div class="flex flex-col gap-6"> <div class="flex justify-between items-start"> <div> <h3 class="text-[1.2rem] font-bold text-[#333] m-0 mb-[0.25rem]"> Hindu vidhya-peeth Nepal </h3> <p class="text-[0.8rem] font-bold text-[#555] uppercase tracking-[0.05em] m-0" > <span class="text-base">S</span>EE </p> <p class="mt-[0.35rem] mb-1 ml-[15px] leading-tight text-justify font-light text-[#444]" > Acquired GPA: 3.8 </p> </div> <div class="text-right shrink-0 min-w-[150px]"> <p class="text-base italic text-[rgb(220,53,34)] m-0 font-light"> Thali, Kathmandu </p> <p class="text-[0.9rem] text-[#777] m-0 font-light">2015 - 2016</p> </div> </div> <div class="flex justify-between items-start"> <div> <h3 class="text-[1.2rem] font-bold text-[#333] m-0 mb-[0.25rem]"> Advanced H.S.S </h3> <p class="text-[0.8rem] font-bold text-[#555] uppercase tracking-[0.05em] m-0" > <span class="text-base">I</span>NTERMEDIATE <span class="text-base">I</span>N <span class="text-base">S</span>CIENCE </p> <p class="mt-[0.35rem] mb-1 ml-[15px] leading-tight text-justify font-light text-[#444]" > Acquired GPA: 3.61 </p> </div> <div class="text-right shrink-0 min-w-[150px]"> <p class="text-base italic text-[rgb(220,53,34)] m-0 font-light"> Kumaripati, Lalitpur </p> <p class="text-[0.9rem] text-[#777] m-0 font-light">2016 - 2018</p> </div> </div> <div class="flex justify-between items-start"> <div> <h3 class="text-[1.2rem] font-bold text-[#333] m-0 mb-[0.25rem]"> National College of Engineering </h3> <p class="text-[0.8rem] font-bold text-[#555] uppercase tracking-[0.05em] m-0" > <span class="text-base">B</span>EI </p> <p class="mt-[0.35rem] mb-1 ml-[15px] leading-tight text-justify font-light text-[#444]" > Acquired Percentage: 77.38 % </p> </div> <div class="text-right shrink-0 min-w-[150px]"> <p class="text-base italic text-[rgb(220,53,34)] m-0 font-light"> Talchhikhel, Lalitpur </p> <p class="text-[0.9rem] text-[#777] m-0 font-light">2018 - 2023</p> </div> </div> </div> </section>
Add Experience
Add after education </section>
<section class="mt-8"> <div class="flex items-center mb-4"> <h2 class="text-[1.8rem] font-bold text-[#111] m-0 pr-[0.4rem] whitespace-nowrap" > <span class="text-[rgb(220,53,34)]">Work</span> Experience </h2> <div class="flex-grow h-[2px] bg-[#555] translate-y-[0.6rem]"></div> </div> <div class="flex flex-col gap-6"> <div class="flex flex-col gap-1"> <div class="flex justify-between items-start"> <div> <h3 class="text-[1.2rem] font-bold text-[#333] m-0"> Asian College of Higher Studies </h3> </div> <div class="text-right shrink-0 min-w-[150px]"> <p class="text-base italic text-[rgb(220,53,34)] m-0 font-light"> Ekantakuna, Lalitpur </p> </div> </div> <div class="flex justify-between items-start"> <div> <p class="text-[0.8rem] font-bold text-[#555] uppercase tracking-[0.05em] m-0" > <span class="text-base">L</span>ecturer </p> </div> <div class="text-right shrink-0 min-w-[150px]"> <p class="text-[0.9rem] text-[#777] m-0 font-light"> Sep 2023 to Current </p> </div> </div> <ul class="list-disc mt-3 pl-5 text-[#444]"> <li class="mb-1 leading-tight text-justify font-light"> Preparing and delivering lectures, tutorials, workshops, and seminars. </li> <li class="mb-1 leading-tight text-justify font-light"> Collaborating with other academics to improve teaching methods and knowledge base. </li> <li class="mb-1 leading-tight text-justify font-light"> Setting and grading assignments, tests, and exams. </li> <li class="mb-1 leading-tight text-justify font-light"> Supervising students on their projects. </li> <li class="mb-1 leading-tight text-justify font-light"> Providing support to students and other colleagues. </li> <li class="mb-1 leading-tight text-justify font-light"> Staying current by reading widely and producing published work in the field. </li> </ul> </div> <div class="flex flex-col gap-1"> <div class="flex justify-between items-start"> <div> <h3 class="text-[1.2rem] font-bold text-[#333] m-0"> National College of Engineering </h3> </div> <div class="text-right shrink-0 min-w-[150px]"> <p class="text-base italic text-[rgb(220,53,34)] m-0 font-light"> Talchhikhel, Lalitpur </p> </div> </div> <div class="flex justify-between items-start"> <div> <p class="text-[0.8rem] font-bold text-[#555] uppercase tracking-[0.05em] m-0" > <span class="text-base">T</span>eaching <span class="text-base">A</span>ssistant </p> </div> <div class="text-right shrink-0 min-w-[150px]"> <p class="text-[0.9rem] text-[#777] m-0 font-light"> May 2025 to Current </p> </div> </div> <ul class="list-disc mt-3 pl-5 text-[#444]"> <li class="mb-1 leading-tight text-justify font-light"> Delivering lab lectures and tutorials </li> <li class="mb-1 leading-tight text-justify font-light"> Setting and grading assignments, tests, and exams. </li> <li class="mb-1 leading-tight text-justify font-light"> Providing support to students and other colleagues. </li> </ul> </div> <div class="flex flex-col gap-1"> <div class="flex justify-between items-start"> <div> <h3 class="text-[1.2rem] font-bold text-[#333] m-0"> Asian College of Higher Studies </h3> </div> <div class="text-right shrink-0 min-w-[150px]"> <p class="text-base italic text-[rgb(220,53,34)] m-0 font-light"> Ekantakuna, Lalitpur </p> </div> </div> <div class="flex justify-between items-start"> <div> <p class="text-[0.8rem] font-bold text-[#555] uppercase tracking-[0.05em] m-0" > <span class="text-base">W</span>eb <span class="text-base">D</span>evelopment <span class="text-base">T</span>rainer </p> </div> <div class="text-right shrink-0 min-w-[150px]"> <p class="text-[0.9rem] text-[#777] m-0 font-light"> Sep 2023 to Current </p> </div> </div> <ul class="list-disc mt-3 pl-5 text-[#444]"> <li class="mb-1 leading-tight text-justify font-light"> Preparing codes for HTML, CSS, Js, Ts, React, Node, Express, Database </li> <li class="mb-1 leading-tight text-justify font-light"> Fostering project based learning </li> <li class="mb-1 leading-tight text-justify font-light"> Staying current by reading widely and producing published work in the field. </li> </ul> </div> <div class="flex flex-col gap-1"> <div class="flex justify-between items-start"> <div> <h3 class="text-[1.2rem] font-bold text-[#333] m-0"> Dallotech pvt. ltd. </h3> </div> <div class="text-right shrink-0 min-w-[150px]"> <p class="text-base italic text-[rgb(220,53,34)] m-0 font-light"> Khumaltar, Lalitpur </p> </div> </div> <div class="flex justify-between items-start"> <div> <p class="text-[0.8rem] font-bold text-[#555] uppercase tracking-[0.05em] m-0" > <span class="text-base">W</span>eb <span class="text-base">D</span>eveloper </p> </div> <div class="text-right shrink-0 min-w-[150px]"> <p class="text-[0.9rem] text-[#777] m-0 font-light"> Oct 2021 to Jun 2022 </p> </div> </div> <ul class="list-disc mt-3 pl-5 text-[#444]"> <li class="mb-1 leading-tight text-justify font-light"> Develop full stack websites with Nextjs </li> <li class="mb-1 leading-tight text-justify font-light"> Worked on projects like Pdf generation, Webflow, Landing Pages, Online job Application </li> <li class="mb-1 leading-tight text-justify font-light"> GSAP Animations, FullStack Development </li> <li class="mb-1 leading-tight text-justify font-light"> Convert figma design to code </li> <li class="mb-1 leading-tight text-justify font-light"> API Integration </li> </ul> </div> </div> </section>
Add Skills
Add after experience </section>
<section class="mt-8"> <div class="flex items-center mb-4"> <h2 class="text-[1.8rem] font-bold text-[#111] m-0 pr-[0.4rem] whitespace-nowrap" > <span class="text-[rgb(220,53,34)]">Ski</span>lls </h2> <div class="flex-grow h-[2px] bg-[#555] translate-y-[0.6rem]"></div> </div> <div class="grid grid-cols-[auto_1fr] gap-x-6 gap-y-1.5 items-start"> <div class="font-bold text-[#555] text-right leading-relaxed text-base"> Operating System </div> <div class="text-base text-[#555] text-left leading-relaxed font-light"> Ubuntu, Windows </div> <div class="font-bold text-[#555] text-right leading-relaxed text-base"> Microsoft Office Package </div> <div class="text-base text-[#555] text-left leading-relaxed font-light"> MS Word, MS PowerPoint, MS Excel, MS Access </div> <div class="font-bold text-[#555] text-right leading-relaxed text-base"> Programming </div> <div class="text-base text-[#555] text-left leading-relaxed font-light"> JavaScript, TypeScript, Python, C, C++, PHP, Java, Dart, Embedded programming in ESP8266 microcontroller, HTML, CSS </div> <div class="font-bold text-[#555] text-right leading-relaxed text-base"> Library & Framework </div> <div class="text-base text-[#555] text-left leading-relaxed font-light"> React.js, Next.js, Node.js, Express.js, Nest.js, React Native, FastAPI, Django, Flutter, Wordpress </div> <div class="font-bold text-[#555] text-right leading-relaxed text-base"> Cloud </div> <div class="text-base text-[#555] text-left leading-relaxed font-light"> GCP, AWS </div> <div class="font-bold text-[#555] text-right leading-relaxed text-base"> Database </div> <div class="text-base text-[#555] text-left leading-relaxed font-light"> MS-SQL, MySQL, MongoDB, PostgreSQL </div> <div class="font-bold text-[#555] text-right leading-relaxed text-base"> Graphic Designing </div> <div class="text-base text-[#555] text-left leading-relaxed font-light"> Photoshop, Figma </div> <div class="font-bold text-[#555] text-right leading-relaxed text-base"> IDE </div> <div class="text-base text-[#555] text-left leading-relaxed font-light"> Visual Studio Code, Jupyter Notebook </div> <div class="font-bold text-[#555] text-right leading-relaxed text-base"> Languages </div> <div class="text-base text-[#555] text-left leading-relaxed font-light"> Nepali, English, Newari </div> </div> </section>
Add Projects
Add after skills </section>
<section class="mt-8"> <div class="flex items-center mb-4"> <h2 class="text-[1.8rem] font-bold text-[#111] m-0 pr-[0.4rem] whitespace-nowrap" > <span class="text-[rgb(220,53,34)]">Pro</span>jects </h2> <div class="flex-grow h-[2px] bg-[#555] translate-y-[0.6rem]"></div> </div> <div class="flex flex-col gap-6"> <!-- Project 1 --> <div class="flex flex-col"> <a href="https://www.evereuser.co.uk/" target="_blank" rel="noopener noreferrer" class="flex items-center gap-[1ch] mb-2 no-underline" > <h3 class="text-[1.2rem] font-bold text-[#333] m-0">Online Job App</h3> <i class="fa-solid fa-up-right-from-square text-[#555] text-[0.9rem] translate-y-[2px]" ></i> </a> <p class="text-base leading-relaxed text-[#444] text-justify m-0 font-light" > Developed the complete frontend for an online job application platform, implementing user-friendly forms for job posting and applying, and seamlessly integrating APIs with the backend for smooth data communication. </p> </div> <!-- Project 2 --> <div class="flex flex-col"> <a href="https://dallotech.com/" target="_blank" rel="noopener noreferrer" class="flex items-center gap-[1ch] mb-2 no-underline" > <h3 class="text-[1.2rem] font-bold text-[#333] m-0">Dallotech</h3> <i class="fa-solid fa-up-right-from-square text-[#555] text-[0.9rem] translate-y-[2px]" ></i> </a> <p class="text-base leading-relaxed text-[#444] text-justify m-0 font-light" > Developed a fully dynamic full-stack company landing page for Dallotech, delivering a modern, responsive, and visually engaging web presence. </p> </div> </div> </section>
Add Honors
Add after projects
<section class="mt-8"> <div class="flex items-center mb-4"> <h2 class="text-[1.8rem] font-bold text-[#111] m-0 pr-[0.4rem] whitespace-nowrap" > <span class="text-[rgb(220,53,34)]">Hon</span>ors & Awards </h2> <div class="flex-grow h-[2px] bg-[#555] translate-y-[0.6rem]"></div> </div> <div class="flex flex-col gap-6"> <div class="flex flex-col"> <h3 class="text-base font-normal text-[#333] uppercase tracking-[0.05em] m-0 mb-3" > <span class="text-[1.2rem]">N</span>ational <span class="text-[1.2rem]">C</span>ollege <span class="text-[1.2rem]">O</span>f <span class="text-[1.2rem]">E</span>ngineering </h3> <ul class="list-none p-0 m-0 ml-[15px] flex flex-col gap-2"> <li class="flex justify-between items-start gap-4"> <div class="flex gap-4 font-light text-base"> <span class="text-[#333] text-[0.9rem] flex-shrink-0 w-20"> 2018 - 2023 </span> <span class="text-[#333]"> <strong class="text-[#555] font-bold">Full Scholarship</strong> </span> </div> <div class="text-right flex-shrink-0 min-w-[100px]"></div> </li> <li class="flex justify-between items-start gap-4"> <div class="flex gap-4 font-light text-base"> <span class="text-[#333] text-[0.9rem] flex-shrink-0 w-20"> 2023 </span> <span class="text-[#333]"> <strong class="text-[#555] font-bold">First Prize</strong>, Hardware Model Exibition </span> </div> <div class="text-right flex-shrink-0 min-w-[100px]"></div> </li> </ul> </div> <div class="flex flex-col"> <h3 class="text-base font-normal text-[#333] uppercase tracking-[0.05em] m-0 mb-3" > <span class="text-[1.2rem]">S</span>ports </h3> <ul class="list-none p-0 m-0 ml-[15px] flex flex-col gap-2"> <li class="flex justify-between items-start gap-4"> <div class="flex gap-4 font-light text-base"> <span class="text-[#333] text-[0.9rem] flex-shrink-0 w-20"> 2015 </span> <span class="text-[#333]"> <strong class="text-[#555] font-bold">First Prize</strong>, Table Tennis </span> </div> <div class="text-right flex-shrink-0 min-w-[100px]"> <span class="text-base italic text-[rgb(220,53,34)] font-light"> Hindu vidhya-peeth Nepal </span> </div> </li> <li class="flex justify-between items-start gap-4"> <div class="flex gap-4 font-light text-base"> <span class="text-[#333] text-[0.9rem] flex-shrink-0 w-20"> 2018 </span> <span class="text-[#333]"> <strong class="text-[#555] font-bold">First Prize</strong>, First Year Only Table Tennis </span> </div> <div class="text-right flex-shrink-0 min-w-[100px]"> <span class="text-base italic text-[rgb(220,53,34)] font-light"> National College of Engineering </span> </div> </li> <li class="flex justify-between items-start gap-4"> <div class="flex gap-4 font-light text-base"> <span class="text-[#333] text-[0.9rem] flex-shrink-0 w-20"> 2025 </span> <span class="text-[#333]"> <strong class="text-[#555] font-bold">Second Prize</strong>, Table Tennis </span> </div> <div class="text-right flex-shrink-0 min-w-[100px]"> <span class="text-base italic text-[rgb(220,53,34)] font-light"> Asian College of Higher Studies </span> </div> </li> </ul> </div> </div> </section>
Add Trainings
Add after honors </section>
<section class="mt-8"> <div class="flex items-center mb-4"> <h2 class="text-[1.8rem] font-bold text-[#111] m-0 pr-[0.4rem] whitespace-nowrap" > <span class="text-[rgb(220,53,34)]">Trai</span>nings </h2> <div class="flex-grow h-[2px] bg-[#555] translate-y-[0.6rem]"></div> </div> <ol class="flex flex-col gap-3 pl-7 m-0 list-decimal"> <div class="training-item flex justify-between items-start gap-6"> <li class="text-[#333] text-base leading-relaxed font-light pl-2 list-decimal marker:font-normal" > <span class="text-base text-[#333]"> 1 year course on <strong class="font-bold text-[#555]">“Programming in C”</strong>, Advance Academy </span> </li> <span class="text-[rgb(220,53,34)] italic text-[0.9rem] text-right shrink-0 font-light" > 2017-2018 </span> </div> <div class="training-item flex justify-between items-start gap-6"> <li class="text-[#333] text-base leading-relaxed font-light pl-2 list-decimal marker:font-normal" > <span class="text-base text-[#333]"> 20 hours of training on <strong class="font-bold text-[#555]"> “MERN Stack Development” </strong >, National College of Engineering </span> </li> <span class="text-[rgb(220,53,34)] italic text-[0.9rem] text-right shrink-0 font-light" > June 2022 </span> </div> </ol> </section>
Add Academic Projects
Add after trainings </section>
<section class="mt-8"> <div class="flex items-center mb-4"> <h2 class="text-[1.8rem] font-bold text-[#111] m-0 pr-[0.4rem] whitespace-nowrap" > <span class="text-[rgb(220,53,34)]">Aca</span>demic Project Work </h2> <div class="flex-grow h-[2px] bg-[#555] translate-y-[0.6rem]"></div> </div> <div class="flex flex-col gap-6"> <div class="flex flex-col"> <div class="flex justify-between items-start mb-2 gap-4"> <h3 class="text-[1.2rem] font-bold text-[#333] m-0">E-commerce</h3> <p class="text-base italic text-[rgb(220,53,34)] m-0 text-right shrink-0 font-light" > National College of Engineering </p> </div> <p class="text-base leading-relaxed text-[#444] text-justify m-0 font-light" > Designed and developed a full-stack web application featuring secure payment gateway integration and an intelligent product recommendation system to enhance user experience. Implemented end-to-end functionality including product management, order tracking, and user authentication. </p> </div> <div class="flex flex-col"> <div class="flex justify-between items-start mb-2 gap-4"> <h3 class="text-[1.2rem] font-bold text-[#333] m-0"> Smart Water Meter System </h3> <p class="text-base italic text-[rgb(220,53,34)] m-0 text-right shrink-0 font-light" > National College of Engineering </p> </div> <p class="text-base leading-relaxed text-[#444] text-justify m-0 font-light" > Developed an intelligent water management solution enabling real-time monitoring of household drinking water consumption. The system features a web-based admin dashboard for water providers to manage and analyze usage data, while users can track their consumption and make payments through a dedicated mobile application. Designed and implemented both the hardware sensing module and IoT integration for automated data collection and efficient water resource management. </p> </div> </div> </section>
Add References
Add after academic projects </section>
<section class="mt-8"> <div class="flex items-center mb-4"> <h2 class="text-[1.8rem] font-bold text-[#111] m-0 pr-[0.4rem] whitespace-nowrap" > <span class="text-[rgb(220,53,34)]">Refe</span>rences </h2> <div class="flex-grow h-[2px] bg-[#555] translate-y-[0.6rem]"></div> </div> <div class="flex flex-col gap-7"> <div class="flex justify-between items-start gap-4"> <div class="flex flex-col gap-1"> <h3 class="text-[1.2rem] font-bold text-[#333] m-0"> Academic Coordinator </h3> <p class="text-[0.9rem] text-[#555] uppercase m-0"> <span class="text-[1.1rem]">P</span>ranaya <span class="text-[1.1rem]">N</span>akarmi </p> <p class="text-base text-[#333] m-0 font-light ml-4"> Asian College of Higher Studies </p> <p class="text-base text-[#333] m-0 font-light ml-4"> Email: [email protected] </p> </div> <div class="text-right flex-shrink-0 min-w-[150px]"> <p class="text-base italic text-[rgb(220,53,34)] m-0 mb-1 font-light"> ACHS </p> <p class="text-base text-[#333] m-0 font-light">9841205966</p> </div> </div> <div class="flex justify-between items-start gap-4"> <div class="flex flex-col gap-1"> <h3 class="text-[1.2rem] font-bold text-[#333] m-0"> Sr. Lecturer / Coordinator </h3> <p class="text-[0.9rem] text-[#555] uppercase m-0"> <span class="text-[1.1rem]">S</span>ubash <span class="text-[1.1rem]">P</span>anday </p> <p class="text-base text-[#333] m-0 font-light ml-4"> National College of Engineering </p> <p class="text-base text-[#333] m-0 font-light ml-4"> Email: [email protected] </p> </div> <div class="text-right flex-shrink-0 min-w-[150px]"> <p class="text-base italic text-[rgb(220,53,34)] m-0 mb-1 font-light"> NCE </p> <p class="text-base text-[#333] m-0 font-light">9851115662</p> </div> </div> <div class="flex justify-between items-start gap-4"> <div class="flex flex-col gap-1"> <h3 class="text-[1.2rem] font-bold text-[#333] m-0"> Co-Founder / QA Engineer </h3> <p class="text-[0.9rem] text-[#555] uppercase m-0"> <span class="text-[1.1rem]">A</span>nup <span class="text-[1.1rem]">P</span>okhrel </p> <p class="text-base text-[#333] m-0 font-light ml-4"> DalloTech Pvt. Ltd. </p> <p class="text-base text-[#333] m-0 font-light ml-4"> Email: [email protected] </p> </div> <div class="text-right flex-shrink-0 min-w-[150px]"> <p class="text-base italic text-[rgb(220,53,34)] m-0 mb-1 font-light"> DalloTech </p> <p class="text-base text-[#333] m-0 font-light">9847481555</p> </div> </div> </div> </section>
Portfolio Website
A comprehensive guide to building a professional responsive mobile-first portfolio website using HTML and Tailwind CSS.
Project Structure
portfolio/ ├── index.html └── images/ ├── profile.png ├── bg.jpg └── photo.jpg
HTML Setup with Tailwind CDN
Create index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Bidur Sapkota - Portfolio</title> <!-- Google Fonts --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Quicksand:wght@300;400;500;600;700&display=swap" rel="stylesheet" /> <!-- Font Awesome --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" /> <!-- Tailwind CSS CDN --> <script src="https://cdn.tailwindcss.com"></script> <!-- Tailwind Config --> <script> tailwind.config = { theme: { extend: { fontFamily: { playfair: ['"Playfair Display"', "serif"], quicksand: ['"Quicksand"', "sans-serif"], }, colors: { primary: "#2c98f0", secondary: "#ec5453", tertiary: "#f9bf3f", quaternary: "#a84cb8", }, }, }, }; </script> <style> html { scroll-behavior: smooth; } </style> </head> <body class="font-quicksand m-0 md:ml-[300px]"> <!-- Content goes here --> </body> </html>
Hero Section
Add after the opening <body> tag:
<section id="hero" class="bg-[#efe7ec] h-screen flex flex-col justify-center items-start px-[30px] bg-[url('images/photo.jpg')] bg-no-repeat bg-right-bottom bg-contain" > <h1 class="font-playfair text-[28px] leading-[1.3] font-bold mb-5"> Hi! <br /> I am Bidur, <br /> Full Stack Developer </h1> <h2 class="font-quicksand leading-[1.5] mb-[50px] font-light text-black"> Electronics, Communication and Information Engineer </h2> <button class="w-[300px] text-[12px] tracking-[2px] font-normal py-[10px] px-[15px] uppercase font-quicksand rounded-sm border border-black cursor-pointer bg-transparent hover:bg-black hover:text-white transition-colors" > Download CV <i class="fa fa-download"></i> </button> </section>
About Section
<section id="about" class="mt-[100px] px-[15px]"> <!-- Section Title --> <span class="block mb-[15px] text-[10px] uppercase text-[#999999] font-medium tracking-[5px]" > about us </span> <h2 class="mb-[45px] text-[18px] font-bold uppercase tracking-[5px] leading-[1.8] text-black font-playfair" > who am i? </h2> <!-- Description --> <p class="font-quicksand font-normal leading-[1.8] text-black/70 text-base mb-[10px]" > <strong>Hi! I am Your Name</strong> Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum, sint dolorem. Animi nemo officia dolores harum. </p> <p class="font-quicksand font-normal leading-[1.8] text-black/70 text-base mb-[40px]" > Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius soluta laudantium, illo iusto aliquid recusandae. </p> <!-- Skills Grid --> <div class="md:flex md:justify-between md:gap-[30px]"> <div class="text-white border-b-2 border-primary p-6 shadow-[0px_0px_56px_-8px_rgba(0,0,0,0.17)] mb-[50px] flex-grow" > <i class="fa-solid fa-ear-listen mb-5 text-primary text-[30px]"></i> <h3 class="text-base font-quicksand font-medium text-black mb-[30px] capitalize" > Graphic design </h3> </div> <div class="text-white border-b-2 border-secondary p-6 shadow-[0px_0px_56px_-8px_rgba(0,0,0,0.17)] mb-[50px] flex-grow" > <i class="fa-solid fa-globe mb-5 text-secondary text-[30px]"></i> <h3 class="text-base font-quicksand font-medium text-black mb-[30px] capitalize" > web design </h3> </div> <div class="text-white border-b-2 border-tertiary p-6 shadow-[0px_0px_56px_-8px_rgba(0,0,0,0.17)] mb-[50px] flex-grow" > <i class="fa-solid fa-database mb-5 text-tertiary text-[30px]"></i> <h3 class="text-base font-quicksand font-medium text-black mb-[30px] capitalize" > Software </h3> </div> <div class="text-white border-b-2 border-quaternary p-6 shadow-[0px_0px_56px_-8px_rgba(0,0,0,0.17)] mb-[50px] flex-grow" > <i class="fa-solid fa-mobile mb-5 text-quaternary text-[30px]"></i> <h3 class="text-base font-quicksand font-medium text-black mb-[30px] capitalize" > application </h3> </div> </div> <!-- Happy Section --> <div class="p-[30px] bg-tertiary"> <h2 class="font-playfair text-black font-normal mb-[30px] leading-[1.5] text-[30px]" > I am happy to know you that 300+ projects done successfully! </h2> <button class="font-quicksand text-base font-normal text-black uppercase tracking-wider border border-black py-[2px] px-[10px] bg-transparent hover:bg-black hover:text-white transition-colors cursor-pointer" > hire me </button> </div> </section>
Work Statistics Section
<section id="work__count" class="bg-[url('images/bg.jpg')] bg-fixed bg-cover bg-center bg-no-repeat py-[70px] px-[15px] mt-[100px] relative after:content-[''] after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:bg-black/40 after:z-0" > <span class="block text-center z-10 relative text-[40px] font-quicksand font-bold mb-5 text-white" > 309 </span> <span class="block text-center z-10 relative text-[14px] tracking-[5px] uppercase font-quicksand font-normal mb-[40px] text-white/70" > cups of coffee </span> <span class="block text-center z-10 relative text-[40px] font-quicksand font-bold mb-5 text-white" > 356 </span> <span class="block text-center z-10 relative text-[14px] tracking-[5px] uppercase font-quicksand font-normal mb-[40px] text-white/70" > projects </span> <span class="block text-center z-10 relative text-[40px] font-quicksand font-bold mb-5 text-white" > 30 </span> <span class="block text-center z-10 relative text-[14px] tracking-[5px] uppercase font-quicksand font-normal mb-[40px] text-white/70" > clients </span> <span class="block text-center z-10 relative text-[40px] font-quicksand font-bold mb-5 text-white" > 10 </span> <span class="block text-center z-10 relative text-[14px] tracking-[5px] uppercase font-quicksand font-normal mb-[40px] text-white/70" > partners </span> </section>
Skills Section
<section id="skills" class="mt-[100px] px-[15px]"> <!-- Section Title --> <span class="block mb-[15px] text-[10px] uppercase text-[#999999] font-medium tracking-[5px]" > my speciality </span> <span class="block mb-[45px] text-[18px] font-bold uppercase tracking-[5px] leading-[1.8] text-black font-playfair" > my skills </span> <p class="font-quicksand text-black/70 font-normal leading-[1.8] mt-[50px] mb-[15px]" > Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt maiores ducimus id consequatur? Natus obcaecati. </p> <!-- Skills Grid --> <div class="md:grid md:grid-cols-2 md:gap-[30px]"> <!-- Photoshop --> <div class="mb-5"> <span class="text-base font-quicksand mb-[10px] text-black font-normal block" > Photoshop </span> <div class="bg-[#f2f3f7] rounded-lg"> <div class="w-[75%] h-[6px] bg-primary rounded-lg relative after:content-[''] after:absolute after:right-0 after:-top-[2px] after:w-[10px] after:h-[10px] after:rounded-full after:bg-primary" > <span class="absolute -top-[22px] right-0 text-primary text-[12px] leading-[1.2] font-semibold" > 75% </span> </div> </div> </div> <!-- React Js --> <div class="mb-5"> <span class="text-base font-quicksand mb-[10px] text-black font-normal block" > React Js </span> <div class="bg-[#f2f3f7] rounded-lg"> <div class="w-[60%] h-[6px] bg-secondary rounded-lg relative after:content-[''] after:absolute after:right-0 after:-top-[2px] after:w-[10px] after:h-[10px] after:rounded-full after:bg-secondary" > <span class="absolute -top-[22px] right-0 text-secondary text-[12px] leading-[1.2] font-semibold" > 60% </span> </div> </div> </div> <!-- HTML5 --> <div class="mb-5"> <span class="text-base font-quicksand mb-[10px] text-black font-normal block" > HTML5 </span> <div class="bg-[#f2f3f7] rounded-lg"> <div class="w-[85%] h-[6px] bg-tertiary rounded-lg relative after:content-[''] after:absolute after:right-0 after:-top-[2px] after:w-[10px] after:h-[10px] after:rounded-full after:bg-tertiary" > <span class="absolute -top-[22px] right-0 text-tertiary text-[12px] leading-[1.2] font-semibold" > 85% </span> </div> </div> </div> <!-- CSS3 --> <div class="mb-5"> <span class="text-base font-quicksand mb-[10px] text-black font-normal block" > CSS3 </span> <div class="bg-[#f2f3f7] rounded-lg"> <div class="w-[90%] h-[6px] bg-quaternary rounded-lg relative after:content-[''] after:absolute after:right-0 after:-top-[2px] after:w-[10px] after:h-[10px] after:rounded-full after:bg-quaternary" > <span class="absolute -top-[22px] right-0 text-quaternary text-[12px] leading-[1.2] font-semibold" > 90% </span> </div> </div> </div> <!-- Wordpress --> <div class="mb-5"> <span class="text-base font-quicksand mb-[10px] text-black font-normal block" > Wordpress </span> <div class="bg-[#f2f3f7] rounded-lg"> <div class="w-[70%] h-[6px] bg-[#2fa499] rounded-lg relative after:content-[''] after:absolute after:right-0 after:-top-[2px] after:w-[10px] after:h-[10px] after:rounded-full after:bg-[#2fa499]" > <span class="absolute -top-[22px] right-0 text-[#2fa499] text-[12px] leading-[1.2] font-semibold" > 70% </span> </div> </div> </div> <!-- SEO --> <div class="mb-5"> <span class="text-base font-quicksand mb-[10px] text-black font-normal block" > SEO </span> <div class="bg-[#f2f3f7] rounded-lg"> <div class="w-[80%] h-[6px] bg-[#4054b2] rounded-lg relative after:content-[''] after:absolute after:right-0 after:-top-[2px] after:w-[10px] after:h-[10px] after:rounded-full after:bg-[#4054b2]" > <span class="absolute -top-[22px] right-0 text-[#4054b2] text-[12px] leading-[1.2] font-semibold" > 80% </span> </div> </div> </div> </div> </section>
Contact Form Section
<section id="contact" class="mt-[100px] px-[15px]"> <!-- Section Title --> <span class="block mb-[15px] text-[10px] uppercase text-[#999999] font-medium tracking-[5px]" > get in touch </span> <h2 class="mb-[45px] text-[18px] font-bold uppercase tracking-[5px] leading-[1.8] text-black font-playfair" > contact </h2> <form id="contactForm" class="w-full"> <input type="text" placeholder="Name" id="name" name="name" class="h-[54px] w-full font-quicksand text-base font-normal py-[10px] px-5 leading-[1.4] mb-[15px] bg-[#f2f3f7] border-none outline-none" /> <textarea id="message" name="message" placeholder="Message" rows="4" class="resize-y h-[130px] w-full font-quicksand text-base font-normal py-[10px] px-5 leading-[1.4] mb-[15px] bg-[#f2f3f7] border-none outline-none" ></textarea> <button class="cursor-pointer bg-primary text-white mb-[100px] text-[12px] uppercase font-normal font-quicksand tracking-wider rounded-sm py-2 px-[15px] border-none hover:bg-primary/90 transition-colors" type="submit" > Send Message </button> </form> </section>
Sidebar Navigation
Add before closing </body> tag:
<!-- Sidebar Hamburger --> <nav class="fixed top-0 left-0 z-50"> <div class="p-[30px_15px] cursor-pointer transition-transform duration-500 md:hidden" id="hamburger" > <div class="flex flex-col justify-between w-[30px] h-[15px]"> <div class="w-[30px] h-[2px] bg-black"></div> <div class="w-[30px] h-[2px] bg-black"></div> <div class="w-[30px] h-[2px] bg-black"></div> </div> </div> <!-- Sidebar Content --> <div class="w-[300px] h-screen bg-[#f2f3f7] fixed top-0 -left-[300px] md:left-0 overflow-y-scroll transition-transform duration-500 flex flex-col items-center z-50" id="sidebarContent" > <img class="w-[150px] h-[150px] object-cover rounded-full mt-[50px] mb-[30px]" src="images/profile.png" alt="Profile Image" /> <h1 class="text-[22px] text-black mb-[7.5px] font-playfair font-bold capitalize" > Bidur Sapkota </h1> <h2 class="text-[12px] font-normal uppercase"> <span class="text-primary">Developer</span> <span class="text-black/70"> in Nepal</span> </h2> <ul class="flex flex-col items-center mt-[30px] mb-[50px]"> <a href="#hero" class="text-[12px] tracking-wider p-[2px] mb-[10px] uppercase text-black/70 relative cursor-pointer hover:after:w-[120%] after:content-[''] after:w-0 after:h-[1px] after:bg-primary after:absolute after:top-[calc(100%+2px)] after:left-1/2 after:-translate-x-1/2 after:transition-all after:ease-in after:duration-200" > home </a> <a href="#about" class="text-[12px] tracking-wider p-[2px] mb-[10px] uppercase text-black/70 relative cursor-pointer hover:after:w-[120%] after:content-[''] after:w-0 after:h-[1px] after:bg-primary after:absolute after:top-[calc(100%+2px)] after:left-1/2 after:-translate-x-1/2 after:transition-all after:ease-in after:duration-200" > about </a> <a href="#skills" class="text-[12px] tracking-wider p-[2px] mb-[10px] uppercase text-black/70 relative cursor-pointer hover:after:w-[120%] after:content-[''] after:w-0 after:h-[1px] after:bg-primary after:absolute after:top-[calc(100%+2px)] after:left-1/2 after:-translate-x-1/2 after:transition-all after:ease-in after:duration-200" > skills </a> <a href="#contact" class="text-[12px] tracking-wider p-[2px] mb-[10px] uppercase text-black/70 relative cursor-pointer hover:after:w-[120%] after:content-[''] after:w-0 after:h-[1px] after:bg-primary after:absolute after:top-[calc(100%+2px)] after:left-1/2 after:-translate-x-1/2 after:transition-all after:ease-in after:duration-200" > contact </a> </ul> <p class="px-5 mb-[30px] text-black/50 text-center text-[12px] leading-[2]"> © 2024 All rights reserved | Made with 💖 by <span class="text-primary">Bidur</span> </p> </div> </nav> <script> const hamburger = document.getElementById("hamburger"); const sidebarContent = document.getElementById("sidebarContent"); hamburger.addEventListener("click", () => { hamburger.classList.toggle("translate-x-[300px]"); sidebarContent.classList.toggle("translate-x-[300px]"); }); </script>