Home
Samuel Abera
Services

Services

This tailwind example is contributed by Samuel Abera, on 30-Dec-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Feature showcase Other

Author Samuel Abera

Fork Fullscreen

<div class="flex flex-col gap-2">
            <h3 class="text-xl font-semibold text-white dark:text-black">Web Development</h3>
            <p class="text-gray-400 dark:text-gray-700">
              Crafting responsive and intuitive websites tailored to your unique needs using cutting-edge
              technologies.
            </p>
          </div>
        </div>

<div class="flex sm:gap-4 gap-2">
          <span>
              <ion-icon class="sm:text-5xl text-3xl text-green-400 dark:text-green-600" name="browsers-outline"></ion-icon>
            </span>

<div class="flex flex-col gap-2">
            <h3 class="text-xl font-semibold text-white dark:text-black">UI/UX Design</h3>
            <p class="text-gray-400 dark:text-gray-700">Creating visually appealing and user-centric designs that enhance user
              experiences and engagement.</p>
          </div>
        </div>

<div class="flex sm:gap-4 gap-2">
          <span>
              <ion-icon class="sm:text-5xl text-3xl text-green-400 dark:text-green-600" name="archive-outline"></ion-icon>
            </span>

<div class="flex flex-col gap-2">
            <h3 class="text-xl font-semibold text-white dark:text-black">Custom CMS Solutions</h3>
            <p class="text-gray-400 dark:text-gray-700">Building reusable and efficient CMS APIs to simplify website management and
              scalability.</p>
          </div>
        </div>
        
        <div class="flex sm:gap-4 gap-2">
          <span>
              <ion-icon class="sm:text-5xl text-3xl text-green-400 dark:text-green-600" name="phone-portrait-outline"></ion-icon>
            </span>
          <div class="flex flex-col gap-2">
            <h3 class="text-xl font-semibold text-white dark:text-black">Mobile App Dev't</h3>
            <p class="text-gray-400 dark:text-gray-700">Designing and developing user-friendly mobile applications for iOS and Android,
              ensuring seamless performance and user satisfaction.</p>
          </div>
        </div>
        
        <div class="flex sm:gap-4 gap-2">
          <span>
              <ion-icon class="sm:text-5xl text-3xl text-green-400 dark:text-green-600" name="bag-check-outline"></ion-icon>
            </span>
          <div class="flex flex-col gap-2">
            <h3 class="text-xl font-semibold text-white dark:text-black">E-commerce Development</h3>
            <p class="text-gray-400 dark:text-gray-700">Creating robust platforms to elevate your online business presence.</p>
          </div>
        </div>
        
        <div class="flex sm:gap-4 gap-2">
          <span>
              <ion-icon class="sm:text-5xl text-3xl text-green-400 dark:text-green-600" name="swap-horizontal-outline"></ion-icon>
            </span>
          <div class="flex flex-col gap-2">
            <h3 class="text-xl font-semibold text-white dark:text-black">API Integration</h3>
            <p class="text-gray-400 dark:text-gray-700">Seamlessly connecting systems to enhance functionality and performance.
            </p>
          </div>
        </div>

</div>
    </section>
  </div>

</div>

<script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script>

Related Examples

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

Author:
Coastal UI

2 months ago

302
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

3 days ago

14
Feature, Showcase

Author:
Matti

3 months ago

368
Calculator
A Basic Calculator

Author:
Debbie F

8 months ago

988
Feature cards for company website
Each card provides a brief description of a specific feature, making it easy for users to understand the benefits and capabilities of our services

Author:
Anonymous

1 year ago

6.3k
Features list template

Author:
Lukas Müller

2 years ago

10.7k
Linear infinite brand scrolling with hover effect
Beautiful lineat brand scrolling partner with hover effect

Author:
Walid Ahmad

7 months ago

1.4k
Age verification 18+

Author:
Maxim

3 months ago

439
Our features
Our features

Author:
Tanvir Hasan Bappy (Tanvir)

4 months ago

432
Career Page
This is a career page component built in tailwind

Author:
Deepak Sharma

3 months ago

412
trusted by
1. Color Scheme: 1. Updated the background to a gradient from Indigo-800 to Blue-900 2. Changed text colors to use Indigo-800 and Blue-900 shades 3. Updated ring colors on avatar images to match the new scheme 2. Enhanced Design: 1. Added a containing card with white background (dark gray in dark mode) 2. Increased the size of avatar images for better visibility 3. Added a shadow effect to the card that changes color on hover 3. Responsiveness: 1. Maintained the responsive layout, stacking vertically on smaller screens 4. Animations and Interactions: 1. Added a fade-in animation for the entire component 2. Enhanced hover effects on avatar images (scale and z-index change) 3. Added a ring effect on hover for each avatar 5. Accessibility: 1. Maintained alt text for images 2. Ensured proper color contrast for text readability 6. Dark Mode: 1. Implemented dark mode support 2. Adjusted colors and ring effects for dark mode 7. Additional Enhancements: 1. Increased font sizes for better readability 2. Added font weight variations to emphasize important text 3. Improved spacing and alignment This updated component maintains the original functionality while incorporating the Indigo-800 and Blue-900 color scheme and adding enhanced visual effects and interactions.

Author:
nejaa badr

5 months ago

1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components