Responsive list with 3 columns

This tailwind example is contributed by TailwindFlex, on 05-Jan-2023. Component is made with Tailwind v3.4. It is responsive.

List

Author TailwindFlex

Tailwind v3.4 14.3k 19

Fork Fullscreen

<div class="flex flex-wrap gap-4 p-6 justify-center text-lg font-serif">
    <a href="#"
        class="bg-gray-100 flex-grow text-black border-l-8 border-green-500 rounded-md px-3 py-2 w-full md:w-5/12 lg:w-3/12">
        Computer Science Engineering

<div class="text-gray-500 font-thin text-sm pt-1">
            <span>Topics: 63</span>
            <span>MCQs: 20697</span>
        </div>
    </a>
    <a class="bg-gray-100 flex-grow text-black border-l-8 border-green-500 rounded-md px-3 py-2 w-full md:w-5/12 lg:w-3/12"
        href="#">
        Mechanical Engineering
        <div class="text-gray-500 font-thin text-sm">
            <span>Topics: 48</span>
            <span>MCQs: 18222</span>
        </div>
    </a>
    <a class="bg-gray-100 flex-grow text-black border-l-8 border-green-500 rounded-md px-3 py-2 w-full md:w-5/12 lg:w-3/12"
        href="#">
        Civil Engineering
        <div class="text-gray-500 font-thin text-sm">
            <span>Topics: 55</span>
            <span>MCQs: 14783</span>
        </div>
    </a>
    <a class="bg-gray-100 flex-grow text-black border-l-8 border-green-500 rounded-md px-3 py-2 w-full md:w-5/12 lg:w-3/12"
        href="#">
        Information Technology Engineering
        <div class="text-gray-500 font-thin text-sm">
            <span>Topics: 26</span>
            <span>MCQs: 8818</span>
        </div>
    </a>
    <a class="bg-gray-100 flex-grow text-black border-l-8 border-green-500 rounded-md px-3 py-2 w-full md:w-5/12 lg:w-3/12"
        href="#">
        Electrical Engineering
        <div class="text-gray-500 font-thin text-sm">
            <span>Topics: 40</span>
            <span>MCQs: 9584</span>
        </div>
    </a>
    <a class="bg-gray-100 flex-grow text-black border-l-8 border-green-500 rounded-md px-3 py-2 w-full md:w-5/12 lg:w-3/12"
        href="#">
        Electronics and Communication Engineering
        <div class="text-gray-500 font-thin text-sm">
            <span>Topics: 8</span>
            <span>MCQs: 2576</span>
        </div>
    </a>
    <a class="bg-gray-100 flex-grow text-black border-l-8 border-green-500 rounded-md px-3 py-2 w-full md:w-5/12 lg:w-3/12"
        href="#">
        Electronics and Telecommunication Engineering
        <div class="text-gray-500 font-thin text-sm">
            <span>Topics: 5</span>
            <span>MCQs: 1739</span>
        </div>
    </a>
    <a class="bg-gray-100 flex-grow text-black border-l-8 border-green-500 rounded-md px-3 py-2 w-full md:w-5/12 lg:w-3/12"
        href="#">
        Biomedical Engineering
        <div class="text-gray-500 font-thin text-sm">
            <span>Topics: 1</span>
            <span>MCQs: 217</span>
        </div>
    </a>
    <a class="bg-gray-100 flex-grow text-black border-l-8 border-green-500 rounded-md px-3 py-2 w-full md:w-5/12 lg:w-3/12"
        href="#">
        Manufacturing Engineering
        <div class="text-gray-500 font-thin text-sm">
            <span>Topics: 1</span>
            <span>MCQs: 154</span>
        </div>
    </a>
</div>

Related Examples

Todo list template

Steven Kuhn

3 years ago

19.5k
Stacked list

Odessa Young

3 years ago

19.9k
Event timeline list

Laurits

3 years ago

14k
List section
Beautiful list section with left border

Leon Bachmann

3 years ago

12k
Responsive list with icons

Prajwal Hallale

3 years ago

10.6k
Nested list
A nested list is suitable for a table of contents / navigational list

Noob

4 years ago

21.7k
List of links

Prajwal Hallale

3 years ago

10.3k
List with border

Samuel Dawson

3 years ago

11.6k
Table of content
Show list of Table of content

Anonymous

2 years ago

6.7k
ToDo

Im_angeo

4 months ago

505
Users ranking list with points

Leif99

3 years ago

12.9k
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.

Abdul Baset Bappy

1 year ago

2.6k