Services
This Services page design includes:
1. Responsive layout using Tailwind CSS grid system
2. Indigo-800 and Blue-900 color scheme
3. Dark mode support
4. Header with navigation
5. Six service cards with icons, titles, and descriptions
6. Footer with copyright information
7. Subtle animations and transitions
8. Accessibility considerations (proper heading structure, color contrast)
Key features:
- The background uses a gradient from Indigo-800 to Blue-900
- The header and footer have a white background in light mode and dark gray in dark mode
- Service cards have a white background in light mode and dark gray in dark mode
- Text colors are adjusted for readability in both light and dark modes
- Icons use the Indigo-800 color (Indigo-400 in dark mode) for consistency
- Each service card has a hover effect that scales it up slightly
- Service cards fade in with a staggered delay for a smooth entrance
- Dark mode is automatically applied based on system preferences
- The design is fully responsive, adjusting from 1 to 3 columns based on screen size
This design provides a clean, professional look for a services page while incorporating the requested color scheme and maintaining good usability across different devices and color modes.
This tailwind example is contributed by nejaa badr, on 31-Oct-2024. Component is made with Tailwind CSS v3. It is responsive.
Author nejaa badr
Related Examples
-
Certificate of CompletionA clean and modern certificate template built with Tailwind CSS. Ideal for courses, training programs, and professional achievements.
2 months ago180 -
Recipe cardA modern and responsive Tailwind CSS recipe card with image, ingredients, and instructions. Supports dark mode and mobile view.
7 months ago837 -
Linear infinite brand scrolling with hover effectBeautiful lineat brand scrolling partner with hover effect
1 year ago2.5k -
2 years ago25.3k -
Login AND Signuplogin and signup
6 months ago749 -
Tag Input fieldThis code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.
11 months ago1.8k -
free tailwind resume templatefree tailwind resume template
1 year ago3.7k -
Modern TestimonialA simple and easy to use component for reviews and testimonials.
10 months ago945 -
Todo List with Dark themeTodo List with Dark theme
6 months ago897 -
jokerjoker cyber punk
6 months ago1.1k -
6 months ago993 -
Hacker terminal #fakehacker terminal tailwind css
7 months ago931
Explore components by Tags
Didn't find component you were looking for?
Search from 3000+ components
