Features cards section

Features cards section with dark theme

This tailwind example is contributed by Sophia Baker, on 20-Jan-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Card Feature showcase

Author Sophia Baker

Tailwind v3.4 11.1k 13

Fork Fullscreen

<h2 class="mt-2 font-semibold text-base sm:text-lg text-white">
                For Developers
            </h2>
            <p class="sm:mt-1 block text-sm sm:text-base text-gray-300"> Prototype ideas
                online, without depending on your local environment.
            </p>
        </div>

<div class="block rounded-xl border border-gray-800 p-4">
            <span class="inline-block rounded-lg p-3">
                <div class="inline-flex align-middle justify-center items-center select-none text-white">
                    <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="32" width="32">
                      <path d="M7.55556 4.22222C7.55556 2.99492 8.55048 2 9.77778 2C11.0051 2 12 2.99492 12 4.22222V5.44444C12 5.99673 12.4477 6.44444 13 6.44444H16.5556C17.1078 6.44444 17.5556 6.89216 17.5556 7.44444V11C17.5556 11.5523 18.0033 12 18.5556 12H19.7778C21.0051 12 22 12.9949 22 14.2222C22 15.4496 21.0051 16.4444 19.7778 16.4444H18.5556C18.0033 16.4444 17.5556 16.8922 17.5556 17.4444V21C17.5556 21.5523 17.1078 22 16.5556 22H13C12.4477 22 12 21.5523 12 21V19.7778C12 18.5504 11.0051 17.5556 9.77778 17.5556C8.55048 17.5556 7.55556 18.5504 7.55556 19.7778V21C7.55556 21.5523 7.10784 22 6.55556 22H3C2.44772 22 2 21.5523 2 21V17.4444C2 16.8922 2.44772 16.4444 3 16.4444H4.22222C5.44952 16.4444 6.44444 15.4496 6.44444 14.2222C6.44444 12.9949 5.44952 12 4.22222 12H3C2.44772 12 2 11.5523 2 11V7.44444C2 6.89216 2.44772 6.44444 3 6.44444H6.55556C7.10784 6.44444 7.55556 5.99673 7.55556 5.44444V4.22222Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"></path>
                   </svg>
                </div>
            </span>
            <h2 class="mt-2 font-semibold text-base sm:text-lg text-white">
                Content creators
            </h2>
            <p class="sm:mt-1 block text-sm sm:text-base text-gray-300"> Deliver
                high-quality, engaging blogs, articles, and video tutorials to your audience.
            </p>
        </div>

<h2 class="mt-2 font-semibold text-base sm:text-lg text-white">
                Educators
                teaching PHP </h2>
            <p class="sm:mt-1 block text-sm sm:text-base text-gray-300"> Easily create and
                share coding assignments and projects with your students
            </p>
        </div>

<div class="block rounded-xl border border-gray-800 p-4">
            <span  class="inline-block rounded-lg p-3">
               <div class="inline-flex align-middle justify-center items-center select-none text-white">
                   <svg viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" height="32" width="32">
                    <path d="M15.2013 6.29998C15.0181 6.48691 14.9155 6.73823 14.9155 6.99998C14.9155 7.26173 15.0181 7.51305 15.2013 7.69998L16.8013 9.29998C16.9882 9.48321 17.2396 9.58584 17.5013 9.58584C17.7631 9.58584 18.0144 9.48321 18.2013 9.29998L21.4602 6.04107C21.7073 5.79397 22.1242 5.87146 22.229 6.20485C22.52 7.13078 22.583 8.11721 22.4078 9.07913C22.1892 10.279 21.61 11.3838 20.7476 12.2463C19.8852 13.1087 18.7804 13.6878 17.5805 13.9064C16.4942 14.1044 15.3767 13.9983 14.3504 13.6034C14.1561 13.5287 13.9339 13.5674 13.7867 13.7146L7.12132 20.38C6.7235 20.7778 6.18393 21.0013 5.62132 21.0013C5.05871 21.0013 4.51914 20.7778 4.12132 20.38C3.7235 19.9822 3.5 19.4426 3.5 18.88C3.5 18.3174 3.7235 17.7778 4.12132 17.38L10.7867 10.7146C10.9339 10.5674 10.9726 10.3452 10.8979 10.1509C10.503 9.12458 10.3969 8.00708 10.5949 6.92083C10.8135 5.72092 11.3926 4.61614 12.255 3.7537C13.1175 2.89127 14.2223 2.31215 15.4222 2.09352C16.3841 1.91826 17.3705 1.98134 18.2965 2.27232C18.6298 2.37708 18.7073 2.79397 18.4602 3.04107L15.2113 6.28998L15.2013 6.29998Z" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"></path>
                   </svg>
               </div>
            </span>
            <h2 class="mt-2 font-semibold text-base sm:text-lg text-white">
                Open source
                maintainers </h2>
            <p class="sm:mt-1 block text-sm sm:text-base text-gray-300">For issue
                reproduction while letting your users try your work without installing it
            </p>
        </div>
    </div>
</div>

Related Examples

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
Hover effect card

Samuel Dawson

3 years ago

33.3k
Features section
Showcase your key features

Manon Daniel

3 years ago

17.6k
Responsive Card Grid with hover animation

Prashant

4 years ago

20.7k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Alok

4 years ago

26.7k
Why choose us section
list your product features beautifully

Sameer Sultana

3 years ago

29.5k
Feature cards with icons on top

Manon Daniel

3 years ago

18.4k
cards
cards with background animation

Anonymous

3 years ago

12.6k
Feature showcase with images

Amit Pachange

3 years ago

14.7k
Responsive Feature Card

Gopi Yadav

4 years ago

14.4k
Feature Card
Elevated card

Prajwal Hallale

4 years ago

10.8k
Tailwind image slider
slider with navigation buttons and info about image

Anonymous

2 years ago

21.6k
Feature cards

Fagundo67

3 years ago

11.5k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing

Bilal Haidar

3 years ago

3.7k