Home
TailwindFlex
Responsive list with 3 columns

Responsive list with 3 columns

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

List

Author TailwindFlex

11.2k

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