Responsive list with icons

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

List

Author Prajwal Hallale

Tailwind v3.4 10.6k 6

Fork Fullscreen

<div class="mx-20 mt-20 w-Full p-4 shadow-md rounded-lg border-t-2 border-teal-400">
    <div class="flex justify-between pb-4">
        <p class="font-bold text-xl">Qr Tools</p>
    </div>

<a href="#"
            class="flex border items-center rounded-md cursor-pointer transition duration-500 shadow-sm hover:shadow-md hover:shadow-teal-400">
            <div class="w-16 p-2 shrink-0">
                <img src="https://www.svgrepo.com/show/502433/tool.svg" alt="" class="h-12 w-12">
            </div>
            <div class="p-2">
                <p class="font-semibold text-lg">Tool with sidebar</p>
                <span class="text-gray-600">Description of tool</span>
            </div>
        </a>

<a href="#"
            class="flex border items-center rounded-md cursor-pointer transition duration-500 shadow-sm hover:shadow-md hover:shadow-teal-400">
            <div class="w-16 p-2 shrink-0">
                <img src="https://www.svgrepo.com/show/502433/tool.svg" alt="" class="h-12 w-12">
            </div>
            <div class="p-2">
                <p class="font-semibold text-lg">Full width tool</p>
                <span class="text-gray-600">View HTML source</span>
            </div>
        </a>

<a href="#"
            class="flex border items-center rounded-md cursor-pointer transition duration-500 shadow-sm hover:shadow-md hover:shadow-teal-400">
            <div class="w-16 p-2 shrink-0">
                <img src="https://www.svgrepo.com/show/502433/tool.svg" alt="" class="h-12 w-12">
            </div>
            <div class="p-2">
                <p class="font-semibold text-lg">Full width tool</p>
                <span class="text-gray-600">View HTML source</span>
            </div>
        </a>
    </div>
</div>