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

12.1k
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.8k
List of links

Prajwal Hallale

3 years ago

10.4k
List with border

Samuel Dawson

3 years ago

11.6k
Article List Section
A section displaying a list of articles with associated information.

Junclarkaizen Pagu

3 years ago

8k
About our apps UI Components
A visual collection of our most recent works - each piece crafted with intention, emotion and style.

Alif Bima Pradana

8 months ago

877
Item List with title
created by using fieldset and legend tags

Prashant

4 years ago

12.1k
Minimal list section

Task Master

3 years ago

9.3k