Responsive Features Section

It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

This tailwind example is contributed by Ragnar lodbrok, on 31-Dec-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Services,Why choose us

Card Feature showcase

Author Ragnar lodbrok

Tailwind v3.4 6k 7

Fork Fullscreen

<h1 class="mt-4 text-xl font-semibold text-gray-800 dark:text-gray-300">Desktop Support</h1>

<p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Dignissim fusce tortor, ac sed malesuada blandit.</p>
      </div>

<h1 class="mt-4 text-xl font-semibold text-gray-800 dark:text-gray-300">Fully Responsive</h1>

<p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Dignissim fusce tortor, ac sed malesuada blandit.</p>
      </div>

<div class="flex flex-wrap flex-col items-center justify-center px-6">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
          class="w-8 h-8 dark:text-gray-200">
          class="w-8 h-8 ">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204-.165-.397-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894Z" />
          <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" />
        </svg>

<h1 class="mt-4 text-xl font-semibold text-gray-800 dark:text-gray-300">Settings</h1>

<p class="mt-2 text-gray-500 dark:text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Dignissim fusce tortor, ac sed malesuada blandit.</p>
      </div>
    </div>
  </div>
</section>

Related Examples

Feature cards with icons on top

Manon Daniel

3 years ago

18.3k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Amit Pachange

4 years ago

53.8k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Feature Card
Elevated card

Prajwal Hallale

4 years ago

10.8k
Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

11.1k
Features grid

Sophia Baker

3 years ago

10.8k
Feature Highlights cards

Carla Hoffman

2 years ago

3.1k
Why Us section with hover animation
Why to choose us section, responsive and hove animation

Amit Pachange

2 years ago

5.7k
Animated cards

Michael Andreuzza

2 years ago

7.4k
Features

Michael Andreuzza

2 years ago

5.7k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Mike Varen

2 years ago

4.7k
Meet the Team Section with Team Member Cards
Meet the Team Section with Team Member Cards

Mike Varen

2 years ago

5.2k